QX-AI
GPT-4
QX-AI初始化中...
暂无预设简介，请点击下方生成AI简介按钮。
介绍自己
生成预设简介
推荐相关文章
生成AI简介

HTML {#HTML}

一个最基本的H5骨架长这样：

|------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content="123" /> <meta name="Description" content="123456" /> <title>Document</title> </head> <body> </body> </html> |

标准的div+css页面，只会用到种类很少的标签：div、p、h1、span、a、img、ul、ol、dl、input、i等

头标签head {#头标签head}

head标签表示的是页面的配置，有字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等

文档声明头： <!DOCTYPE html>，DocType Declaration，简称DTD,DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
页面语言lang： <html lang="en">，指定页面的语言类型，en、zh-CN。
**meta标签：**提供相关页面的元信息（meta-information）

|------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |  <title>轻笑Chuckle</title>  <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta name="Keywords" content="轻笑,Chuckle" />  <meta name="Description" content="漫天倾尘,风中轻笑" />  <meta name="Author" content="轻笑Chuckle">  <meta http-equiv="refresh" content="3;http://www.baidu.com">  <base href="/"> |

body标签 {#body标签}

div、section、article、aside、header、footer
p
span、em、strong
表格元素：table、thead、tbody、tr、td
列表元素：ul、ol、dl、dt、dd
a
表单元素：form、input、select、textarea、button

HTML标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

排版标签 {#排版标签}

<h1>标题使用<h1>至<h6>标签定义,有align属性(对齐方式)：left、center、right。
<p>段落标签，单独成段，分割网页。有align属性。
<hr/>水平分割线线标签。
<br/>
<div>可以把标签中的内容分割为独立的区块。必须单独占据一行,DIV+CSS来实现各种样式,div标签负责布局、结构、分块，css负责样式
<span>和div的作用一致，但不换行
<center>让元素居中，H5中不使用
<pre>预格式化，让文本不空格和空行，几乎用不着

字体标签 {#字体标签}

特殊字符（转义字符），需要时百度， 空格,<小于号<,>大于号>，等
<u>下划线,<s>或<del>中划线,<i>或<em>斜体
弃用: <b> <strong>粗体，<font>字体标签
<sup>上标，<sub>下标

超链接a {#超链接a}

一个文本级标签

外部链接:<a href="02页面.html">点击进入另外一个文件</a>href超文本地址
锚链接:

|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 |   <a name="a1" id="a1">a1点</a>  <a href="#a1">去a1点</a>  <a href="a.html#a1">去a1</a> |

通常p包裹a
超链接的属性
href ：目标URL
title ：悬停文本。
name ：主要用于设置一个锚点的名称。
target ：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
_self ：在同一个网页中显示（默认值）
_blank ：在新的窗口中打开。
_top：在顶级窗口中显示

图片标签 {#图片标签}

<img src="图片的URL" />src中写图片路径

标签属性：

width 、height
在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比
可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行等比缩放
alt：当图片无法显示时，代替图片的文本
title：鼠标悬停时出现的文本
align属性，默认bottom

相对路径 {#相对路径}

|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 |  <img src="img.jpg"> <img src="./img.jpg">  <img src="../img.jpg">  |

绝对路径 {#绝对路径}

<img src="C:\img.jpg">C盘图片
<img src="http://img.baidu.com/head.png">网络路径

列表标签 {#列表标签}

无序列表<ul>,type="属性值";disc(实心原点，默认)，square(实心方点)，circle(空心圆)
有序列表<ol>,type="属性值";1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始
<ul>、<ol>里放<li>,li是容器级
定义列表<al>,没有属性,子元素<dt>、<dd>

从语义上来说，dt表示名称，dd表示对其的描述，dt、dd都是容器级标签，想放什么都可以。用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。

表格标签table {#表格标签table}

网页中表格由每行<tr>组成，每一行由一个个单元格<td>组成
<th>加粗的单元格。相当于<td> + <b>
一个表格

|---------------------------|-----------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 | <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> |

table的属性

border 边框
**style="border-collapse:collapse;"**单元格的线和表格的边框线合并（表格的两边框合并为一条）
width 、height
bordercolor 表格的边框颜色
align 表格的水平对齐方式left right center，注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
cellpadding 单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor 背景颜色，background 背景图片。背景图片的优先级大于背景颜色。
bordercolorlight 表格的上、左边框，以及单元格的右、下边框的颜色,bordercolordark 表格的右、下边框，以及单元格的上、左的边框的颜色这两个属性的目的是为了设置3D的效果
dir 公有属性，单元格内容的排列方式，取值ltr左到右，rtl从右到左 tr的属性
dir 公有属性，单元格内容的排列方式，取值ltr左到右，rtl从右到左
bgcolor 设置这一行的单元格的背景色
height
align 一行的内容水平居中显示，取值：left、center、right
valign 一行的内容垂直居中，取值：top、middle、bottom tr的属性
bgcolor 单元格的背景色，background 设置这个单元格的背景（图片）
height 单元格的高度
width 绝对值或者相对值(%)
align 内容的横向对齐方式，取值：left right center
valign 内容的纵向对齐方式。取值：top middle bottom

单元格的合并 {#单元格的合并}

colspan：横向往右合并
rowspan：纵向往下合并

thead、tbody、tfoot {#thead、tbody、tfoot}

表格优先按照thead、tbody、tfoot的顺序依次来显示内容（三个标签无需同时存在），如果不写，表格按代码从上到下的顺序来显示
当表格非常大内容非常多的时候，用thead、tbody、tfoot标签，数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
tr和tbody同级，按代码从上到下的顺序来显示

*框架标签 {#框架标签}

框架标签用于在一个网页中显示多个页面（html）

<frameset>和<body>只能二选一。框架标签不能放在<body>标签里面，因为<body>标签代表的只是一个页面，而框架标签代表的是多个页面

框架的集合用<frameset>表示，然后在<frameset>集合里放入一个一个的框架<frame>

frameset和frame已经从 Web标准中删除，使用iframe代替

*frameset {#frameset}

<frameset> 框架的集合,一个框架的集合可以包含多个框架 或框架的集合 frameset的属性

rows 水平分割，将框架分为上下部分
cols 垂直分割，将框架分为左右部分。
写法有两种：

绝对值写法：rows/cols="200,*" *代表剩余的。包含了两个框架：一个占200个像素，另一个占剩下的部分。
相对值写法：rows/cols="30%,*" *代表剩余的。包含了两个框架：一个占30%，另一个占70%。

如果想将框架分成很多个，在属性值里用多个逗号隔开。

|-------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 | <frameset rows="20%,*"> <frame src="1.html"></frame> <frameset cols="30%,*"> <frame src="1.html"></frame> <frame src="1.html"></frame> </frameset> </frameset> |

*frame {#frame}

<frame>是<frameset>的子标签，一个框架显示一个页面。 frame的属性

scrolling="no" 是否要滚动条,默认值是true。
noresize 不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的,用了这个属性值，框架大小将固定。
bordercolor 框架边框颜色,仅IE生效
frameborder="0" 或**"1"** 隐藏或显示边框（框架线）。
name 框架名字，用于框架内的超链

内嵌框架 {#内嵌框架}

内嵌框架用<iframe>表示。<iframe>写在<body>中，在其中嵌入html页面 iframe的属性

src="" 嵌入html页面的路径
height ,width
scrolling="no" 是否需要滚动条。默认值是true。
name 名称

表单标签 {#表单标签}

表单标签用<form>表示，收集用户信息，用于与服务器的交互。
form的属性

name ，id 表单的名称，JS来操作或控制表单时使用
action 指定表单数据的处理程序
method 表单数据的提交方式，一般取值：get(默认)和post

input输入标签 {#input输入标签}

<input>是一个输入标签，用于接收用户输入或选择 input的属性

type="属性值" 文本类型
text 文本框，默认
password 密码框
radio 单选按钮
checkbox 多选按钮，name属性值相同的按钮作为一组进行选择，但id必须唯一。
hidden 隐藏框，在表单中包含不希望用户看见的信息
button 普通按钮，结合js代码进行使用。
submit 提交按钮，提交当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有"提交"文字，点击按钮后，整个表单就会被提交到form标签的action属性中指定的那个页面中去
reset 重置按钮，清空当前表单的内容，并设置为最初的默认值
image 图片按钮，和submit提交按钮的功能完全一致，图片按钮可以显示图片。
file 文件选择框，配合JS对文件进行限制和检查
checked 将单选按钮或多选按钮默认处于选中状态。当<input>标签设置为type="radio" 或者type=checkbox时，可用此属性
value="内容" 文本框里的默认内容（已经被填好了的）
size="50" 表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符
readonly 文本框只读
disabled 文本框只读

select下拉列表 {#select下拉列表}

<select>列表中每一选项为<option> select、option的属性
<select>的属性:

multiple 多选(ctrl加左键点击)
size="3" 属性值大于1，则列表为滚动视图，默认属性值为1，即下拉视图。

<option>的属性:

selected 预选中

textarea多行文本框 {#textarea多行文本框}

<textarea>不会省略空格和换行
textarea的属性

rows="4" 文本框行数
cols="20" 文本框列数
readonly 文本框只读

fieldset表单分组 {#fieldset表单分组}

<fieldset>子标签<legend>定义组的标题
fieldset的属性

disabled 表单仍然显示，但是禁用
form="另一个表单的id" 让此fieldset也属于该表单一部分
name fieldset的名称

label {#label}

label使其中文字内容与<input>绑定，点击文字也能选择选项等
fieldset的属性

for="[id]" label要绑定的input的id

HTML5 {#HTML5}

HTML5是新一代开发Web富客户端应用程序整体解决方案。包括：HTML5,CSS3，Javascript API在内的一套技术组合 。富客户端具有很强的交互性和体验。

新增的语义标签 {#新增的语义标签}

相较于使用class="header"给网页做语义化处理，HTML5本身提供了一些语义化的标签。强调了HTML的职责是描述一块内容是什么（或其意义）。

常见的HTML结构：

HTML5中这样写

HTML5语义标签

section 区块
article 表示主体内容，如文章
header 页眉
footer 页脚
nav 导航栏
aside 侧边栏
figure 媒介内容分组
mark 标记
progress 进度
time 日期

H5中的表单 {#H5中的表单}

HTML5表单中input新增的类型

email 只能输入email格式，自带格式验证
tel 手机号码
url 只能输入url格式
number 只能输入数字。
search 搜索框
range 滑动条
color 拾色器
time 时间
date 日期
datetime 时间日期
month 月份
week 星期

新表单标签 {#新表单标签}

<datalist> 数据列表,用于数据自动提示
<keygen> 用于验证用户，本质是密钥对生成器，当提交表单时，会生成两个键：一个公钥，一个私钥，私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

新表单属性 {#新表单属性}

新表单属性

placeholder 占位符（提示文字）
autofocus 自动获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成（填充的）on开启（默认）off取消。效果是会记住之前的提交，可以快速选择
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭默认的验证功能（只能加给form）
required 表示必填项
pattern 自定义正则，验证表单。

表单事件 {#表单事件}

oninput() 用户输入内容时触发，可用于输入字数统计。
oninvalid() 验证不通过时触发

audio音频标签 {#audio音频标签}

audio的属性

autoplay 自动播放
controls 控制条
loop 循环播放
preload 预加载，设置autoplay此属性失效

video视频标签 {#video视频标签}

audio的属性

autoplay 自动播放
controls 控制条
loop 循环播放
preload 预加载，设置autoplay此属性失效
width 、height

|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 | <video src="video/movie.mp4" controls autoplay ></video> <video controls autoplay> <source src="video/movie.mp4"/> <source src="video/movie.ogg"/> <source src="video/movie.webm"/> 抱歉，不支持此视频 </video> |