HTML的常用标签

HTML常用标签

1.标题标签：“<h1> </h1>”表示字体加粗，并且每个标题标签括中的文字都显示占取一行，随着h后面的数字增大，标题也就越来越小。
2.段落标签：“<p></p>”表示标签内部的内容是以段落的形式呈现的。
3.换行标签：“<br />”表示前后文本强制换行。目前后面的/不写同样可以表示换行。
4.文本格式化标签：
字体加粗：“<strong></strong>”或者“<b></b>”
字体倾斜：“<em></em>”或者“<i></i>”
字体加删除线：“<del></del>”或者“<s></s>”
字体加下划线：“<ins></ins>”或者“<u></u>”
5.<div>和<span>标签都是用来布局的，并没有语义，就是一个盒子，不过它们还是有区别的，<div>内的文本内容独占一行，而一行可以有多个<span>
6. 图像标签：<img /> ：图像标签是一个单标签，但是它有很多的属性来丰富图像的内容，同样的后面的/符号也可以不写。要想使图像更好的显示出来，我们介绍以下属性：
(1) src(必须属性)：该属性后面接图像的路径以及图像的名称使其可以在网页显示出来。
(2) alt：该属性是当图片加载不出来的时候，会显示相关信息
(3) title：该属性提示文本，即鼠标放在图片上会显示文字。
(4) width：该属性用来给图片设置宽度
(5) height：该属性用来给图像设置高度
(6) border：该属性用来给图像设置边框
属性与属性之间需要由空格隔开
7.超链接标签：格式："<a href=" " target=" ">文本信息</a>"
href为必须属性，里面填写网站的url
target表示网页的跳转方式：
默认值为_self表示当前窗口打开新页面，_blank表示新窗口打开新页面
链接分类：
外部链接：href中需要加 “http://” ，就是一般需要网络显示的网站地址。
内部链接：与调用连接的网页处于同一根目录下，直接在href中填写HTML文件名
空链接：当建立网站时没有做好后续页面时，可以给href中赋值#表示空连接。
下载链接：如果href中地址是一个文件或者压缩包则会下载这个群文件
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
锚点链接：当我们点击链接时，会快速定位到页面中的某位置。
格式要求：
在href属性中设置#名字的形式，如<a href="#one">第一集</a>
接着我们需要在跳转到的位置接收它，在目标位置我们需要设置id属性=名字
如<h1 id=“one”>第一集</h1>

注释和特殊字符

注释标签的格式：<!--注释语句--> ，注释的快捷键：Ctrl+/
常见的特殊字符：
空格符：&nbsp
小于号<：&lt
大于号>：&gt

表格标签

用来显示、展示数据的，使数据显示起来更加的规整，可读性更加好，条理性更佳。
大致格式如下：

<table>
<tr><tb>文本信息1</tb>  <tb>文本信息2</tb></tr>
</table>

其中table标签表示创建一个表格，tr标签表示创建行，嵌套其中的tb标签表示在该行创建单元格。
表头单元格标签：
一般放在表格的第一行或者第一列，且其中的文本内容加粗居中显示。其标签用<th>文本内容</th>来书写，想到于替换掉td标签来加强显示功能。
表格结构标签：
为了使代码的可读性更强，我们通常会给表格划分为两个部分，头部和身体。
我们使用<thead>头部文本</thead>和<tbody>身体标签</tbody>，其中包含着tr、td、th等标签。
合并单元格：
跨行合并：rowspan = “合并单元格的个数” ，最上侧为目标单元格
跨列合并：colspan = “合并单元格的个数” ，最左侧为目标单元格
格式：<td rowspan = "2"></td>
注：合并单元格后需要删除多余的单元格

列表标签

列表标签分为三大类，分别为无序列表、有序列表和自定义列表，列表最大的特点：整齐，规范
无序列表：
<ul>标签表示HTML页面中的无序列表，其中的<li></li>来存放列表项。各个列表项之间没有顺序之分，<ul>标签中只能嵌套<li>标签，但是<li>标签可以存放其他标签。
格式如下：

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

注：去点网页中的小圆点，可以在CSS中这样设置。

li {list-style: none;}

有序列表：
<ol>标签表示HTML页面中的有序列表，其中的<li></li>来存放列表项。各个列表项有顺序之分，<ol>标签中只能嵌套<li>标签，但是<li>标签可以存放其他标签。格式与无序列表相同。同时有序列表会自动标号。

自定义列表：
<dl>标签表示定义列表，<dt>标签定义名字，<dd>标签定义名字解释。同样的，<dl>标签中只能包含<dt>和<dd>标签。
格式如下：

<dl>
	<dt>名字</dt>
	<dd>名字解释</dd>
</dl>

表单标签

在网页中，一个完整的表单通常由表单域、表单控件和提示信息三部分组成。

表单域：表单域是一个含有表单元素的区域。
通常使用<form>标签来定义表单域，该标签会将范围内的表单元素信息提交给服务器。
使用格式如下：

<form action="url地址" method="提交方式" name="表单域名称">
		各种表单元素控件
</form>

action属性:接收和处理表单元素的服务器的url地址。
metho属性：设置表单数据的提交方式，其值可取为get或post。
name属性：指定表单的名称

表单控件：
我们熟知的表单元素有input输入表单元素、select下拉表单元素和textarea文本域元素。
<input>标签：用于收集用户信息，常见的有账号、密码输入框。注：其为单标签。
格式如下：<input type="属性值" />
type的属性值有很多种，例如：
当账户输入时，取"text"；当密码输入时，取"password"。
单选按钮，取"radio";多选按钮，取"checkbox"。
提交按钮，取"submit";重置按钮，取"reset";上传文件按钮，取"file"。
注：name时表单元素的名字，单选按钮只有都同时定义相同的name，才能实现出多选一的效果。
input标签除了type属性外，还具有name，value属性值。这些值的设定主要是便于后台人员使用。在文本框中我们想要打开页面就有提示文字，就可以使用value赋值。
input标签还有checked属性，该属性是表示该元素在首次加载的情况下就被选中了。

<label>标签：
label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动定到对应的表单元素上面去，增加了用户体验。
语法格式：

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

注：label标签中的for属性需要与相关元素的id属性相同。

select下拉表单：
为节约页面成本，我们可以使用<select>标签来定义下拉列表。
语法格式如下：

<select>
	<option>选项1</option>
	<option>选项2</option>
</select>

注：select必须包含一个option标签。在option中定义selected = "selected"表示当前项默认选中。

textarea文本域：
为了满足用户提交大量的文本信息，我们可以通过文本域标签来实现多行文本的输入。多用于用户评论或者反馈。
语法格式：

<textarea>文本内容</textarea>