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 设置表单项自动获取焦点
其他标签查询文档