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

前端与HTML

前端

1、什么是前端

前端.PNG

总结： 前端工程师是使用web技术栈解决多端图形用户界面交互的问题的

2、前端技术栈

最基础的前端技术栈： 1.HTML：负责页面的结构和内容 2. CSS：设置页面的样式 3. JavaScript：定义网页的行为

注：CSS、JavaScript运行在浏览器中

3、前端应该关注的方面

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

4、前端的边界

边界.PNG

5、前端的开发环境

开发环境.PNG

HTML

1、HTML的定义

HTML的定义： HTML --> 超文本标记语言（Hyper Text Markup Language）

超文本（HyperText）：包含图片、链接、标题、表格等。

标记语言（Markup Language）：使用标签表示各种各样的元素。使用成对出现的HTML的标签来表示一段内容。如：<h1></h1>等。也有不成对的标签，如<img src="photo.jpg" />，img标签中的src是属性名，"photo.jpg"表示src属性的属性值。

2、DOM树

HTML DOM： DOM的全名是文档对象模型（Document Object Model），其将文档视作为一个树形结构，树的根节点是一个HTML标签。树的每个节点（DOM节点）表示一个HTML标签。

通过HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。DOM 模型被结构化为对象树

代码示例1.PNG 如上图代码转换为DOM树。即为下图所示：

HTML　DOM树.PNG

<!doctype html>标签：声明文档的解析类型，避免浏览器使用不恰当的模式（如怪异模式）来解析渲染页面。

<head>标签：主要用来存放页面的元数据，内容不会在浏览器中显示，标签中可以有link、meta、script、style、title等标签。

<body>标签：包含HTML文档中用户可见的所有内容。

3、HTML语法

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

4、常用HTML标签

标题

<h1>~<h6>：h1表示字体最大的标题，h6表示字体最小的标题。

列表

有序列表<ol>，<ol>中的每一项为<li>
无序列表<ul>，<ul>中的每一项为<li>
定义列表<dl>，包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。

　　<dt>用来在一个定义列表中声明一个术语（标题），只能作为<dl>的子元素出现。在该元素后面会跟着<dd>元素，多个连续出现的<dt>元素都将由出现在它们后面的第一个<dd>元素定义。一个<dt>对应一个或多个　<dd>

　　<dd>用来指明一个描述列表 (dl) 元素中一个术语的描述。只能作为描述列表元素的子元素出现，并且必须跟着一个<dt>元素。

链接

<a>，<a>标签中有href和target两个属性。href属性规定链接指向页面的URL。target属性规定在何处打开链接页面。

target的属性值如下：

target`的属性值
`_blank`	加载响应到一个新的未命名的 HTML4 窗口或 HTML5 浏览上下文）
`_self`（默认值）	响应显示在当前同一HTML 4 frame中（或 HTML5 浏览器上下文）
`_parent`	加载响应到当前框架的 HTML4 父框架或当前的 HTML5 浏览上下文的父浏览上下文。
`_top`	加载的响应成完整的，原来的窗口，取消所有其它 frame。 HTML5 中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有 parent）。

注：如果没有 parent 框架或者浏览上下文，_parent和_top选项的行为方式与_self相同

多媒体

<img>：图像标签，src表示图片的URL地址，title表示图片标题，alt表示替换文本属性，用于图片加载失败的时候显示文本。

<audio>：音频标签，src表示音频源URL，control属性显示播放控件。

<video>：视频标签，src表示视频源URL，control属性显示播放控件。

输入

input：文本输入标签

<!-- 常规的输入框，其中，placeholder中的属性值表示提示信息 -->
<input placeholder="请输入用户名" />
<!-- 范围组件 -->
<input type="range" />
<!-- 数字控件 -->
<input type="number" min="1" max="10" />
<!-- 日期控件 -->
<input type="date" min="2018-02-10" />
<!-- 多行文本框 -->
<textarea>Hey</textarea>

输入.PNG

<!-- 多选框 -->
<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>
    
<!-- 单选框 -->
<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>

<!-- 选项菜单 -->
<p>
  <select>　　　　　　　　　　　　下拉列表选项
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>
    
<!-- 表单 -->
<input list="countries" />　　　　提示选项
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

表单.PNG

文本类标签

块级引用：<blockquote>，cite属性表示引用文本来源。

短引用：<cite>、<q>，<cite>一般引用作品名字和章节，<q>引用作品内容。

代码：<code>,可以引用短代码，也可以引用长代码。引用多行代码时需在前面配合<pre>使用。

强调：<strong>、<em>，<strong>强调事件重要，使加粗　　，<em>强调语气，使斜体。

文本.PNG

内容划分标签

内容划分标签如下图所示：内容划分.PNG

一般来说一个页面中只应该有一个 main 元素。

5、HTML的语义化

使用HTML标签应该遵循语义化。

什么是语义化？

HTML中的元素、属性及属性值都拥有某些含义；
开发者应该遵循语义来编写HTML，如：
- 有序列表用 ol；无序列表用 ul
- lang属性表示页面使用的语言

谁在使用我们写的HTML

开发者－修改、维护页面；
浏览器－展示页面；
搜索引擎－提取关键词、排序；
屏幕阅读器－识别阅读（给盲人读页面内容）。

语义化的好处

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

HTML的总体原则

HTML是传达内容，而不是样式设置。（HTML、CSS、JS 三者各司其职。）

如何做到语义化

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

前端与HTML ｜ 青训营笔记

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