HTML5知识点复习与总结

HTML5知识点总结

---

---

小知识点：

1、HTML与CSS

html：超文本标记语言，定义网页中有什么
css：层叠样式表，定义网页中的东西长什么样子

2、Markdown生成目录

markdown生成目录：[toc]

3、标签使用遇到问题查询得到标准答案

遇到问题查 mdn+标签，得到标准定义
HTML5元素周期表

4、乱数假文（lorem）的使用

指没有任何实际意义的文字，由系统随机产生单词，常用于报纸印刷时测试排版，在HTML中常用于P标签中，测试文章样式

p>lorem30			#生成30个单词的乱数假文

---

浏览器知识点

浏览器：
1、shell 外壳
2、core 内核（JS执行引擎、渲染引擎）

有独立内核的浏览器	内核
IE	trident
Firefox	gecko
Chrome	webkit （后来自己开发 blink）
Safari	webkit
Opera	presto（已经弃用）（现在改用 blink）

---

HTML知识点

---

注释

<!--   注释内容   -->		#Ctrl键加  /   将选定区域注释或取消注释，空行也可以

---

元素

元素组成
起始标记	begin tag
结束标记	end tag
元素内容	字符串 或 别的元素
元素属性	（属性名+属性值）

语义化

1、语义化含义

• 每一个元素都有具体的含义
• 所有元素与展示效果无关，效果由CSS决定（浏览器存在默认CSS样式）

确定选择什么元素，应该取决于内容的含义，而非显示出来的效果

2、为什么需要语义化

• 为了搜索引擎优化（SEO）
• 为了让浏览器理解网页（特殊情况：比如说朗读网页时标题和重读音，阅读模式忽略广告等）

---

行内元素与块级元素

一个行内元素只占据它对应标签的边框所包含的空间-------来自MDN
例子：

块级元素占据其父元素（容器）的整个空间
通常浏览器会在块级元素前后另起一个新行。
例子：

行内元素与块级元素的区别

在格式上

默认情况下，行内元素不会以新行开始，而块级元素会新起一行。

在内容上

一般情况下，行内元素只能包含数据和其他行内元素，
而块级元素可以包含行内元素和其他块级元素。

HTML5新标准

HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。
在 HTML5，这种区别被一个更复杂的内容类别代替。”块级“类别大致相当于 HTML5 中的流内容类别，而”行内“类别相当于 HTML5 中的措辞内容类别，不过除了这两个还有其他类别。

---

空白折叠与 <pre> 元素

空白折叠

在源代码中的连续空白字符（空格、换行、制表符），在页面显示时会被折叠成一个空格

<pre>预格式化文本元素

<pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

实体字符

通常用于页面中显示特殊符号

各种特殊符号及其写法

&	&	
<	&lt;	
>	&gt;	
"	&quot;

空格 &nbsp;

<a>元素

1、普通链接

2、锚链接

h1{目录}>a[href="#chapter$"]{章节$}*10

((h2[id="chapter$"]>{章节$})+p>lorem100)*10

3、功能链接（执行JavaScript代码等）

<a href="javascript:alert('弹个框上天！')">弹个框能上天啊！-------前端工程师对于XSS的认识</a>

4、target属性

默认是当前页面打开

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

列表元素

1、有序列表ol

序号取值可以为：

reversed序列倒置：

<ol type="I" reversed>

2、无序列表ul

无序列表常用来制作菜单，或者新闻列表等

3、定义列表dl

定义列表通常用于一些术语的定义

<dl>
        <dt>定义的标题</dt>
        <dd>Lorem ipsum dolor sit amet.</dd>
        <dt>定义的标题2</dt>
        <dd>balabala Lorem ipsum dolor sit amet.</dd>
    </dl>

容器元素

代表一个块区域，内部用于放置其他元素

1、div常用，没有语义

2、语义化容器元素header（头部）、footer（底部）、article（文章）、section（章节）、aside（通常表示附加信息、侧边栏）

元素包含关系（HTML5）

以前：行级元素不可以包含块级元素，a元素除外

现在：元素的包含关系由元素的内容类别决定。

总结：

1. 容器元素中可以包含任何元素
2. a元素几乎可以包含任何元素
3. 某些元素有固定的子元素（ol>li,ul>li,dl>dt+dd）
4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素

表单元素

包含一系列元素，主要用于收集用户数据

input元素（输入框）

• type属性：输入框的类型

type：text --------- 文本输入框
type：password --------- 密码输入框
type：date --------- 日期选择框，有兼容性问题
type：search --------- 搜索框，有兼容性问题
type：number --------- 数字输入框

	<input type="text" name="" id="">
    <input type="tel" name="" id="">
    <input type="date" name="" id="">
    <input type="password" name="" id="">
    <input type="number" name="" id="">
    <input type="range" name="" id="">
    <input type="color" name="" id="">

type：checkbox --------- 多选框

爱好：
    <span>Lorem.<input type="checkbox" name="hobby" id=""></span>
    <span>Assumenda!<input type="checkbox" name="hobby" id=""></span>
    <span>Rerum.<input type="checkbox" name="hobby" id=""></span>
    <span>Natus.<input type="checkbox" name="hobby" id=""></span>

type：radio --------- 单选框

type：file --------- 文件上传

<input type="file" name="" id="">

input还可以制作按钮，但是已经过时，不过兼容老版本
使用reset、submit、button可以制作按钮

• value属性：输入框的默认值
• placeholder：显示提示的文本（即一点进来就没有了）

select元素（下拉列表）

下拉列表选择框，通常和option元素配合使用

    <select name="" id="">
        <option value="">Lorem.</option>
        <option value="">Optio!</option>
        <option value="">Omnis.</option>
        <option value="">Quae!</option>
        <option selected value="">Quam!</option>
    </select>

textarea（多行文本框）

可以用CSS控制宽高，可替换元素

button元素（按钮）

type属性：reset、button、submit

配合表单元素的其他常用元素

• label 配合单选多选框使用（还可以隐式关联，即在label属性中套一个input）

    <input type="radio" name="gender" id="man">
    <label for="man">男</label>
    <input type="radio" name="gender" id="woman">
    <label for="woman">女</label>

• datalist 数据列表

该元素本身不会显示到页面，通常配合普通文本框，可以做到提示输入

<input type="text" name="" list="userAgent">
    <datalist id="userAgent">
        <option value="chrome">谷歌浏览器</option>
        <option value="IE">微软IE浏览器</option>
        <option value="Firefox">火狐浏览器</option>
        <option value="Safari">苹果浏览器</option>
    </datalist>

• form元素 通常会将表单包含起来

作用，当点击提交按钮后，会将form表单中的数据以合适的方式提交

• fieldset 将一部分表单元素框起来，分组

    <fieldset>
        <legend>账号信息</legend>
        用户名<input type="text" name="" id="">
        密码<input type="text" name="" id="">
    </fieldset>

• 表单状态-----readonly
• 表单状态-----disabled禁用，不让填了

<input type="text" name="" id="" readonly>