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

青训营课程笔记

什么是前端？

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

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

什么是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>阿凡达</li>
  <li>阿凡达</li>
  < li>阿凡达</li>
  <li>阿凡达</li>
</ol>
复制代码

效果：

阿凡达
阿凡达
阿凡达
阿凡达

3、无序列表

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

<ul>
  <li>阿凡达</li>
  <li>阿凡达</li>
  <li>阿凡达</li>
  <li>阿凡达</li>
</ul>
复制代码

效果：
阿凡达
阿凡达
阿凡达
阿凡达

4、定义列表

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

<dl>
 <dt>导演:</dt>
 <dd>陈凯歌</dd>
 <dt>主演:</dt>
 <dd>张国荣</dd>
 <dd>张丰毅</dd>
 <dd>巩俐</dd>
</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">第一题：选择正确的答案： A B C D</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，根据内容的结构，选择合适的标签，便于开发者阅读和机器的阅读，从而写出更加优雅的代码，为浏览器的爬虫和机器更好的解析。

5|青训营笔记