前端html

HTML语言设置

HTML语言设置主要让浏览器显示对应的翻译提示，有利于搜索引擎优化

具体写法：

html

<html lang="zh-CN">

lang 属性的编写规则：

zh-CN：中文-中国大陆（简体中文）
zh-TW：中文-中国台湾（繁体中文）
zh：中文
en-US：英语-美国
en-GB：英语-英国

路径分类

相对路径：以当前位置作为参考点，去建立路径

./：同级，表示当前目录，用于指定相对路径时引用当前工作目录，./可以省略

/：下一级，表示系统的根目录，是绝对路径的起始点，用于指定文件或目录在整个文件系统中的位置

../：上一级，表示父目录，用于指定相对路径时引用当前工作目录的上一级目录

绝对路径：以根位置作为参考点，去建立路径

绝对路径从系统的根目录开始，完整地描述文件或目录在文件系统中的位置。它提供了完整的路径信息，确切指定文件或目录的位置

HTML基本结构

每个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们成为根标签
<head></head>	文档的头部	注意在head标签中我们必须要设置的标签是title
<title></title>	文档的标题	让页面拥有属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容。页面内容基本上都是放到body里面的

html

<!-- 版本号 -->
<!DOCTYPE html>
<!-- 语言 -->
<html lang="zh-CN">
  <head>
    <!-- 解决文字乱码问题 -->
    <meta charset="UTF-8" />
    <!-- 解决浏览器兼容性问题，最新版本的浏览器 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 视口，移动端兼容性适配问题 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 设置标题左侧的小图片 -->
    <link rel="shortcut icon" href="./favicon.ico">
    <title>Document</title>
  </head>
  <body>

  </body>
</html>

标准流

一个完整的网页布局，只有标准流是不能满足需求，打破常规布局，让多个块级元素水平一行显示并且没有间隙

网页布局：标准流 + 浮动 + 定位
标准流布局规则：
- 块级元素：从上往下、垂直布局、独占一行
- 行内 /行内块元素：从左往右、水平布局、一行占满自动换行

HTML常用标签

语义化标签

用特定的标签，去表达特定的含义。标签的默认效果不重要（可通过CSS修改）语义最重要

如：h1文字效果大，但是重要的是h1的语义效果

语义化标签优势：

代码结构可读性强
方便设备解析
有利于SEO（搜索引擎优化）
- 作用：让网站在搜索引擎上的排名靠前
- 提升SEO:
  - 竞价排名
  - 将网页制作成HTML后缀
  - 合适地方用合适的标签

SEO三大标签
title：网页标题标签
description：网页描述标签（meta--name="description"）
keywords：关键词标签（meta--name="keywords"）

排版标签

标签名	标签含义	单/双标签
<h1></h1> ~ <h6></h6>	标题	双
<p><p>	段落	双
<div></div>	没有任何含义，用于整体布局，用的最多	双
<br/>	在文本中生成一个换行（回车）符号	单
<hr/>	生成一条横线	单

h1最好只写一个，h2~h6能适当多写。h1~h6不要互相嵌套；p标签很特殊，它里面不能有块级元素

可以依据是否能包含内容来初步判断为单标签还是双标签

文本标签

标签名	标签含义	单/双标签
<strong></strong> 或 <b></b>	加粗，着重强调内容	双
<em></em> 或 <i></i>	倾斜，强调内容	双
<del></del> 或 <s></s>	删除线，表示一些被从文档中删除的文字内容	双
<span></span>	没有语义，主要用于包裹短语的通用容器	单

文本标签一般使用p标签和span，前者为块级元素，后者为行内元素

图片标签

<img>

单标签。其中src必写，title为悬停文字、alt为图裂显示文字

alt 属性的作用：
搜索引擎通过 alt 属性，得知图片的内容
当图片无法展示时候，有些浏览器会呈现 alt 属性的值

超链接标签

<a></a>从当前页面进行跳转
可以实现：跳转到指定页面、跳转到指定文件、跳转到锚点位置、唤起指定应用

