基本标签
标签 | 描述 |
---|
!DOCTYPE | 文档类型 |
html | html文档 |
head | 文档信息 |
title | 网页标题 |
body | 主体部分 |
meta | 文档元信息 |
HTML 文档的基本组成部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>拾柒的博客</title>
</head>
<body>
</body>
</html>
meta
设置屏幕缩放
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
网页关键词(SEO)
<meta name="keywords" content="博客“/>
网页内容描述(SEO)
<meta name="description" content="拾柒的博客"/>
网页作者
<meta name="author"content="拾柒"/>
定义文档的字符编码
<meta charset="utf-8">
指定网页缓存时间的期限,一旦网页缓存时间过期,网页就必须从服务器上重新缓存一次。 时间必须为GMT时间,即按照"星期 日 月 年 时间 GNT"的格式
<meta http-equiv="expires"content="Wed, 20 Jun 2022 23:59:59 GMT">
禁止浏览器从本地计算机的缓存中访问页面内容
<meta http-equiv="Pragma"content="no-cache">
自动刷新并指向新页面。下例为每60秒自动刷新到新页面
<meta http-equiv="Refresh"content="60;URL=https://www.freenode.cn">
网页过期,那么存盘的cookie将被删除
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Wed, 20 Jun 2022 23:59:59 GMT;path=/">
页面标签
标签 | 描述 |
---|
div | 块级元素 |
main | 文档主要区域 |
footer | 文档页脚区域 |
article | 文章区域 |
header | 文档的头部区域 |
nav | 文档导航区域 |
h1~h6 | 文档标题 |
section | 区块 |
aside | 侧边栏 |
基本页面结构
<div>
<header>
<nav>
导航
</nav>
</header>
<main>
<article>
<section><h2>内容</h2></section>
</article>
<aside>分类</aside>
</main>
<footer>基本信息</footer>
</div>
文本
标签 | 描述 |
---|
p | 块级文本 |
span | 行内文本 |
pre | 保留空白和换行 |
br | 换行 |
time | 时间 |
small | 描述 |
abbr | 缩写 |
sub | 下标 |
sup | 上标 |
del | 删除线 |
s | 删除线 |
code | 代码 |
progress | 进度 |
strong | 粗体 |
em | 斜体 |
mark | 突出 |
cite | 引用 |
blockquote | 块引用 |
q | 行内引用 |
address | 地址 |
表单
标签 | 描述 |
---|
form | 文档表单 |
fieldset | 表单中元素的边框 |
legend | fieldset元素的标题 |
label | input元素的标注 |
input | 输入框 |
textarea | 多行文本输入框 |
select | 选择器 |
option | 选择列表中的选项 |
optgroup | 选择列表相关选项的组合 |
datalist | 定义选择列表。为input框可能的值 |
from
属性 | 描述 |
---|
action | 后台地址 |
method | 提交方式GET 或 POST |
<form action="xxx.php" method="GET">
<fieldset>
<legend>拾柒</legend>
<input type="text" />
</fieldset>
</form>
input
属性 | 描述 |
---|
type | 表单类型默认为text |
name | 名称 |
required | 是否必填 |
placeholder | 提示文本内容 |
value | 默认值 |
maxlength | 允许最大输入字符数 |
size | 表单显示长度 |
disabled | 是否禁止使用 |
readonly | 是否只读 |
capture | 使用麦克风、视频或摄像头方式获取上传的文件,值有microphone, video, camera |
accept | 可接受的文件格式,type为file时可用 |
pattern | 文本校验 |
checked | 是否被选中 |
min | 最小可选择时间,type为时间类型时可用 |
max | 最大可选择时间,type为时间类型时可用 |
step | 间隔,date 缺省是1天,week缺省是1周,month缺省是1月 |
autocomplete | 是否显示之前输入过的键 |
和label结合
点击label自动聚焦到input框上
<form>
<label for="title">账号:</label>
<input type="text" id="title" />
</form>
type类型描述
类型 | 描述 |
---|
email | 邮箱 |
url | URL 地址 |
password | 密码 |
tel | 电话号码 |
search | 搜索框 |
file | 文件 |
hidden | 隐藏表单 |
submit | 提交表单 |
radio | 单选框 |
checkbox | 复选框 |
date | 日期 |
week | 周 |
month | 月 |
file
<input type="file" multiple="multiple" accept="image/png,image/gif">
调取摄像头
当 input 类型为 file 时手机会让用户选择图片或者拍照,如果想直接调取摄像头使用以下代码
<input type="file" capture="camera" accept="image/*" />
radio
<form>
<input type="radio" value="boy" id="boy" />
<label for="boy">男</label>
<input type="radio"value="girl" id="girl" checked />
<label for="girl">女</label>
</form>
checkbox
<form>
<input type="checkbox" value="boy" id="boy" />
<label for="boy">男</label>
<input type="checkbox" value="girl" id="girl" checked />
<label for="girl">女</label>
</form>
date
<input type="date" step="1" min="2022-01-01" max="2022-02-01">
search
<input type="search" autocomplete="on" />
pattern
属性 | 描述 |
---|
pattern | 正则表达式验证规则 |
oninvalid | 输入错误时触发的事件 |
<script>
function validate() {
alert('输入区间有误');
}
</script>
<form>
<input
type="text"
name="username"
pattern="[A-z]"
oninvalid="validate()"
/>
<button>提交</button>
</form>
textarea
select
选项 | 说明 |
---|
multiple | 是否支持多选 |
size | 列表框高度 |
selected | 选中状态 |
<form>
<select>
<option>语言</option>
<optgroup label="前端">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JAVASCRIPT">JAVASCRIPT</option>
</optgroup>
<optgroup label="后端">
<option value="JAVA">JAVA</option>
<option value="PHP">PHP</option>
<option value="GO">GO</option>
</optgroup>
</select>
</form>
datalist
<form>
<input type="text" list="article" />
<datalist id="article">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JAVASCRIPT">JAVASCRIPT</option>
</datalist>
</form>
列表标签
有序列表
选项 | 说明 |
---|
ol | 有序列表 |
ul | 无序列表 |
li | 列表内容 |
dl | 描述列表 |
dt | 描述列表标题 |
dd | 描述列表内容 |
<dl>
<dt>前端</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dt>后端</dt>
<dd>JAVA</dd>
<dd>PHP</dd>
</dl>
链接
选项 | 说明 |
---|
href | 跳转地址 |
target | _blank 新窗口打开 _self 当前窗口打开 |
title | 链接提示文本 |
<a href="https://freenode.cn" target="_blank" title="拾柒">拾柒</a>
图片
属性 | 说明 |
---|
src | 图片地址 |
alt | 图像打开异常时的替代文本 |
<img src="freenode.png" alt="拾柒"/>
表格
标签 | 描述 |
---|
| 表格 |
caption | 表格标题 |
thead | 表头部分 |
tbody | 表格主体部分 |
tfoot | 表格尾部 |
<table border="1">
<caption>
标题
</caption>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格</td>
<td>表格</td>
</tr>
</tbody>
</table>
表格属性
属性 | 描述 |
---|
border | 边框粗细 |
colspan | 单元格列合并 |
rowspan | 单元格行合并 |
<table border="1">
<caption>
标题
</caption>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">表格</td>
<td>表格</td>
</tr>
<tr>
<td rowspan="2">表格</td>
<td>表格</td>
<td>表格</td>
</tr>
<tr>
<td>表格</td>
<td>表格</td>
</tr>
</tbody>
</table>
视频
属性 | 描述 |
---|
autoplay | 视频在就绪后马上播放(需要指定类型如 type=“video/mp4”) |
preload | 视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 如果视频观看度低可以设置为 preload="none"不加载视频数据减少带宽。 如果设置为 preload=metadata值将加载视频尺寸或关键针数据,目的也是减少带宽占用。 设置为preload=“auto” 时表示将自动加载视频数据 |
controls | 显示控件,比如播放按钮 |
height | 设置视频播放器的高度 |
width | 设置视频播放器的宽度 |
loop | 完成播放后再次开始播放 |
muted | 静音 |
poster | 点击播放前显示的图像 |
src | 要播放的视频的 URL |
<video
src="freenode.mp4"
autoplay="autoplay"
loop
muted
controls
width="500"
height="300"
>
<source src="freenode.mp4" type="video/mp4" />
<source src="freenode.webm" type="video/webm" />
</video>
声音
属性 | 描述 |
---|
autoplay | 音频在就绪后马上播放 |
preload | 音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 如果音频观看度低可以设置为 preload="none" 不加载音频数据减少带宽。 如果设置为 preload="metadata" 值将加载音频尺寸或关键针数据,目的也是减少带宽占用。 设置为preload="auto" 时表示将自动加载音频数据 |
controls | 显示控件,比如播放按钮 |
loop | 完成播放后再次开始播放 |
muted | 静音 |
src | 要播放的音频URL |
<audio controls autoplay loop preload="auto">
<source src="freenode.ogg" type="audio/ogg" />
<source src="freenode.mp3" type="audio/mp3" />
</audio>