HTML基础
有关HTML的基础知识
1）HTML的概念
超文本标记语言，超文本的含义是其表达能力优于文本，可以显示声音图像等非文本内容，并且可以含有超链接。标记语言的含义是其由标记构，包括HTML，XML，XHTML
2）HTML的作用
编写网页，进行展示
3）HTML文件的文档构成
| 标签 | 功能 |
|---|---|
|
文件标签，文件所有内容写在此标签内 |
|
标题标签，内部是网页的属性信息以及和CSS样式相关的内容… |
|
正文标签，内部是文档的正文部分 |
示例：
一个HTML文件的基本组成：
<html>
<head>
<title>Titletitle>
head>
<body>
body>
html>排版标记
HTML中不直接支持空格，回车，制表符。而是提供了专门的标签：
| 标签 | 功能 |
|---|---|
|
文档标记，注释标签，其内容不会展示到网页中 |
|
回车 |
|
横线 |
|
标签内的内容，按文本形式解析，即按文本方式直接显示到网页中（用于显示代码等，需要严谨格式的文本） |
示例：
一个HTML格式文件其内容如下：
<p>This is a paragraphp>
<p>This is another paragraphp>
<br/>
<pre>标签内的内容，按文本形式解析，即按文本方式直接显示到网页中pre>
用浏览器打开效果如下：
字体标签
用来给字体设置样式的标签
| 标签 | 功能 |
|---|---|
|
字体标签，需要和其属性配合使用 |
|
中划线 |
|
文字放大 |
|
文字缩小 |
|
添加下划线 |
|
加粗 |
|
上角标 |
|
上角标 |
|
标题标签，n为数字，取值范围是1~6由大到小，该标签修饰的文字被放大，标签结束后换行 |
| 属性 | 含义 |
|---|---|
| size | 设置字体大小，取值范围为1~7从小到大 |
| face | 设置字体 |
| color | 设置字体颜色，有3中方式：1.英文名称，如yellow。2.编号，如#FF0000。3.rgb(255,0,0) |
示例：
一个HTML格式文件其内容如下：
<font size="1" color="red">文字font>
<strike>文字strike>
<big>文字big>
<small>文字small>
<u>文字u>
<b>文字b>
<sub>文字sub>
<sup>文字sup>
<h1>文字h1>
<h5>文字h5>
<font size="5" color="red">文字font>用浏览器打开效果如下：
列表标签
列表标签分为以下3类：
1）有序列表order list：
type属性：取值默认值为1
start属性：开始计数标识
2）无序列表unorder list：
type属性：默认为desc，也可取square方形，circle圆形
3）分类列表：
dl : definition list，定义列
dt : definition title，定义标题
dd : definition description，定义描述
示例：
一个HTML格式文件其内容如下：
<ul>
<li>文本1li>
<li>文本2li>
ul>
<ol>
<li>文本1li>
<li>文本2li>
ol>
<dl>
<dt>文本1dt>
<dd>文本1内容dd>
<dt>文本2dt>
<dd>文本2内容dd>
dl>用浏览器打开效果如下：
图形标签
HTML只有一个图形标签，即
![]()
| 属性 | |
|---|---|
| src | 指定图片的存放地址 |
| alt | 当图片无法加载时显示的提示信息 |
| title | 鼠标悬浮时显示提示信息 |
| heigth | 设置图片的高度(1.单位是像素，2.如果宽和高只设置一个,图片会按比例缩放) |
| width | 设置图片的宽度 |
| border | 设置边框(单位是像素) |
| usemap | 将图片分区，不同的区连接到不同的页面 |
超链接和锚标签
HTML中负责设置超链接进行页面跳转的标签为锚标签
超链接的格式为：协议名+资源，例如：http://www.baidu.com百度首页，锚使页面能够在当前页面中跳转，例如：回到页面顶端
| 属性 | 含义 |
|---|---|
| href | 跳转的资源名或锚点名称 |
| name | 用于指定锚点名称 |
| target | 跳转到指定资源 |
| _blank | 打开一个空白页 |
表格标签
HTML中的表格有一下几个标签配合进行表示
1）
用于定义HTML表格
cellspacing属性：设置外边距，即单元格和其他单元格(边框)之间的距离
cellpadding属性：设置内边距，即内容和单元格框线之间的距离
2）
用于定义HTML表格中的一行
3）
用于定义HTML表格中的一个单元格
4）
用于定义HTML表格中的标题单元格
colspan属性：设置标题单元格横着占多少列
rowspan属性：设置标题单元格竖着占多少行
align属性：设置标题单元格对齐
示例：
一个HTML格式文件其内容如下：
<table border="1">
<tr>
<td>row 1, cell 1td>
<td>row 1, cell 2td>
tr>
<tr>
<td>row 2, cell 1td>
<td>row 2, cell 2td>
tr>
table>用浏览器打开效果如下：
框架标签
框架标签与标签不能同时使用
1）
用于定义HTML框架
rows属性：将框架（横向）分隔
cols属性：将框架（纵向）分隔
2）
用于定义HTML框架的页面
src属性：设置显示页面的路径
noresize属性：值为true时不能调整框架大小
scrolling属性：是否显示滚动条，可选值为yes/no/auto，是/否/自动
表单标签
1）
用于定义HTML表单
action属性：设置表单提交目标位置
method属性：设置表单的提交方式，get(默认值)/post
2）
用于定义HTML表单中的表单项
type属性：用于设置表单项类型，其可选值如下表所示：
| 类型名称 | 含义 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 文件上传 |
| hidden | 隐藏域 |
| submit | 提交整个表单 |
| reset | 重置 |
| button | 按钮 |
name属性：对于表单项，提交时键值对的键
value属性：1.对于需要提交的表单项，该属性用来设置提交时的值。2.对于按钮类的组件，该属性用来设置按钮上显示的文字
readonly属性：将文本设置为只读属性，限制value属性的变化。只能给text，password，textarea3种类型的表单
disabled属性：若设置为true，则文本框被禁用，颜色变灰，不参与提交。用于input类型的文本框
checked属性：设置文本框为默认被选中。用于radio和checkbox类型的文本框
maxlength属性：定义文本框的最大长度，用于text和password类型的文本框
size属性：定义输入框的显示长度，用于text和password类型的文本框
3）
用于定义HTML下拉选项
name属性：设置提交数据的键
size属性：设置同时显示的选项个数
multiple属性：将下拉框设置成多选
selected属性：设置哪些option默认被选中
4）
用于定义HTML文本域
name属性：设置提交数据的键
col属性：设置列宽
row属性：设置行高
readonly属性：将文本域设置为只读
MEAT标签
MEAT标签是属性标签。又被称为网页元标签，用来设置网页属性
示例：
设置网页文件的文件类型和编码方式：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">打开网页3秒后刷新：
<meta http-equiv="refresh" content="3;url=06-图形标签.html">与搜索有关，搜索引擎会用到：
<meta name=“keywords” content=“网页内容关键字" />
<meta name="description" content="网页内容简介" />