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

前端与HTML[青训营笔记]

1.前端关注的方面

美观、安全、功能、性能、无障碍、兼容性

2.前端的边界

node 服务器
electron 客户端应用
React Native 在线传输，多人会议
web RCT 3D游戏
WebGLC 将代码可以直接放入浏览器运行
webASSEMBLY

3.html——HyperText Markup Language

HyperText 图片、标题、链接、表格
Markup Language <h1>文章标题<h1>.

<!DOCTYPE html> // 文件类型
<html lang= "zh-CN">// 根标签
<head> //规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
    <meta charset="UTF-8">
    <meta name = "description" content="******">
    <meta name = "keywords" content="算法，计算机……"> //词条被浏览器收录，搜索用的关键词
    <meta name = "viewport" content="width=device-width,initial-scale=1.0">
    //那些不能由其它 HTML 元相关元素（base/link/script/style/title）表示的任何元数     //据信息。
    <title>Web应用课</title> //网站名字
</head>
<body> // 表示文档的内容
    <h1>第一讲</h1>
</body>
</html>

4.`<img src="photo.jpg" />` src为属性

5.DOM树

DOM树.png

6.语义化

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

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

有序列表用ol，无序列表用ul；
lang属性表示内容所使用的的语言

7.谁在使用我们写的html

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

8.如何做到语义化

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

9.常见标签

1.`<title>`

文档标题，与 <h1> 不同, <h1> 是为body添加标题，也叫网页标题，显示在页面，通常只出现一次，标记内容标题（故事名称、新闻摘要等）

2.`<head>`

内容不会在浏览器中显示，它的作用是保存页面的元数据，会包含很多元数据

3.`<meta>`

元数据就是描述数据的数据，为meta元素，有很多不同种类的meta元素可以被包含靳页面的head中，但不会去解释所有类型

4.`<h1>-<h6>`标签

HTML <h1>–<h6>标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

5.`<p>`

HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。

通俗讲，在div基础上加了额外限制，每两个p标签的块间会有行间距,会将空格和回车过滤

6.`<audio>`

HTML <audio>元素用于在文档中嵌入音频内容。<audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者<source>元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

7.`<video>`

HTML <video> 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video>标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

8.超链接

a + tab键(不用加<) herf中写链接，可以是某网站，也可以跳到站内 HTML<a>元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a>中的内容应该指明链接的意图。如果存在 href 属性，当<a>元素聚焦时按下回车键就会激活它。

点击链接打开新标签页面时加入属性：target="_blank"（当前网站直接变为新网站不用加，需要新打开一个标签页加 target）

9.列表

HTML <ul> 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。
HTML <ol> 元素表示有序列表，通常渲染为一个带编号的列表。

前端与HTML | 青训营笔记