# html笔记 | 青训营笔记### 这是我参与「第五届青训营」伴学笔记创作活动的第 1 天 **小样例** ```

这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

小样例

<!doctype html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
    <body>
        <h1>一级标题</h1>l
        <p>段落内容</p>
    </body>
 </html>

HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如 input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如 required、readonly

列表

dl定义列表
dt描述列表的标题
dd是具体的值

<img src=""/ alt“图片不显示时替换的文字”>图片
<audio src="" controls默认显示浏览器播放空间></audio>
<video src=" "controls></video>
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="data" min="2018-02-10">
<textarea>文本域<textarea>

<input type="checkbox" checked默认选中 />复选框
单选框只能通过name相同的属性值进行控制

下拉选择

<selsct>
  <option>1<option>
  <option>2<option>
<select>

<input list="countries">//相比selsct可以输入并给出提示
<datalist id="countries">
 <option>1<option>
 <option>2<option>
</datalist>

引用

<blockquote cite="http://baidu.com">
 <p>   <p>
<blockquote>
<cite>第一种<cite> 作品的名字
<q><q> 作品的具体内容
<code>const<code>引用代码
<pre><code>  <code><pre> 多行引用代码
<strong><strong>含义比较重要加粗
<em><em>语气上的强调斜体

内容划分

语义化是什么?

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
有序列表用 ol;无序列表用 ul
lang 属性表示内容所使用的语言

谁在使用我们写的HTML

开发者- 修改、维护页面
浏览器- 展示页面
搜索引擎-提取关键词、排序
屏幕阅读器- 给盲人读页面内容

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

如何做到语义化?

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

# html笔记 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

这是我参与「第五届青训营」伴学笔记创作活动的第 1 天