HTML 标签
HTML标签
分类
- 块元素：页面中独占一行的元素（block element) 例如：标题标签，p标签····
- 在网页中一般通过块元素对页面进行布局
- 行内元素：页面中不会独占一行的元素（inline element)
- 主要用于包裹文字
注：一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
p标签中不能放任何块元素
- 块元素：页面中独占一行的元素（block element) 例如：标题标签，p标签····
- 双标签：由开始和结束两个标签符组成
- 单标签：用一个标签符号完整描述某个功能 .例：< hr> 水平线 < br> 换行
mate标签
<meta charset="UTF-8"> <!--字符编码集-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置视口大小适配-->
<meta name="keywords" content="web,网页制作,设计,html">
<meta name="description" content="专业">
<meta http-equiv="refresh"content="3;url=http://www.baidu.com">
<!--将页面重定向到另一个网站-->
meta用于设置网页中的一些元数据，元数据不是给用户看charset指定网页的字符集name指定数据的名称content指定数据的内容keywords网站关键字，可同时指定多个关键字，之间用 , 隔开description网站的描述 会显示在搜索引擎的搜索结果的中
文本标签
标题标签
<!--标题标签：
块元素：页面中独占一行的元素（block element)
h1-h6一共六级标题，重要性依次递减,h1最重要，h6最不重要
<h1>标题标签在网页中的重要性仅次于title标签，一般一个页面标题标签只会使用h1-h3
-->
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
hgroup标签
为标题标签分组，可将一组相关的标题同时放入hgroup
<hgroup>
<h1>静夜思</h1>
<h2>李白</h2>
</hgroup>
p标签
页面中的一个段落，独占一行，属于块元素
<p>
<!-- 文本内容-->
</p>
注意：
- p标签不能相互嵌套
- 独占一行
- 标签上下默认有间距margin
blockquote 长引用标签
<blockquote>
缩进效果
</blockquote>
em /i斜体
<p>
html<em>学</em>习
html<i>解析</i>
</p>
- 一般使用 i 标签
strong/b 强调加粗字体
<p>
网页<strong>设计</strong>
<b>web前端</b>
</p>
- 注意：推荐使用strong标签
br 标签 换行
<br>
hr标签 分割线
<hr>
span标签 行内元素
<span>hello world!</span>
label标签
- 没有任何样式，有特殊的用途，与表单标签搭配使用
<label for="radio">文本内容</label><input type="radio" id="radio"/>
布局标签（结构化语义标签）
H5新增：
- header：表示网页的头部
- article：表示一个独立的文章
- main：表示网页的主体部分（一个页面中只会有一个main)
- footer:表示网页的底部
- nav:表示网页中的导航
- aside：和主体相关的其他内容
- section：表示独立的区块，上边标签都不能使用时使用
常用方式：
- div:没有语义，用来表示一个区块，主要布局元素
- span: 行内元素，无任何语义，一般用于在网页中选中文字
- table标签tr,td 表格布局
列表标签
- 列表标签默认独占一行，默认上下有16px的margin，默认有40px的padding-left
- 有序和无序列表标签里面只能放li标签
- li标签独占一行
有序列表
语法：使用ol标签来创建有序列表，li 表示列表项
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
无序列表
语法：使用ul标签来创建有序列表，li 表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
定义列表
语法：使用dl标签来创建，dl 表示定义的内容，dd 来对内容进行解释说明
<dl>
<dt>结构：</dt>
<dd>结构用于对网页元素进行整理和分类，主要包括XML和XHTML</dd>
</dl>
<dl>
<dt>表现：</dt>
<dd>表现用于设置网页元素的版本、颜色、大小等外观样式，主要指的时CSS</dd>
</dl>
<dl>
<dt>行为：</dt>
<dd>行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分</dd>
</dl>
注：列表之间可以相互嵌套
a标签超链接
定义：超链接可以让我们从一个页面跳转到其他页面或者是当前页面的其他位置
属性：
href 指定跳转的目标路径
–值可以是一个外部网站的地址
–可以是一个内部网页的地址
target 指定超链接打开的位置
–可选值：
_self 默认值，在当前页面打开超链接
_blank 在一个新标签中打开超链接
语法：使用 a 标签来定义超链接
<a href="https://www.qq.com" target="_blank">腾讯qq</a>
<a href="html基本语法.html"target="_self">超链接</a><!--同一目录-->
锚点
id属性：（唯一不重复）
每一个标签都可添加一个id属性
id属性就是元素的唯一标识，同一页面中不能出现重复的id属性
- 回到当前页面顶部：直接将超链接的 href 属性设置为 #
- 可以跳转到当前页面的指定位置，只需将href属性设置为 #目标元素的id属性值
- 可以跳转至其他页面的指定位置，href属性值为需要跳转的页面+指定位置的#id名（中间无空格）
<a href="#bottom">去底部</a>
<a href="#">回顶部</a>
<p id="bottom">
teday do you do;
</p>
补充
相对路径
一般相对路径都会使用 . 或 .. 开头
./ 表示当前文件所在目录
../ 表示当前文件所在目录的上一级目录
以上两种写法都可以省略不写，都相当于默认写了 ./
绝对路径
包含盘符的整个路径
占位符
在开发中可将 # 作为超链接的路径占位符使用
javascript:;来作为href属性，点击超链接什么都不会发生
图片标签
定义：用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
属于替换元素，在块元素和行内元素之间，具有两种元素的特点
属性
src 属性：指定的外部图片的路径
alt 图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性，图片不会被搜索引擎收录
title 鼠标悬停时显示的内容
width 图片的宽度 （单位是像素px)
height 图片的高度
宽度和高度若只修改了一个，另一个会等比例缩放
语法
<img src="img.jpg" alt="木头" title="munu" width=500>
补充：图片格式
- jpg ：支持颜色比较丰富，不支持透明效果，不支持动图，一般来显示照片
- gif ：颜色较少，支持简单透明，支持动图，单一图片动图
- png ：颜色丰富，支持复杂透明，不支持动图，专为网页而生
- webp：具有以上的所有优点，缺点：兼容性不好
- base64: 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式引入图片，一般都是一些需要和网页一起加载的图片才会使用base64
选择原则：效果一样用小的，效果不一样，用效果好的
音视频标签
audio
定义：用来向页面中引入一个外部的音频文件
- 音频文件引入时，默认情况下不允许用户自己控制播放停止
属性
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
大部分浏览器不会自动对音乐进行播放
loop 音乐是否循环播放
语法：
<audio src="./mp4/20200816150618_0.mp4" controls autoplay loop></audio>注：除了通过src来指定文件路径外，还可通过source来指定文件目录
兼容所有浏览器
video
- 定义：用于向页面引入一个视频
- 其他用法与音频标签使用相同
表单标签
- 网页上登录注册等等和数据库进行交互的标签
普通输入框
语法：
<input type="text" placeholder="文本框中提示性文字" value="文本框中的默认值">
密码框
语法：
<input type="password">注意：密码框文本是不可见
单选框
语法：
<input type="radio" name="sex" id="nan"><label for="nan">男</label> <input type="radio" name="sex" id="nv"> <label for="nv">女</label>注意：
- 单选框需要设置相同的name值进行绑定，才能实现单选效果
- 像这种选择框不需要用户填写内容的，还必须指定一个value属性，
- 这样选中的元素的value属性值将会被提交到服务器
- 如果希望某个单选按钮处在默认选中的状态可以在标签中添加属性 checked=”checked”
- label的特殊用法：通过for属性指定表单元素的id名，通过点击label里面的文本可以控制对应的表单元素获取焦点
复选框
语法：
<input type="checkbox" checked>LOL <input type="checkbox">吃鸡注意：
- 单选和复选可以通过checked设置默认选中
下拉列表
语法
<select name="" id="" mutiple> <option value="" >身份证</option> <option value="" selected>学生证</option> <option value="">驾驶证</option> </select>注意：
- 下拉列表默认选中第一个选项，selected可以设置下拉列表的默认选项
- 下拉列表的name属性需要指定给select标签，value属性需要指定给option
- 下拉列表默认只能选一个选项，mutiple可以设置选择多个选项
- 如果希望将option设置为默认选中，则可以在option中添加一个属性 selected = “selected”
文本域
语法：
<textarea cols="一行显示的字符个数" rows="可以显示的行数"></textarea>注意：cols和rows变相的控制文本域的宽高
按钮
语法：
<input type="button" value="普通按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮"> <button>按钮</button> <button type="button">普通按钮</button> <button type="reset">重置按钮</button> <button type="submit">提交按钮</button>注意：
- 推荐使用button
- 重置按钮和提交按钮需要配合form标签一起使用才有效
form标签
将表单元素放在form标签中，提交给服务器
form中有一个必须的属性叫做action
action需要一个服务器的地址，当我们提交表单时，填写的内容将会提交到action指向的地址
语法：
<form action="提交数据的服务器地址" method="数据提交方式"> </form>- get：从服务器获取数据，也可以提交数据给服务器，数据会显示在地址栏
- post：提交数据给服务器，数据不会显示在地址栏
如果希望表单中的内容最终发送到服务器，还必须要给表单项添加一个name属性
该属性将会作为用户填写内容名字，在服务器中可以根据这个名字来获取用户填写内容
默认情况下，用户添加的内容将会以查询字符串的形式发送给服务器，
所谓的查询字符串就是
url地址?后边的内容username=sunwukong&password=123123查询字符实际上就是一个一个的名值对结构，多个名值对之间使用&隔开
一个名字 = 一个值
名字就是表单项指定的name属性值
值就是用户填写的内容，在服务器中可以通过名字来获取用户填写的内容
注意：表单元素上name和value的区别：name提交数据存储位置，value提交的数据具体的值。
表格标签
用于网页中表格的制作
语法：
<table border="1" width="900px" cellspacing="0px" cellpadding="20px" align="center" bgcolor="pink"> <tr bgcolor="orange"> <td width="100px" height="50px" bgcolor="tomato">姓名</td> <td align="right">性别</td> <td>年龄</td> <td>班级</td> </tr> <tr> <td>张三</td> <td>男</td> <td>18</td> <td>5期</td> </tr> <tr> <td>李四</td> <td>女</td> <td>17</td> <td>5期</td> </tr> </table>table：代表表格，一个table标签就是一个表格
- border：设置表格的边框
- width：设置表格的宽度
- height：设置表格的高度
- cellspacing:设置单元格之间的间距
- cellpadding：设置单元格边框到内容之间的间距
- align:设置表格在页面中对齐方式，left 左对齐 center 居中 right 右对齐
- bgcolor:设置表格的背景颜色
tr：代表行，一个tr就是一行
- height:设置整行的高度，会影响整行的高度
- align：设置整行的单元格内容对齐方式 left 左对齐 center 居中 right 右对齐
- bgcolor：设置整行的背景颜色
td：代表列，一个td代表一列，一个单元格
- width:设置单元格的宽度，会影响整列的宽度
- height:设置单元格的高度，会影响整行的高度
- align：设置单元格的内容的对齐方式 left 左对齐 center 居中 right 右对齐
- bgcolor：设置单元格的背景颜色
注意：
- 设置背景颜色，优先级：td>tr>table
- th代表表头，默认居中，文字加粗
- 表格的基本结构，table里面只能放tr，tr里面只能放td或th
- 表格可以相互嵌套，注意嵌套表格时，将内层表格放入外层表格的单元格之中，不能破坏外层表格的结构
表格的合并
合并的是单元格
rowspan：跨行合并单元格，垂直方向进行合并
colspan：跨列合并单元格，水平方向间隙合并
语法：
<td rowspan="合并几行_数字"></td> <td colspan="合并几列_数字"></td>
其他标签
div标签
- 没有任何样式，可以看作一个布局容器
- 独占一行
marquee 跑马灯
语法：
<!-- 跑马灯 --> <marquee behavior="" direction="">你！好世界！</marquee>
iframe标签
可以将目标网页嵌套到当前页面中
语法:
<iframe src="目标网页的文件路径" frameborder="1" width="显示区域的宽度" height="显示区域的高度"></iframe>注意：
- frameborder设置显示区域的边框
- iframe需要设置显示区域的宽高，如果显示不下，会产生滚动条
fieldset
带有边框的容器，独占一行
语法：
<fieldset> <legend> 边框上的标题</legend> <form action=""> 用户名：<input type="text"> 密码：<input type="password"> <button>登录</button> </form> </fieldset>