导图社区 HTML与HTML5常用标签
比较基础的知识点的梳理,HTML与HTML5常用标签,希望对您有用,如果有错误,请您指出
编辑于2020-06-27 16:31:01HTML与HTML5常用标签
HTML(HyperText Mark-up Language)简介
是什么
超文本
(超链接)
标记
(标签——>制作网页)
.html/.htm
版本发展历史
文档类型的设定
<!Doctype >
HTML
XHTML
HTML5
HTML基础语法
基本结构( <html>...</html> )
head(网页的信息(HEAD头部设置))
作用于网页头部内容,不会再正文中显示出来,对当前页面的各种设置
子标签
<title>
<base>
(定义页⾯链接标签的默认链接地址)
<link>
(外部资源)
<meta>
编码
<meta charset="utf-8"/>
关键字
<meta name="Keywords" content=""/>
描述
<meta name="Description" content=""/>
<script>
<style>
body(网页具体的内容)
文本标签
<hn>...</hn>
其中n为1--6的值
标题标签
加粗
独⽴⾏
<i>...</i>
斜体
<em>...</em>
强调斜体
<b>...</b>
加粗
<strong>...</strong>
强调加粗
<cite></cite>)
作品的标题
<sub>...</sub>
下标
<sup>...</sup>
上标
<del>...</del>
删除线
字符实体
格式化标签
<br/>
换⾏
<p>...</p>
换段
<hr/>
水平分割线
列表
<ul>...</ul>
无序
<ol>...</ol>
有序
<li>...</li>
列表项
<dl>...</dl>自定义列表
<dt>...</dt>自定义列表头
<dd>...</dd>自定义列表内容
<div>...</div>
组合块级元素
图像标签
<img />
src
图片名及url地址
alt
图片加载失败时的提示信息
title
⽂字提示属性
width
图⽚片宽度
height
图⽚片⾼高度
border
边框线粗细
路径
"/"
Web应⽤的根目录
"./"
当前目录
"../"
上级目录
超链接标签
<a href="链接目标url地址">显示⽂文字</a>
href: 必须,指的是链接跳转地址
target: 表示链接的打开⽅方式
_blank 新窗口
_parent ⽗窗口
_self 本窗口(默认)
_top 顶级窗口
framename 窗口名
title:文字提示属性(详情)
锚点链接
定义⼀一个锚点: <a id="a1"></a>
使⽤用锚点: <a href="#a1">跳到a1处</a>
表格标签
<table>
定义表格
<caption>
定义表格标题
<tr>
定义表格的行
<th>
定义表格的表头
<td>
定义表格单元格
<thead>
定义表格的页眉
<tbody>
定义表格的主体
<tfoot>
定义表格的页脚
表单标签(<form>...</form>)
action属性
提交的目标地址(URL)
method属性
提交方式
get(默认)
URL地址栏可见
长度受限制(IE2k 火狐8k)
相对不安全
post
URL地址不可见
长度不受限制
相对安全
enctype
提交类型
target
在何处打开⽬目标 URL
name
属性为表单起个名字(在HTML5中使⽤用 id 代替)
<input type="text" name="username">
type属性
表示表单项的类型
text
单行文本框
password
密码输入框
checkbox
多选框 注意要提供value值
radio
单选框 注意要提供value值
file
文件上传选择框
button
普通按钮
submit
提交按钮
image
图片提交按钮
reset
重置按钮, 还原到开始(第一次打开时)的效果
hidden
主表单隐藏域,要是和表单一块提交的信息,但是不需要⽤用户修改
e-mail 地址的输入域
url
包含 URL 地址的输入域
number
用于应该包含数值的输入域
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
value 规定默认值
range
⽤用于应该包含一定范围内数字值的输入域,显示为滑动条
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
value 规定默认值
Date pickers
日期选择器器
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
search
用于搜索域
比如站点搜索或 Google 搜索
color
颜色选择
name属性
表单项名
用于存储内容值的
value属性
输⼊的值(默认指定值)
placeholder
预期值的简短的提示信息
size属性
输⼊入框的宽度值
maxlength属性
输入框的输入内容的最大长度
readonly属性
对输入框只读属性
disabled属性
禁用属性
checked属性
对选择框指定默认选项
accesskey属性
指定快捷键(不常用) (IE:alt+键 火狐:alt+shift+键)
tabindex属性: 通过数字指定tab键的切换顺序(不常用)
<select>...</select>
标签创建下拉列列表
name属性
定义名称,⽤用于存储下拉值的
size
定义菜单中可见项⽬目的数目,html5不支持
disabled
当该属性为 true 时,会禁用该菜单。
multiple
多选
<option>... </option>
下拉选择项标签
用于嵌入到<select>标签中使用的
value属性
下拉项的值
selected属性
默认下拉指定项
<textarea>...</textarea>
多行的文本输入区域
name
定义名称
用于存储文本区域中的值
cols
规定文本区内可见的列数。
rows
规定文本区内可见的行数。
disabled
是否禁用
readonly
只读
<button>...</button>
标签定义按钮
在 button 元素中放置内容
fieldset>
将表单内的相关元素分组
disabled属性
定义 fieldset 是否可见
form属性
定义该 fieldset 所属的⼀一个或多个表单
<legend></legend>
为 <fieldset> 、<figure> 以及 <details> 元素定义标题
<optgroup>
允许您组合选项
<datalist>
定义可选数据的列表
框架标签
<iframe src="1.html" name="myframe" width="700" height="500"></iframe>
src
规定在 iframe 中显示的文档的 URL
frameborder
规定是否显示框架周围的边框
标签
双标签
(<标签名>....</标签名>)
单标签
(<标签名/>)
属性
(<标签名 属性名="值">....</标签名>)
规范
标签名小写
属性名的值有双引号
标签要闭合
注释
<!-- -->
HTML5
新增布局标签
header 定义文档的页眉
nav 定义导航链接部分
footer 定义文档或者节的页脚/底部
article 定义文章
section 定义文档中的节(section/段落)
aside 定义其所处内容之外的内容/侧边
datalist 定义选项列列表,与input 配合使⽤用该标签,两者通过id关联
fieldset 可将表单内的相关元素打包/分组, 与legend 搭配使⽤用
新增的input type属性值
多媒体标签
<audio src="./images/beidahuang.mp3" controls="controls"></audio>