前端与 HTML｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 1 天第一天学习了前端HTML的概念，

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

第一天学习了前端HTML的概念，以及各种标签，看下面的吧！

什么是前端？

前端工程师使用web技术栈解决GUI人机交互问题

前端要求：美观、功能齐全、无障碍使用、性能好、安全、兼容性好

前端工作

前端工程师是使用Web技术栈解决多端的图形界面交互问题的工程师。专注于人机交互，能够实现的跨终端有PC/移动浏览器、客户端/小程序、VR/AR等。

前端应该关注功能、美观、性能、安全、兼容、体验、无障碍。

前端技术栈

主要包含HTML(内容)、CSS(样式)、Javascript(行为)+网络协议(HTTP/Web Socket)

使用Node.js开发服务端；
使用Electron开发客户端；
使用WebRTC实现P2P在线传输（例：多人会议）；
使用WebGL实现3D场景可视化；
使用WebAssembly使得C++编写的代码可以高效的运行在浏览器上。

开发环境

浏览器 + 编辑器

什么是HTML？

HTML 被称为超文本标记语言，英文全称Hyper Text Markup Language，标准通用标记语言下的一个应用，不是一种编程语言。
Hyper Text：（超文本）图片、标题、链接、表格
Markup Language：（标记语言）开始标签、结束标签 :< h1>文章标题< /h1>

注： < img src='photo.jpg' /> 属性：src,属性值：photo.jpg,且标签之间无参数或文本，结束标签则可省略

DOM树

浏览器拿到HTM之后会进行解析，解析成DOM树:

`document

html

head

body

HTML语法

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

1、标题h1·h6

h1~h6字体大小依次减小，h1字体最大，h6最小

2、有序列表

用来规定一些顺序重要，不能随意调整的项，比如排行榜

<ol><br>
  <li>阿凡达1</li>
  <li>阿凡达2</li>
  < li>阿凡达3</li>
  <li>阿凡达44</li>
</ol>
复制代码

效果：

阿凡达1
阿凡达2
阿凡达3
阿凡达44

3、无序列表

用来定义一些顺序不重要的项目，比如商品列表，导航

<ul>
  <li>阿凡达1</li>
  <li>阿凡达2</li>
  <li>阿凡达3</li>
  <li>阿凡达4</li>
</ul>
复制代码

效果：
阿凡达1
阿凡达2
阿凡达3
阿凡达4

4、定义列表

用来解释一些专有名词或者术语的定义

<dl>
 <dt>导演:</dt>
 <dd>陈凯歌</dd>
 <dt>主演:</dt>
</dl>
复制代码

效果
导演：
陈凯歌
主演：

5、链接

< a>标签主要有两种用法
（1）当作超链接使用
（2）当作锚点使用

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

<p id="T1">第一题</p>
<a href="#T1">第一题</a>
复制代码

注：当target="_blank"，就跳出当前页面，打开新的页面；当target="_self",跳转页面跳转到当前页面.

6、输入

<input>
相关属性：

type=“text”：创建单行文本输入框
type=“radio”：单选按钮
type=“password”：密码输入框
type=“checkbox”：复选框
type=“button”：普通按钮
type=“submit”：提交按钮
type=“image”：图像按钮
type=“hidden”：隐藏域
type=“number”：数字字段
type=“range”：输入数值
type=“date”：日期控件
type=“month” 年月控件
type=“datetime”：日期加时间控件（基于UTC时区）
placeholder：提示用户输入的

<textarea>hey</textarea>
相关属性：

autofocus：当页面加载时，文本区域自动获得焦点（值：autofocus）
cols：文本区域内可见的列数（值：number）
disabled：禁用文本区域(值：disabled）
maxlength：文本区域允许的最大字符数（值：number）
rows number：文本区域内可见的行数（值：number）

HTML内容划分

将内容进行划分
标题(header)、脚注(footer)、article（文档、页面、应用或网站中独立分配或可复用的结构）、div（内容容器） 2A577167EDB09DA8将文档的内容从逻辑上进行组织划分。3E4443A18D614904.png

HTML语义化

HTML中的元素、属性及属性值都有特定含义，这些含义及语义。
开发者应该遵循语义来编写HTNL，根据内容的结构，选择合适的标签，便于开发者阅读和机器的阅读，从而写出更加优雅的代码，为浏览器的爬虫和机器更好的解析

HTML

HyperText Markup Language

浏览器会对HTML进行解析生成DOM树

HTML 的主要工作之一就是给予文本意义（也被叫做语义，在编程中，语义指的是一段代码的含义），以让浏览器知道如何正确的显示文本。

语义化的好处

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

如何做到语义化？

了解每个标签和属性的含义
思考用什么标签对内容进行描述最合适
不使用直接生成代码的工具，而是自己的去写

个人总结

HTML是传达内容，而不是样式

<!--错误示范-->
<p style="font-size:32px">青训营</p> 
<!--正确示范-->
<h1>青训营</h1>

前端与 HTML｜ 青训营笔记