href ：指定地址，或者ID
target ：指定页面打开方式，_self为默认本窗口，_blank为新窗口打开
id：元素的唯一标识，可用于设置锚点
name：元素名字，也可用于设置锚点

a 元素可以包含除去自身以外的任何元素，尽管它是行内元素

a标签使用示例如下：

跳转到指定网页

html

<!-- 跳转到网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a>

跳转到指定文件

html

<!-- 浏览器能直接打开的文件 -->
<a href="./resource/img.jpg">图片</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/资源.zip">资源</a>
<!-- 强制触发下载 -->
<a href="./resource/电影.mp4" download="电影片段.mp4">下载电影</a>

跳转到锚点位置

html

<!-- 设置锚点 -->
<!-- a标签配合name属性 -->
<a name="test"></a>
<!-- 其他标签配合id属性 -->
<h2 id="test">我是一个位置</h2>

<!-- 跳转到test锚点-->
<a href="#test">去test锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>

唤起指定应用

html

<!-- 唤起设备拨号 -->
<a href="tel:10000">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10000@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10000">短信联系</a>

块级、行内、行内块元素

块级元素display: block：独占一行
- 块级元素宽度默认撑满父元素，默认高度由内容撑开，可以设置宽高
html、body
h1~h6、hr、p、pre、div
ul、ol、li、dl、dt、dd
table、tbody、thead、tfoot、tr、caption
form、option
行内元素display: inline：不独占一行，行内元素中只能写行内元素
- 宽、高默认由内容撑开，无法设置宽高以及 margin、padding 垂直方向值
文本标签：br、em、strong、sub、sup、del、ins、span
<a>与<label>
行内块元素display: inline-block：
图片元素：img
单元格：td、th
表单控件：input、textarea、select、button
框架标签：iframe

行内块幽灵空白问题：行内块元素与文本的基线对齐，文本的基线与最底端有一定的距离。

原因主要是把回车解析成了空格

解决方法：

将上一个元素的闭合标签与下一个元素的开始标签写在同一行，或者注释掉中间的回车换行

html

<ul>
    <li>one</li  
    ><li>two</li  
    ><li>three</li>
</ul>
<!-- or -->
<ul>
    <li>one</li><!--  
    --><li>two</li><!--  
    --><li>three</li>
</ul>

vertical-align不为baseline
改图片为块元素：display：block
给元素加浮动，变成浮动元素
给父元素设置font-size: 0;子元素字体大小单独设置

HTML特殊字符

特殊字符	描述	字符代码
	空格符	&nbsp；
<	小于号	&lt；
>	大于号	&gt；
&	和号	&amp；
￥	人民币	&yen；
©	版权	&copy；
®	注册商标	&reg；
™	商标	&trade；
x	乘号	&times；
÷	除号	&divide；

表格标签

表格主要用来展示数据

表格基本语法：

html

<table>
  <!-- 表格标题 -->
  <caption>Monthly savings</caption>
  <!-- 表格头 -->
  <thead>
    <!-- 行 -->
    <tr>
      <!-- 单元格，头部中用th -->
      <th></th>
    </tr>
  </thead>
  <!-- 表格主体 -->
  <tbody>
    <tr>
      <!-- 单元格，表格主体用td -->
      <td></td>
    </tr>
  </tbody>
  <!-- 表格注脚 -->
  <tfoot>
    <tr>
      <!-- 单元格，表格注脚也用td -->
      <td></td>
    </tr>
  </tfoot>
</table>

常用标签属性：

标签名	标签语义	常用属性	单/双标签
table	表格	width：设置表格宽度 height：设置表格最小高度，表格最终高度可能比设置的值大 border：设置表格边框宽度 cellspacing：设置单元格之间的间距	双
thead	表格头部	height：设置表格头部高度 align：设置单元格的水平对齐方式 valign：设置单元格的垂直对齐方式	双
tbody	表格主体	常用属性与thead相同	双
tr	行	常用属性与thead相同	双
tfoot	表格脚注	常用属性与thead相同	双
td	普通单元格	width：设置单元格的宽度，同列所有单元格全都受影响 heigth：设置单元格的高度，同行所有单元格全都受影响 align：设置单元格的水平对齐方式 valign：设置单元格的垂直对齐方式 rowspan：指定要跨的行数 colspan：指定要跨的列数	双
th	表头单元格	常用属性与td相同	双

