HTML 主要标签简介 超文本标记语言 图片 表格 音视频 表单组件
标题 h1~h6
一级标题
二级标题
段落...
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>段落...</p>
列表
有序列表
- first
- second
<ol>
<li>first</li>
<li>second</li>
</ol>
无序列表
- 西瓜
- 葡萄
<ul>
<li>西瓜</li>
<li>葡萄</li>
</ul>
描述列表
- 导演：
- SKPrimin
- 主演：
- SK1
- SK2
- 上映日期：
- 2022-2-20
<dl>
<dt>导演：</dt>
<dd>SKPrimin</dd>
<dt>主演：</dt>
<dd>SK1</dd>
<dd>SK2</dd>
<dt>上映日期：</dt>
<dd>2022-2-20</dd>
</dl>
链接
原有页面打开：百度
新窗口打开：
百度
原有页面打开：<a href="https://www.baidu.com/">百度</a>
新窗口打开：<a href="https://www.baidu.com/" target="_blank">百度</a>
多媒体
图片
<img src="https://img2020.cnblogs.com/blog/2661728/202201/2661728-20220118155813461-370483822.jpg" alt="月亮" width="400" />
图片未加载出来时显示 alt（替换）文本内容
音频
<audio src="assert\艾辰——【错位时空】.mp3" controls></audio>
视频
<video src="assert\A艾辰——【错位时空】.mp4" controls></video>
输入
输入框：
滑动选择：
数字输入框：
日期：
文本域：
输入框：
<input placeholder="请输入用户名"/>
滑动选择：
<input type="range"/>
数字输入框：
<input type="number" min="1" max="10"/>
日期：
<input type="date" min="2018- -02-10">
文本域：
<textarea rea>Hey</textarea>
选择
多选：
单选： （通过name相同实现互斥）
下拉选择框:
输入时提示：
<p>
多选：
<label><input type="checkbox" />苹果</label>
<label><input type="checkbox" checked/>梨</label>
</p>
<p>
单选：
<label><input type="radio" name="sport" />
</label>
<label><input type="radio" name="sport" />
</label>
（通过name相同实现互斥）
</p>
<p>
下拉选择框:
<select>
<option>A</option>
<option>C</option>
<option>D</option>
</select>
</p>
<p>
输入时提示：
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
</p>
文本标签
在第一章, 我们讲过字符串是
不可变量
。
const声明创建-一个只读的常量。
const add=(a,b)=>a+b;
const multiply = (a, b)=> a * b;
在投资之前，要做风险评估 。
Cats are cute animals.
<p>在<cite>第一章</cite>, 我们讲过<q>字符串是
不可变量</q>。</p>
<p><code>const</code>声明创建-一个只读的常量。
</p>
<pre><code >
const add=(a,b)=>a+b;
const multiply = (a, b)=> a * b;
</code></pre>
<p> 在投资之前，<strong>要做风险评估
</strong>。</p>
<p>Cats <em>are</em> cute animals.</p>
内容划分
- 头部：header
- nav
- 主体内容：main 侧边栏
- article aside
- article
- 底部：footer
| header | |||
| nav | |||
| main | aside | ||
| article | |||
| article | |||
| footer | |||
语义化是什么?
- HTML 中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写 HTML
- 有序列表用 ol;无序列表用 ul
- lang 属性表示内容所使用的语言
谁在使用我们写的 HTML
- 开发者-修改、维护页面，
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化?
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
