HTML学习1-----标签

排版标签

（1）<h></h>标题标签
有1-6级标题，从1到6逐渐变小，文字都有加粗，每个标题独占一行
（2）<p></p>段落标签
段落直接的间隙，独占一行
（3）<br>换行标签
用来强制换行
（4）<hr>水平线标签
在页面中显示一条水平线，用于主题的分割转换

文本格式化标签

（1）加粗 <b> 或者 <strong>
（2）下划线 <u> 或者 <ins>
（3）倾斜 <i>或者 <em>
（4）删除线 <s> 或者 <del>

媒体标签

（1）图片标签 <img src=" " alt=" " title=" ">

图片标签属性：src后加图片路径；
alt后加文本替换内容，及图片加载失败时显示的文本，图片加载成功时不显示；
title提示文本，当鼠标悬停时显示的内容；
width宽 height高，宽和高只设置其中一个属性时，图片会等比变化（等比放大或缩小）

（2）音频标签<audio src=" " controls></audio>
controls、autoplay、loop属性均有默认值

音频标签属性：src后加音频路径；
controls显示播放的控件；
autoplay自动播放（部分浏览器不支持，如谷歌）；
loop循环播放；
目前支持MP3、Wav、Ogg三种格式

（3）视频标签<video src=" " controls>

视频标签属性：src后加视频路径；
controls显示播放的控件；
autoplay自动播放（谷歌浏览器需配合muted实现静音播放）；
loop循环播放
目前支持MP4、WebM、Ogg

链接标签

<a href'=" "></a>

也叫a标签、超链接、锚链接
a标签文字默认有下划线

超链接属性：href目标网页网址；
target目标网页打开方式 _self为默认值，在当前网页中打开，_black在新窗口中打开

空链接

<a href="#"></a>
功能：点击之后回到网页顶部；开发中不确定该链接最终跳转位置，用空链接占个位置

列表标签

以行的方式整齐的显示内容
无序列表最常用，有序列表可用于排行榜，自定义列表可用于底部导航
（1）无序列表
<ul> <li> </li> <li> </li> </ul>

ul表示无序列表的整体，用于包裹li标签；
li表示无序列表的每一项，用于包含每一项的内容；
列表每一项前面有小圆点

（2）有序列表
<ol> <li> </li> <li> </li> </ol>

ol表示有序列表的整体，用于包裹li标签；
li表示无序列表的每一项，用于包含每一项的内容；
列表每一项前面有数字

（3）自定义列表

<dl>
	<dt></dt>
	<dd></dd>
	<dd></dd>
	
	<dt></dt>
	<dd></dd>
	<dd></dd>
</dl>

dl表示自定义列表的整体，用于包裹dt和dd标签；
dt表示自定义列表的主题；
dd表示针对主题的每一项内容，dd会显示默认缩进效果

表格标签

1.表格基本使用

<table>
	<caption></caption>
	
	<thead>
		<tr>
			<th></th>
			<th></th>
		</tr>
	</thead>
	
	<tbody>	
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
	</tbody>

	<tfoot>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tfoot>
</table>

表格基本标签：table表示表格的整体，用于包裹tr和td标签；
tr表示表格的每一行；
td表示表格的单元格

表格标题和表格单元格标签：caption表示表格整体大标题，默认在表格整体顶部居中位置显示；
th表头单元格，用于表示每一列小标题，默认加粗居中显示，th标签要写在tr标签里面（用于替换td标签）

表格的结构标签：thead表格头部；
tbody表格内容；
tfoot表格底部；
表格头部和底部会比身体窄一点；表格的结构标签可以省略，但是加上以后结构看起来会更加清晰；表格的结构标签内部用于包裹tr标签

表格的属性：border表格的边框，可设置为1；
width表格的宽度；
height表格的高度

2.表格单元格合并

同一个结构标签中的单元格才可以合并，如表格头部的单元格不可以和表格身体的单元格合并（可以不写结构标签，按照自己的想法合并）

rowspan和colspan的值占几个设置为几

表单标签

表单标签如下：
1.input标签
<input type=" " placeholder=“ ”>

input标签type属性的值可以为以下：text表示文本框，为默认值,placeholder表示文本框提示内容；
password表示密码框，placeholder为提示内容；
radio表示单选框，用name属性可以进行分组，有相同name属性的单选框为一组，一组中同时只能有一个默认值，用checked设置默认值；
checkbox表示多选框，用checked设置默认选项，默认选修可以有多个；
file表示文件，用multiple属性可以选中多个文件，默认值只能选1个文件夹
按钮 submit提交按钮，点击之后提交数据给后端服务器；
reset重置按钮，点击之后恢复表单默认值;
button普通按钮，默认无功能，用value给普通按钮写提示文字，配合js添加功能
实现按钮功能要把实现按钮功能的内容放在form标签里面

例子：
基本语法


文本框

单选框

多选框

2.button标签
<button type=""></button>

button标签type属性的值可以为submit，提交按钮，点击之后提交
数据给后端服务器；
reset重置按钮，点击之后恢复表单默认值;
button普通按钮，默认无功能，用value给普通按钮写提示文字，配 合js添加功能
实现按钮功能要把实现按钮功能的内容放在form标签里面

input标签实现按钮功能和button标签实现按钮功能区别：展现按钮的方式不同，button为双标签，中间可写入自己需要提示的内容；
谷歌浏览器中button标签type属性默认为submit提交按钮，button标签除包裹文字外，还可以包裹图片等；input标签是单标签，展示按钮的形式较为单一

3.select下拉菜单标签
用于在网页中多个选择项的下拉菜单

<select>
	<option></option>
</select>

select标签是下拉菜单的整体
option标签是下拉菜单的每一项

selected属性用来设置下拉菜单的默认选中，如果不写selected属性则默认选项为第一项（代码中下拉菜单第一行展示内容）

4.textarea文本域标签
<textarea cols=" " rows=" "></textarea>

cols和rows可以改变文本域标签的宽高，建议用css设置

input标签与textarea标签实现文本输入的不同点：虽然两者都可以实现文本输入，但是input只能实现一行文本的输入，而textarea标签可以实现多行文本的输入；textarea标签可以在右下角将文本输入的范围变化

5.label标签
配合其他表单标签使用，用于绑定内容与表单标签的关系
使用方法：一种方法是用label标签把内容（文本）包裹起来；在表单标签上添加id属性；在label标签的for属性中设置对应的id属性值；
另一种方法是先用label标签把内容（文本）和表单标签一起包裹起来，然后把label标签的for属性删除即可

语义化标签

1.没有语义的标签
<div></div>独占一行

<span></span>一行显示多个

2.有语义的标签，独占一行
<header></header>网页头部
<nav></nav>网页导航
<focter></focter>网页底部
<aside></aside>网页侧边栏
<section></section>网页区块
<article></article>网页文章

字符实体

展示效果如下

代码如下

如果html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格；如果想实现浏览器解析多个代码可以通过字符实体实现
字符实体结构：&英文;