表格属性：

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

合并单元格：rowspan：行合并、colspan：列合并

html

<table border="1" width="800" height="200" rules="all" align="center">
  <caption>Monthly savings</caption>
  <tr>
    <td></td>
    <td></td>
    <!-- 跨行合并 -->
    <td rowspan="3"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <!-- <td></td> -->
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <!-- <td></td> -->
    <td></td>
  </tr>
  <tr>
    <td></td>
    <!-- 跨列合并 -->
    <td colspan="3"></td>
    <!-- <td></td>
      <td></td> -->
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

列表标签

无序列表：<ul> <li>

html

<ul>
  <li>Milk</li>
  <li>
    Cheese
    <ul>
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>

有序列表：<ol> <li>

html

<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

自定义列表：<dl> <dt> <dd>
- 其中dl标签里面只允许包含dt/dd标签
- dt/dd标签里面可以嵌套任意内容(标签)
- dt/dd是兄弟关系

html

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

表单标签

组成：表单域、表单控件、提示信息

form常用属性：

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

常用表单控件

给表单控件的标签设置disabled即可禁用表单控件；placeholder可以给文本框设置默认占位符

文本输入框

html

<input type="text">

常用属性：

name属性：数据的名称
value属性：输入框的默认输入值
maxlength属性：输入框最大可输入长度

密码输入框

html

<input type="password">

常用属性：

name属性：数据的名称
value属性：输入框的默认输入值（密码输入框一般无默认值）
maxlength属性：输入框最大可输入长度

单选框

html

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性：

name属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致
value属性：提交的数据值
checked属性：让该单选按钮默认选中

复选框

html

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性：

name属性：数据的名称
value属性：提交的数据值
checked属性：让该单选按钮默认选中

提交按钮

html

<input type="submit" value="点我提交表单">
<button>点我提交表单</button>

注意：

button 标签 type 属性的默认值是 submit，且不要指定 name 属性
input 按钮，使用 value 属性指定按钮文字

重置按钮

html

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

注意：

button 不要指定 name 属性
input 按钮，使用 value 属性指定按钮文字

普通按钮

html

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交

文本域

html

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

常用属性：

rows属性：指定默认显示的行数，会影响文本域的高度
cols属性：指定默认显示的列数，会影响文本域的宽度
无 type 属性。其他属性与普通文本输入框一致

下拉框

html

<select name="from">
  <option value="黑">黑龙江</option>
  <option value="辽">辽宁</option>
  <option value="吉">吉林</option>
  <option value="粤" selected>广东</option>
</select>

常用属性：

name属性：指定数据的名称
option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值
selected属性表示默认选中

label标签

label标签可与表单控件相关联，关联后点击文字，控件会获取焦点

法一：让label标签的for属性等于表单控件的id
法二：把表单控件套在label里面

示例如下：

html

<!-- 在label标签的for属性中设置对应的id属性值 -->
<label for="male">男</label>
<input type="radio" name="sex" id="male">
<label for="female">女</label>
<input type="radio" name="sex" id="female">
<!-- 直接使用label标签把内容（如：文本）和表单标签一起包裹起来 -->
<label>文本框:<input type="text"></label>

表单总结

标签名	标签语义	常用属性
form	表单	action：表单要提交的地址 target：要跳转的新地址打开位置。值_self、_blank method：请求方式。值get、post
input	多种形式的表单控件	type：指定表单控件的类型。值： text、password、radio等 name：指定数据名称 value：对于输入框：指定默认输入的值；对于单选和复选框：实际提交的数据；对于按钮：显示按钮文字 disabled：设置表单控件不可用 maxlength：用于输入框，设置最大可输入长度 checked：用于单选按钮和复选框，默认选中
textarea	文本域	name：指定数据名称 rows：指定默认显示的行数，影响文本域的高度 cols：指定默认显示的列数，影响文本域的宽度 disabled：设置表单控件不可用。
select	下拉框	name：指定数据名称 disabled：设置整个下拉框不可用
option	下拉框的选项	disabled：设置拉下选项不可用 value：该选项事件提交的数据(不指定value，会把标签中的内容作为提交数据) selected：默认选中
button	按钮	disabled属性：设置按钮不可用。type属性：设置按钮的类型，值：submit(默认)、 reset、button
label	与表单控件做关联	for属性：值与要关联的表单控件的ID值相同。

