【HTML】HTML5从入门到深入（复习查漏向
冷知识
万维网之始：第一个网站·蒂姆伯纳斯-李
HTML5
html5文档类型声明:
头部： <!doctype html>字符集(charset)：编码与解码采用的规则
UTF-8：万国码
<head>
<meta charset="UTF-8"> <!-- gb2322 -->
</head>常用html实体
显示结果
描述
实体名称
空格
<
小于号
<
>
大于号
>
&
和号
&
"
引号
"
'
撇号
' (IE不支持)
￠
分（cent）
¢
£
镑（pound）
£
¥
元（yen）
¥
€
欧元（euro）
€
§
小节
§
版权（copyright）
©
注册商标
®
商标
™
×
乘号
×
÷
除号
÷
重要标签
️HTML决定网页结构，因此多注意标签意义，而不是决定大小形态颜色等属性
<meta> 元标签
属性Attribute
用法Usage
例Exaples
name - content
一起使用设置网站元数据
<meta name="keywords" content="xx,yy">、<meta name="description" content="xx.com-zz"> 为百度等搜索引擎提供关键字key以及描述description
charset
定义网站字符编码形式
utf-8、gb2322
http-equiv
容纳一些特殊 HTTP headers
<meta http-equiv="refresh" content="2;url=https://www.baidu.com"> 2秒后跳转指定url
块元素包裹行内元素，块元素默认上下换行
布局标签-结构化语义标签
标签名
语义
header
网页头部
footer
网页底部
main
网页主体
nav
网页导航
aside
网页侧边栏
article
文章
section
独立区块
div
块（主要使用
span
同div（行内元素，其他是块元素
列表
标签（均为块元素
语义
ul
无序列表
ol
有序列表
li
列表项
dl
定义列表
dd
dl解释说明
dt
dl内容
超链接-<a>
Attribute
语义
href
链接url
target
链接显示窗口（如默认本窗口 _blank => 新窗口
href="#id"
id：标签唯一标识，重复则第一个生效
--
跳转到当前页面指定id位置
href="javascript:;"
占位
图片元素-<img>
自结束标签
属性Attribute
语义
src
≈href
alt
图片获取失败会默认显示
图片形式：gif、png、jpg、
webp、base64<img src="data:image/jpeg;base64,···">
内联框架-<iframe>
属性Attribute
语义
src
≈href
width-height
定义长宽
frameborder
定义边框厚度
音视频
<audio src="your music" controls autoplay loop></audio>
<audio controls autoplay loop>
<source src="···" type="···">
<embed src="···" ··· width ···>
</audio>
<video controls autoplay loop>
<source src="···" type="···">
<embed src="···" ··· width ···>
</video>
// controls 用户可控
// autoplay 自动播放
// loop 循环播放table
<table border="1" width='50%' align="center">
<!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用th表示表头
<th>B1</th>
<th>C1</th>
<th>D1</th>
</tr>
<tr>
<!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格
<!-- rowspan 纵向的合并单元格 -->
<td rowspan="2">B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<!--
colspan 横向的合并单元格
-->
<td colspan="2">C4</td>
</tr>
</table>结构固定-长表格
<table border="1" width='50%' align="center">
<!--
可以将一个表格分成三个部分：
头部 thead
主体 tbody
底部 tfoot
这三部分页面显示位置固定，论出现在html中位置如何
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>form
<!-- action 表单要提交的服务器的地址 -->
<form action="target.html">
文本框 <input type="text" name="username">
<br><br>
密码框 <input type="password" name="password">
<br><br>
<!-- 当选按钮选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中 -->
单选按钮 <input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br><br>
多选框 <input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<br><br>
<!-- 下拉列表 -->
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<br><br>
<!-- 提交按钮 -->
<input type="submit" value="注册">
<!-- <input type="file" accept="">-->
<!-- <input type="image" >-->
//button按钮无效果，需要其他效果需要自行设置
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
//常用属性
autocomplete="off" 关闭自动补全
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点其他标签查询文档
手机扫一扫
移动阅读更方便
你可能感兴趣的文章