HTML基础——第一部分

1. 文档类声明标签
2. 段落标签
3. 标题标签
4. 换行标签
5. 文本格式化标签
6. 图像标签
7. 超链接标签
- 7.1 外部链接
- 7.2 内部链接
- 7.3 空链接
- 7.4 下载链接
- 7.5 网页元素链接
- 7.6 锚点链接
8. HTML表格标签
8.1 表格标签
8.2 表格属性（table）
8.3 表格结构标签
8.4 合并表格中的单元格
9. 列表标签
- 9.1 无序列表
- 9.2 有序列表
- 9.3 自定义列表
10. 表单标签
- 10.1 input标签
- - - type常用属性值
    - 注意事项
- 10.2 select标签
- 10.3 textarea表单元素

1. 文档类声明标签

<!DOCTYPE html>
<html lang="en"> <!--采用英文显示-->
<!--采用UTF-8保存文字-->
<meta charset="UTF-8">

2. 段落标签

文本会根据浏览器窗口的大小自动换行

3. 标题标签

标题标签总共分为六种，分别为一级标签，二级标签… 对应标题会加粗显示

<h1>---</h1>
<h1>---</h1>
...
<h6>---</h6>

4. 换行标签

对文本内容强制换行（单标签）

5. 文本格式化标签

名称	作用
<strong></strong> , <b></b>	加粗，突出显示，strong更强烈一点
<em></em>, <i></i>	字体倾斜
<del></del> ，<s></s>	删除线
<ins></ins>，<u></u>	下划线

<div>和 <span>标签：无语义，可以理解为一个盒子，在一行只能放一个div元素，而span元素可以在一行放多个

6. 图像标签

src是<img>的必须属性，属性值为文件指定路径

其他属性如下

属性名称	属性值
“alt”	对应图像的替换文本
“title”	鼠标放在图像上时，出现的提示文本
“width”	图像设定的宽度
“height”	图像设定的高度
“border”	图像设定边框

7. 超链接标签

链接将会以文本内容显示链接

其中target属性值分别有_self: 当前窗口打开页面，blank：新窗口打开页面

7.1 外部链接

外部链接一般指链接外部服务器URL地址

7.2 内部链接

网站内部页面之间的相互链接

7.3 空链接

7.4 下载链接

7.5 网页元素链接

链接地址以图像形式显示

7.6 锚点链接

快速定位到页面中的一个位置

在链接文本href属性中，设置属性值为#名字形式，如

<a href="#first">定位</a>
<!--其中first为定位另一个标签的id值-->
<h3 id="first">三级标题</h3>
<!--在页面中点击定位就可以切换到h3标签-->

在html中注释标签格式为<!- -注释- ->

如果想在html页面中输出‘<’,’>'类字符，可以使用该字符的特殊形式

特殊字符	形式
&nbsp	空格
&lt	<
&gt	>

8. HTML表格标签

8.1 表格标签

标签	定义
<table></table>	定义表格标签
<tr></tr>	定义表格中的每一行
<td></td>	定义表格中的单元格
<th></th>	表头单元格标签并居中显示

8.2 表格属性（table）

属性名	属性值	作用
align	left,center,right	指定对齐方式
border	1或者""	规定单元格是否拥有边框
cellpadding	像素值	规定单元格边沿与内容之间的空白
cellspacing	像素值	规定单元格之间的空白
width	像素值和百分比	规定表格的宽度
height	像素值和百分比	规定表格的高度

<!--表格属性应用举例-->
<table align="center" width="500" height="249" boder="1">
...
</table>

8.3 表格结构标签

表格结构标签分别有<thead>与<tboday>,类似于html中的head与body标签，

应用举例

<!--表格结构标签应用举例-->
<table align="center" width="500" height="249" boder="1">
<thead>
	<tr>
		<th>名称一</th>
		<th>名称二</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>内容一</td>
		<td>内容二</td>
	</tr>
</tbody>
</table>

8.4 合并表格中的单元格

合并方式可以分为：

（1）跨行合并:rowspan=“合并单元格的个数”

（2）跨列合并:colspan=“合并单元格的个数”

目标单元格：跨行合并时，目标单元格为需合并的上方单元格，跨列合并时，目标单元格为需合并的左侧单元格。

合并单元格三部曲：
1.确定是跨行还是跨列
2.找到目标单元格，写上合并格式
3.删除多余单元格

9. 列表标签

在html中列表可以分为三大类：（1）无序列表；（2）有序列表；（3）自定义列表；

9.1 无序列表

<ul>标签中只能放<li>标签

<li>标签中可以存放任何元素

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ul>

9.2 有序列表

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ol>

9.3 自定义列表

<dl>
	<dt>名词1(定义项目和名字)</dt>
	<dt>解释1</dt>
	<dt>解释2</dt>
</dl>

10. 表单标签

表单可以分为三部分：（1）表单域；（2）表单控件；（3）提示信息；

<form>标签定义表单域，实现用户信息收集和传递

表单属性如下：

属性名	属性值	作用
action	URL地址	指定接受并处理表单数据服务器的url地址
method	get/post	发送请求
name	名称	域名城

10.1 input标签

<input>标签用于收集用户信息（单标签），拥有一个type属性。

type常用属性值

属性值	用途
password	密码框
text	文本框
radio	单选按钮
checkbox	复选框

注意事项

复选框和单选框中的name属性值必须一致

复选框和单选框按钮属性设置checked=“checked”,该框会在首次加载中便会被默认选中

value属性可以在input框中输出提示信息

maxlength属性可以规定字段中字符的最大长度

10.2 select标签

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option selected="selected">选项3</option>
</select>
<!--在<option> 中定义 selected ="selected"时，当前项即为默认选中项-->

如下图所示：

HTML基础——第一部分1. 文档类声明标签2. 段落标签3. 标题标签4. 换行标签5. 文本格式化标签6. 图像标签7. 超链接标签8. HTML表格标签8.1 表格标签8.2 表格属性（table）8.3 表格结构标签8.4 合并表格中的单元格9. 列表标签10. 表单标签

10.3 textarea表单元素

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea> 标签。在表单元素中,<textarea> 标签是用于定义多行文本输入的控件。

<textarea rows="3" cols="20">
文本内容
</textarea>