这是我参与「第四届青训营 」笔记创作活动的第1天
一、本堂课重点内容
- DOM树
- 语义化
二、详细知识点介绍
-
前端人要关注：
功能、性能、安全、体验、美观、兼容、无障碍
-
前端的边界：
node.js运行在服务器端的 JavaScriptELECTRON使用HTML，CSS和JavaScript等技术，创建桌面应用程序的框架React Native使用React创建Android和ios原生应用的框架WebRTC网页实时通信技术，WebGL3D绘图协议，为H5 Canvas提供硬件3D加速渲染WebASSEMBLY将非JavaScript编程语言编写的程序运行在浏览器的技术方案
-
HTML DOM树
A DOM tree is an in-memory representation of a document. 直译：DOM 树是文档的内存表示。
Web浏览器会解析HTML元素，将其转换为DOM树，即文档对象模型。
DOM树包含：DocumentType节点，Element节点，Text 节点、 comments 节点（和ProcessingEducation 节点）
-
不常用标签
<blockquote cite="http://xxxx"> <p>xxxxxx</p> </blockquote> <!--斜体--> <cite>xxx</cite> <!--双引号--> <q>xxxx</q> <!--代码片段--> <pre><code> const add = (a, b) => a + b; const multiply = (a, b) => a * b; </code></pre> -
内容划分
-
HTML 语义化的理解
- 元素、属性、属性值都有各自的含义
- 开发者应遵循语义编写代码
A：代码可读性、可维护性、搜索引擎优化、提升无障碍性
语义标签
<section>表示区块<article>表示文章。如文章、评论、帖子、博客<header>表示页眉<footer>表示页脚<nav>表示导航<aside>表示侧边栏。如文章的侧栏<figure>表示媒介内容分组。<mark>表示标记<progress>表示进度<time>表示日期
三、标签总结
以下内容为阅读【千古前端图文教程】所摘录的笔记，链接置于文末。
meta标签
“元”配置，基本的配置项目
-
字符集 charset：网页的编码方式。utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312等。
-
视口 viewport
-
定义“关键词”：
<meta name="Keywords" content="xxxxx" />即网页关键词，提高搜索命中率。 -
定义“页面描述”：
<meta name="Description" content="xxxx" />即搜索结果中显示的语句，SEO技术（search engine optimization，搜索引擎优化）。 -
页面的刷新与跳转：
<meta http-equiv="refresh" content="3;http://www.baidu.com">3秒之后，自动跳转到百度页面。 应用场景：网页PPT自动播放、每隔一分钟刷新页面的大屏幕监控
base标签
<base href="/"> 指定基础路径。
body标签
排版标签
<h1>至<h6>标题标签
<p>段落标签
<hr />水平线标签
-
<br />换行标签 -
<div>和<span>
-
div标签：容器级，可以把标签中的内容分割为独立的区块。必须单独占据一行
-
span标签：文本级，和div的作用一致，但不换行。
-
<center>内容居中标签
这个标签中的内容居于浏览器中间，在HTML5中不建议使用，建议用css布局来实现。
<pre>预定义（预格式化）标签
将保留标签内部所有的空白字符(空格、换行符)，原封不动地输出结果。
<u>下划线标记<s>或<del>中划线标记（删除线）<i>或<em>斜体标记<sup>上标<sub>下标
PS：字体标签 <font>与 粗体标签 <b>或 <strong>已废弃
超链接
- 外部链接
<a href="http://www.baidu.com" target="_blank">baidu</a> - 锚链接：在本页面或者其他页面的的不同位置进行跳转。
创建锚点：使用 name 属性或者 id 属性给那个特定的位置起个名字。
说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。
<a href="a.html#name1">回到顶部</a>
- 邮件链接：
<a href="mailto:xxx@163.com">邮箱</a>
四种状态（4种伪类）：
- :link “链接”：超链接点击之前；
- :visited “访问过的”：链接被访问过之后；
- :hover “悬停”：鼠标放到标签上的时候；
- :active “激活”： 鼠标点击标签，但是不松手时。
注意：书写时必须 按照上述顺序，否则不生效。开发过程中， a:link 、 a:visited 都是可以省略的，简写在a标签里面。
图片标签
img 标签，为单标签。src属性的两种写法：相对路径和绝对路径。
能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。 不能往网页中插入的图片格式是：psd、ai等。 HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。
列表标签
三种
- 无序列表：
<ul> <li>
PS: 项目符号也可以是图片，需要通过CSS设置 <li> 标记的背景图片来实现
list-style-position: inside 给 ul 设置这个属性后，将小圆点包含在 li 元素的内部
列表之间是可以嵌套的。
- 有序列表：
<ol> <li>
- 定义列表：
<dl>
没有属性。dl 的子元素只能是 dt 和 dd 。
<dt>：definition title 列表的标题，这个标签是必须的；<dd>：definition description 列表的列表项，可以不加。
表格标签
<tr>行
<td>单元格
<th>加粗的单元格，属性同<td>标签<caption>表格标题，使用时和<tr>标签并列
<thead> <tbody> <tfoot>标签：
有与没有的区别：
-
有：按照thead、tbody、tfoot的顺序依次来显示内容；
没有： 按照代码的从上到下的顺序来显示。
-
有：数据可以边获取边显示；
没有：等表格的内容全部从服务器获取完成才显示。
表单标签
<form> 用于与服务器的交互。
PS：表单和表格嵌套时，是 <form> 标记中套 <table>
<form>
<fieldset>
<legend>
<!--name-->
</legend>
姓名：<input />
...
</fieldset>
</form>
输入标签
<input>单标签，文本框。
让label标签的for 属性值，和 input 标签的 id 属性值相同，那么这个label和input就有绑定关系了。
- 多行文本输入框
下拉列表标签
<select> 选择 <option> 选项
多媒体标签
音频、视频、Flash
<bgsound>标签：播放背景音乐
<embed>标签：播放多媒体文件，主要应用于Netscape浏览器，不是W3C规范。
<object>标签：播放多媒体文件，主要应用于IE浏览器，是W3C规范。
PS：在网页中插入Flash时，为了同时兼容多种浏览器，需要将 <object> 标签和 <embed> 标签标记一起使用，使用的顺序是： <object> 中嵌套 <embed> 。
滚动字幕标签
<marqueee> 标签，内容会像弹幕一样自动移动。
