这是我参与「第四届青训营 」笔记创作活动的的第1天
前端
前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。
前端关注的方面
- 功能
- 美观
- 无障碍
- 安全
- 性能
- 兼容性
- 用户对产品直观的感受
HTML学习笔记
HTML--超文本标记语言
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、readonly
元素
html <a href="http://www.baidu.com">百度</a>
元素 = 起始标记<> + 结束标记> + 元素内容 + (元素属性)
属性 = 属性名 + 属性值
属性分类： 局部属性：某些元素特有的属性 全局属性：所有元素通用
有些元素没有结束标记，叫 空元素 两种写法 <>
>
元素的嵌套：元素不能相互嵌套
父元素，子元素，祖先元素，后代元素，兄弟元素(拥有同一个父元素的两个元素)
标准的文档结构
html `<!DOCTYPE html>... // 文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5
```html
根元素，一个页面最多一个，并且该元素是所有其他元素的父元素或祖先元素
HTML5中没有强制要求书写
lang属性：language,全局元素，表示该元素内部使用的文字是哪一种自然语言书写而成的
...... // 文档头内部的内容不会显示到页面上 ```
html ...<meta>... // 文档的元数据：附加信息。
html ...<title>Document</title>... // 网页标题
html ...<body></body>... // 文档体，页面上所有要参与显示的元素，都应该放置到文档体中
语义化
什么是语义化
1.每一个HTNL元素都有具体含义
| a元素 | 超链接 | | --- | --- | | p元素 | 段落 |
2.所有元素与展示效果无关 元素展示到页面中的效果，应该由CSS决定
重要：选择什么元素，取决于内容的含义，而不是显示出的效果
开发者应该遵循语义来编写HTML
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
为什么需要语义化
1.为了搜索引擎优化(SEO)
2.为了让浏览器理解网页
如何做到语义化?
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
文本元素
h
标题 h1~h6:一级到六级标题
html h$*6>{$级标题}+Tab键/*直接生成六个标题*/
p
段落
lorem 乱数假文,没有任何实际含义的文字
html p*3>lorem/*直接生成三段乱数假文*/
span
没有语义，仅用于设置样式
以前：某些元素在显示时会独占一行(块级元素)，而某些元素不会(行级元素) 到了HTML5，已经弃用这种说法
pre
预格式化文本元素
空白折叠：在源代码中的连续空白字符(空格、换行、制表)，在页面显示时，会被折叠成一个空格 例外：在pre元素中的内容不会出现空白折叠
该元素通常用于在页面中显示一些代码
pre元素功能的本质：它有一个默认的CSS属性
显示代码时，通常外面套code元素，code表示代码区域。
HTML实体
实体字符通常用于在页面中显示一些特殊符号
两种书写方式： 1.&单词; 2.数字;
- 小于符号
html < <
- 大于符号
html >
- 空格
html
- 版权符号
html ©
- &符号
html &
a元素
含义：超链接
href属性
hyper reference (引用) 通常表示跳转地址
表示法：
普通链接
锚链接 (跳到当前页面的某一位置)
id属性：全局属性，表示元素在文档中的唯一编号
- 功能链接
点击后，触发某个功能
- 执行JS代码，javascript:
- 发送邮件，mailto: 要求用户计算机上安装有邮件发送软件：exchange
- 拨号，tel: 要求用户计算机上安装有拨号软件，或使用的是移动端访问
target属性
表示跳转窗口位置。
target的取值： - _self:在当前页面窗口中打开，默认值 - _blank:在新窗口打开
图片元素
img元素
空元素
src属性：source
alt属性：当图片资源失效时，将使用该属性的文字替代图片
和a元素连用
和map元素连用
map:地图
map的子元素：area
衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：ps、pxcook
和figure元素连用
指代、定义，通常用于把图片、图片标题、描述包裹起来
子元素：figcaption (标题)
html <figure> <a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281"> <img usemap="#solarMap" src="./img/solar.jpg" alt="这是一张太阳系图片"> </a> <figcaption> <h2> 太阳系 </h2> </figcaption> <p> 太阳系(Solar system)是一个受太阳引力约束在一起的行星系统，包括太阳以及直接或间接围绕太阳运动的天体 </p> </figure> <map name="solarMap"> <area shape="circle" coords="670,270,66" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank"> <area shape="rect" coords="635,336,730,397" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank"> <area shape="poly" coords="" href="" alt=""> </map>
多媒体元素
video 视频
audio 音频
video
controls ：控制控件的显示，取值只能是controls
某些属性，只有两种状态：1.不写 2.取值为属性名 这种属性叫做布尔属性 布尔属性：在HTML5中，可以不用书写属性值
autoplay：布尔属性，自动播放。
muted：布尔属性，静音播放。
loop：布尔属性，循环播放。
audio
和视频完全一样
兼容性
旧版本的浏览器不支持这两个元素
不同的浏览器支持的音视频格式可能不一致
列表元素
有序列表
ol:ordered list
li:list item
type 标号类型： i I a A 1(默认值)
html 把大象装进冰箱，分几步？ <ol type="a"> <li>打开冰箱门</li> <li>大象进去</li> <li>关上冰箱门</li> </ol> 
reversed：布尔属性，语义化，倒序
无序列表
把ol改为ul
ul:unordered list
```html
```
无序列表常用来制作菜单 或 新闻列表
定义列表
通常用于一些术语的定义
dl:definition list
dt:definition title 术语
dd:definition description 术语描述
html <dl> <dt>术语</dt> <dd>术语描述</dd> </dl>
容器元素
容器元素：该元素代表一块区域，内部用于放置其他元素
div元素
没有语义
语义化容器元素
header：通常用于表示页头，也可以用于表示文章的头部
footer：通常用于表示页脚，也可以用于表示文章的尾部
article：通常用于表示整篇文章
section：通常用于表示文章的章节
aside：通常用于表示则边栏
```html
<article>
<header></header>
<section>
<p></p>
<p></p>
<p></p>
</section>
</article>
<aside>
</aside>
<footer>
</footer>```
元素包含关系
以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。
元素的包含关系由元素的类别决定。
总结：
容器元素中可以包含任何元素
a元素中几乎可以包含任何元素
某些元素有固定的子元素(ul>li, ol>li, dl>dt+dd)
标题元素和段落元素不能互相嵌套，并且不能包含容器元素
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