框架标签

标签名	功能和语义	属性	单/双标签
iframe	框架，在网页中嵌入其他文件	name：框架名，与target属性配合 width：框架宽度 height：框架高度 frameborder：是否显示边框（0或1）	双

iframe 标签实际应用：
在网页中嵌入广告
与超链接或表单的 target 配合，展示不同的内容

HTML5新特性

布局标签

标签名	语义	单/双标签
header	整个页面，或部分区域的头部	双
footer	整个页面，或部分区域的底部	双
nav	导航	双
article	文章、帖子、杂志、新闻、博客、评论等。	双
section	页面中的某段文字，或文章中的某段文字(里面文字通常里面会包含标题)。	双
aside	侧边栏	双
main	文档的主要内容	双
hgroup	包裹连续的标题，如文章主标题、副标题的组合(W3C将其删除)	双

关于 article 和 section ：
artical 里面可以有多个 section
section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section元素
article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用 article 元素

音频标签

<audio></audio>：用于定义音频

属性	值	描述
src	URL地址	音频地址
controls		向用户显示音频控件（如播放/暂停按钮）
autoplay		音频自动播放
muted		音频静音
loop		循环播放
preload	auto/metadata/none	音频预加载，如果使用 autoplay 则忽略该属性 none：不预加载音频 metadata：仅预先获取音频的元数据(例如长度) auto：可以下载整个音频文件

视频标签

<video></video>：用于定义视频

属性	值	描述
src	URL地址	视频地址
poster	URL地址	视频封面
width	像素值	设置视频播放器的宽度
height	像素值	设置视频播放器的高度
controls		向用户显示视频控件（如播放/暂停按钮）
autoplay		视频自动播放（谷歌需要muted属性才可以实现自动播放）
muted		视频静音
loop		循环播放
preload	auto/metadata/none	视频预加载，如果使用 autoplay 则忽略该属性 none：不预加载视频 metadata：仅预先获取视频的元数据(例如长度) auto：可以下载整个视频文件

表单新属性

属性名	功能
placeholder	提示文字，类似占位符
required	表示该输入项必填，适用于除按钮外其他表单控件
autofocus	自动获取焦点，适用于所有表单控件
autocomplete	自动完成，可以设置为 on 或 off，适用于文字输入类的表单控件注意：密码输入框、多行输入框不可用
pattern	填写正则表达式，适用于文本输入类表单控件注意：多行输入不可用，且空的输入框不会验证，往往与required配合

前端html ​

HTML语言设置 ​

路径分类 ​

HTML基本结构 ​

标准流 ​

HTML常用标签 ​

语义化标签 ​

排版标签 ​

文本标签 ​

图片标签 ​

超链接标签 ​

块级、行内、行内块元素 ​

HTML特殊字符 ​

表格标签 ​

列表标签 ​

表单标签 ​

常用表单控件 ​

文本输入框 ​

密码输入框 ​

单选框 ​

复选框 ​

提交按钮 ​

重置按钮 ​

普通按钮 ​

文本域 ​

下拉框 ​

label标签 ​

表单总结 ​

框架标签 ​

HTML5新特性 ​

布局标签 ​

音频标签 ​

视频标签 ​

表单新属性 ​

前端html

HTML语言设置

路径分类

HTML基本结构

标准流

HTML常用标签

语义化标签

排版标签

文本标签

图片标签

超链接标签

块级、行内、行内块元素

HTML特殊字符

表格标签

列表标签

表单标签

常用表单控件

文本输入框

密码输入框

单选框

复选框

提交按钮

重置按钮

普通按钮

文本域

下拉框

label标签

表单总结

框架标签

HTML5新特性

布局标签

音频标签

视频标签

表单新属性