前端之HTML

标签语义：根据标签的语义，在合适的地方放一个最合理的标签，让页面布局更加清晰

常用标签

1.标题标签

<h1>-<h6>

语义：作为标题使用，并且按照重要性依次递减

2.段落标签

<p>

语义：把文字分成若干段落

3.换行标签

<br> 单标签

语义： 强制换行

注意：<p>换行会产生间距，而<br>不会

4.文本格式化标签

语义：突出重要性，比普通文字重要

语义	标签
加粗	<strong>/<b>
倾斜	<em>/<i>
删除线	<del>/<s>
下划线	<ins>/<u>

说明：推荐使用<strong>,<em>,<del>,<ins>因为语义更加强烈

5.div和span

特点：无语义，俩个盒子，装内容，用来布局

6.图像标签

<img> 单标签

属性	属性值	说明
src	路径	引入图片
alt	文本	替换文本，图片不能显示时使用此文本
title	文本	提示文本，鼠标放到图像上显示的文本
width	像素	设置图像宽度
height	像素	设置图像高度
border	像素	设置图像边框粗细

7.超链接标签

<a></a>

属性	作用
src	必须属性，用于指定目标url地址
target	用于指定链接页面打开方式，默认为-self,可替换为_blank(在新窗口打开)

标签分类：

(1)外部标签:url为外部网站

(2)内部标签:内部网页之间的相互连接

(3)空标签:没有明确目标网站时用href="#"暂代

(4)下载标签:如果href中地址是一个文件或者压缩包会下载

(5)网页元素标签:网页中各种元素，视频，文本等都可以添加链接标签

(6)锚点链接:点击可以快速跳转到页面中某个位置

• 在链接标签的href中设置属性值为"#名字"的形式，例如：<a href="#content_detail">内容</a>

• 找到目标位置标签添加一个id属性，属性值为刚才添加的名字，<h3 id="content_detail"></h3>

8.表格标签

表格标签用于显示，展示数据

标签	作用
<table></table>	定义表格
<tr></tr>	嵌套在table中，定义行
<td></td>	嵌套在tr中，定义单元格
<th></th>	嵌套在tr中，定义表头单元格，通常用于表格第一行，突出重要性，会居中加粗显示
<thead></thead>	嵌套在table中，定义表格头部，一般放在第一行
<tbody></tbody>	嵌套在table中，定义表格主体，存放数据本体

注意：thead和tbody是表格结构标签，更好的表示表格语义，把表格分为头部和主体俩个部分，他们都嵌套在table中且必须包含tr标签

9.列表标签

用于布局网页元素

(1)无序列表(重点)

语法：

<ul>

<li>内容</li>

<li>内容</li>

<li>内容</li>

........

</ul>

注意：ul内只能嵌套li，但是li内可以容纳所有元素

(2)有序列表(理解)

语法：

<ol>

<li>内容</li>

<li>内容</li>

<li>内容</li>

........

</ol>

注意：ol内只能嵌套li，但是li内可以容纳所有元素

(3)自定义列表(重点)

<dl></dl> 定义列表

<dt></dt> 定义项目、名词

<dd></dd> 描述项目、名词

语法：

<dl>

<dt>名词1</dt>

<dd>名词解释1</dd>

<dd>名词解释2</dd>

</dl>

注意：dl中只能包含dt和dd,但是dd和dt中可以包含任何元素

10.表单标签

目的：为了收集用户信息

组成：表单域+表单控件(表单元素)+提示信息

表单域：

表单域是包含表单元素的区域

<form></form>用于定义表单域，form会把范围内的表单元素提交给服务器

常用属性：

属性	属性值	作用
action	url地址	用于指定并接收表单数据的服务器url地址
method	get/post	用于设置表单提交方式
name	名称	用于区分一个页面中多个表单域

表单元素

表单元素分类：

1. input:输入表单元素

2. select:下拉表单元素

3. textarea:文本域元素

(1)input表单元素

<input> 单标签

属性：

属性	属性值	作用
type	见下	根据不同的type属性值，输入字段拥有不同的表现形式
name	自定义	用于定义input元素名称
value	自定义	用于定义input元素值
checked	checked	规定input元素首次加载时被选中
maxlength	正整数	用于规定输入字段字符最大长度

注意：name和value属性通常给后台人员使用

type属性值：

属性值	作用
button	定义可点击按钮
checkbox	定义复选框，多选
file	定义输入字段和文本按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段
radio	定义单选按钮
reset	定义重置按钮，清除表单中所有数据
submit	定义提交按钮，把表单数据发送给服务器
text	定义单行输入字段，用户可在其中输入文本

注意：

1.radio和checkbox必须定义相同名字才能实现多选一和多选多

2.checked属性通常给单选和复选框使用，一打开页面默认选中某个表单元素

3.可通过value实现表单元素默认文本

4.name可区别表单元素

(2)select表单元素

语法：

<select>

<option>选项一</option>

<option>选项二</option>

<option>选项三</option>

. . . . . .

</select>

注意：

1. select中至少包含一对option

2. 在option中定义selected="selected"即为默认选项

(3)文本域表单元素

语法：

<textarea></textarea>

作用：创建多行文本输入框

11.label标签

label通常和Input标签搭配使用

label标签绑定一个表单元素，当点击label内的文本时，浏览器会自动将焦点转到对应的表单元素上

语法：

<input type="radio" name="sex" id="nan"> <label for="nan">男</label>

如上则实现点击文本"男"自动选择前面的表单元素

注意：label中for的属性值必须和所绑定的表单元素id属性值相同