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

重新学习了一下HTML，感觉这次课程比较贴近公司的需求，比较开心~~~~

重点内容

1.前端工作的定义

解决GUI人机交互问题
跨终端 PC/移动浏览器客户端/小程序 VR/AR等
Web技术栈

GUI：图形化界面

前端工程师就是用web技术栈解决多端图形页面交互问题

2.前端技术栈拆解与分析

HTML控制内容 CSS控制页面的样式 JavaScript控制用户与页面的交互

3.HTML作用解析

前端门槛低，只需要下载一个VSCode或者Vim，WebStorm之类的代码编译器写代码即可

4.HTML语义化

语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义

开发者应该遵循语义来编写HTML

有序列表用ol

无序列表用ul

lang 属性表示内容所使用的语言

详细知识点介绍

1.前端工程师需要关注的方面

功能：有什么功能，解决什么问题，是否满足用户需求
美观：好看
无障碍：是否对所有人都可用
安全：数据、漏洞
性能：速度快，动画流畅、用户体验足够好
兼容性，能否在各个平台上使用

2.前端的边界

3.DOM树是什么？

4.HTML语法

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

5.HTML谁在使用

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

6.语义化好处

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

重要的HTML标签

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

ol表示order list，有序标签

<ul>
    <li>111</li>
    <li>222</li>
</ul>

ul表示unorder list，无序标签

<dl>
    <dt>导演</dt>
    <dd>陈凯歌</dd>
    <dt>主演</dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>巩俐</dd>
    <dt>上映时间</dt>
    <dd>1993-01-01</dd>
</dl>

dl表示定义列表，definition list
dt表示描述列表的标题，definition title
dd表示描述列表的值，definiton description 一个dt可以对应多个dd

<a href="www.baidu.com" target="_blank">百度</a>

标签里面的target="_blank"可以打开新的页面，而不会替换当前的页面

<img src="http://...." alt="Metal movable type" width="400"/>

img中的src表示图片的地址

当用户启用省流量的时候，图片会加载不出来，此时就需要降级传达图片信息，把图片转化成文本，此时就需要alt

<audio src="./..." controls></audio>

audio表示音频
url表示网址
controls表示默认显示播放空间的

<video src="....." controls></video>

video表示视频

<input placeholder="请输入用户名">

placeholder占位符，在用户没有输入值的时候，占位符就会出现

<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2022-12-30">
<textarea>Hey</textarea>

type="range"，用户输入一个范围（滑动块）
type="date"，用户选择日期，min="2018-02-11"，有最小值
min="1" max="100"指定最小值、最大值
textarea用于用户输入多行的标签

<p>
    <label><input type="checkbox"/>111</label>
    <label><input type="checkbox"/>222</label>
</p>

<p>
    <label><input type="radio" name="sports"/>111</label>
    <label><input type="radio" name="sports"/>222</label>
</p>

<p>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</p>

<input list="countries"/>
<datalist id="countries">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</datalist>

type="checkbox" 用于选择、多选
type="radio" name="xxx"，只能单选，在name中相同的值对应的选项中，元素之间具有互斥的关系了
select-option 这个是下拉选项
datalist-option 是输入之后，输入和可选内容匹配的，就可以直接选中

补充：

strong、em表强调

区别：

strong---强调事情的严重性 em---语气上的强调，重读

总结：

HTML最重要的是传达内容，而不是样式

课后可以去通读一下MDN、W3C（不是W3CSchool）的语法规范，这样可以更加了解HTML，更加灵活方便的运用

1--前端与HTML | 青训营笔记

重点内容

详细知识点介绍

重要的HTML标签

总结：