add: HTML 基础回顾
This commit is contained in:
qianguyihao
parent
df5c4b290d
commit
0ea740c0a7
@ -83,6 +83,13 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**css 属性**：
|
||||||
|
|
||||||
|
```css
|
||||||
|
list-style-position: inside /* 给 ul 设置这个属性后，将小圆点包含在 li 元素的内部 */
|
||||||
|
```
|
||||||
|
|
||||||
#### ul标签实际应用场景：
|
#### ul标签实际应用场景：
|
||||||
|
|
||||||
场景1、导航条：
|
场景1、导航条：
|
||||||
@ -615,7 +622,7 @@ POST方式：
|
|||||||
- `password`：密码类型
|
- `password`：密码类型
|
||||||
- `radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
|
- `radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
|
||||||
）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
|
）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
|
||||||
- `checkbox`：多选按钮，**名字相同的按钮**作为一组进行选择。
|
- `checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。
|
||||||
- `checked`：将单选按钮或多选按钮默认处于选中状态。当`<input>`标签的`type="radio"`时，可以用这个属性。属性值也是checked，可以省略。
|
- `checked`：将单选按钮或多选按钮默认处于选中状态。当`<input>`标签的`type="radio"`时，可以用这个属性。属性值也是checked，可以省略。
|
||||||
- `hidden`：隐藏框，在表单中包含不希望用户看见的信息
|
- `hidden`：隐藏框，在表单中包含不希望用户看见的信息
|
||||||
- `button`：普通按钮，结合js代码进行使用。
|
- `button`：普通按钮，结合js代码进行使用。
|
||||||
@ -637,7 +644,7 @@ POST方式：
|
|||||||
|
|
||||||
> 备注：HTML5中，input的类型又增加了很多（比如date、color，我们会在 html5 中讲到）。
|
> 备注：HTML5中，input的类型又增加了很多（比如date、color，我们会在 html5 中讲到）。
|
||||||
|
|
||||||
举例：
|
**举例**：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<form>
|
<form>
|
||||||
@ -645,8 +652,8 @@ POST方式：
|
|||||||
昵称：<input value="哈哈" readonly=""><br>
|
昵称：<input value="哈哈" readonly=""><br>
|
||||||
名字：<input type="text" value="name" disabled=""><br>
|
名字：<input type="text" value="name" disabled=""><br>
|
||||||
密码：<input type="password" value="pwd" size="50"><br>
|
密码：<input type="password" value="pwd" size="50"><br>
|
||||||
性别：<input type="radio" name="gender" value="male" checked="">男
|
性别：<input type="radio" name="gender" id="radio1" value="male" checked="">男
|
||||||
<input type="radio" name="gender" value="female" >女<br>
|
<input type="radio" name="gender" id="radio2" value="female" >女<br>
|
||||||
爱好：<input type="checkbox" name="love" value="eat">吃饭
|
爱好：<input type="checkbox" name="love" value="eat">吃饭
|
||||||
<input type="checkbox" name="love" value="sleep">睡觉
|
<input type="checkbox" name="love" value="sleep">睡觉
|
||||||
<input type="checkbox" name="love" value="bat">打豆豆
|
<input type="checkbox" name="love" value="bat">打豆豆
|
||||||
@ -657,7 +664,9 @@ POST方式：
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
四种按钮的举例：
|
注意，多个个单选框的input标签中，name 的属性值可以相同，但是 **id 的属性值必须是唯一的**。我们知道，html的标签中，id的属性值是唯一的。
|
||||||
|
|
||||||
|
**四种按钮的举例**：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<form>
|
<form>
|
||||||
@ -812,7 +821,7 @@ text就是“文本”，area就是“区域”。
|
|||||||
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
|
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
|
||||||
```
|
```
|
||||||
|
|
||||||
上方代码中，input元素要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。
|
上方代码中，让label标签的**for 属性值**，和 input 标签的 **id 属性值相同**，那么这个label和input就有绑定关系了。
|
||||||
|
|
||||||
|
|
||||||
当然了，复选框也有label：（任何表单元素都有label）
|
当然了，复选框也有label：（任何表单元素都有label）
|
||||||
|
|||||||
@ -114,7 +114,7 @@ HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
以后我们可以这样写：
|
在html5中，我们可以这样写：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -171,28 +171,28 @@ HTML5 则是通过新增语义标签的形式来解决这个问题，例如`<hea
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## H5中常用的新语义标签
|
## H5中新增的语义标签
|
||||||
|
|
||||||
- `<nav>` 表示导航
|
|
||||||
|
|
||||||
- `<header>` 表示页眉
|
|
||||||
|
|
||||||
- `<footer>` 表示页脚
|
|
||||||
|
|
||||||
- `<section>` 表示区块
|
- `<section>` 表示区块
|
||||||
|
|
||||||
- `<article>` 表示文章。如文章、评论、帖子、博客
|
- `<article>` 表示文章。如文章、评论、帖子、博客
|
||||||
|
|
||||||
- `<aside>` 表示侧边栏 如文章的侧栏
|
- `<header>` 表示页眉
|
||||||
|
|
||||||
|
- `<footer>` 表示页脚
|
||||||
|
|
||||||
|
- `<nav>` 表示导航
|
||||||
|
|
||||||
|
- `<aside>` 表示侧边栏。如文章的侧栏
|
||||||
|
|
||||||
- `<figure>` 表示媒介内容分组。
|
- `<figure>` 表示媒介内容分组。
|
||||||
|
|
||||||
- `<mark>` 表示标记 (用得少)
|
- `<mark>` 表示标记 (用得少)
|
||||||
|
|
||||||
- `<progress>` 表示进度 (用得少)
|
- `<progress>` 表示进度 (用得少)
|
||||||
|
|
||||||
- `<time>` 表示日期
|
- `<time>` 表示日期
|
||||||
|
|
||||||
|
|
||||||
本质上新语义标签与`<div>`、`<span>`没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成`<div class="nav">` 相当于`<nav>`。
|
本质上新语义标签与`<div>`、`<span>`没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成`<div class="nav">` 相当于`<nav>`。
|
||||||
|
|
||||||
|
|
||||||
@ -226,11 +226,11 @@ IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法：引入`htm
|
|||||||
PS:我们在测试 IE 浏览器的兼容的时候，可以使用软件 ietest，模拟IE6-IE11。
|
PS:我们在测试 IE 浏览器的兼容的时候，可以使用软件 ietest，模拟IE6-IE11。
|
||||||
|
|
||||||
|
|
||||||
在不支持HTML5新标签的浏览器，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。
|
在不支持HTML5新标签的浏览器，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。
|
||||||
|
|
||||||
但是在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过document.createElement('tagName')创建的自定义标签。于是我们的解决方案就是：将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
|
但是在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过document.createElement('tagName')创建的自定义标签。于是我们的解决方案就是：将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
|
||||||
|
|
||||||
当然，在实际开发中我们更多采用的办法是：检测IE浏览器的版本，来加载第三方的JS库来解决兼容问题（如上方代码所示）。
|
当然，在实际开发中我们更多采用的办法是：检测IE浏览器的版本，来加载第三方的JS库来解决兼容问题（如上方代码所示）。
|
||||||
|
|
||||||
|
|
||||||
## H5中的表单
|
## H5中的表单
|
||||||
@ -255,9 +255,9 @@ PS:我们在测试 IE 浏览器的兼容的时候，可以使用软件 ietest，
|
|||||||
|
|
||||||
- `time` 时间
|
- `time` 时间
|
||||||
|
|
||||||
- `date` 日期。
|
- `date` 日期
|
||||||
|
|
||||||
- `--datetime` 时间日期
|
- `datetime` 时间日期
|
||||||
|
|
||||||
- `month` 月份
|
- `month` 月份
|
||||||
|
|
||||||
@ -266,7 +266,6 @@ PS:我们在测试 IE 浏览器的兼容的时候，可以使用软件 ietest，
|
|||||||
|
|
||||||
上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
|
上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
|
||||||
|
|
||||||
|
|
||||||
代码举例：
|
代码举例：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -354,12 +353,10 @@ PS:我们在测试 IE 浏览器的兼容的时候，可以使用软件 ietest，
|
|||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
代码解释：
|
代码解释：
|
||||||
|
|
||||||
`<fieldset>` 标签将表单里的内容进行打包，代表一组；而`<legend> `标签的则是 fieldset 里的元素定义标题。
|
`<fieldset>` 标签将表单里的内容进行打包，代表一组；而`<legend> `标签的则是 fieldset 里的元素定义标题。
|
||||||
|
|
||||||
|
|
||||||
### 表单元素（标签）
|
### 表单元素（标签）
|
||||||
|
|
||||||
这里讲两个表单元素。
|
这里讲两个表单元素。
|
||||||
@ -384,7 +381,6 @@ PS:我们在测试 IE 浏览器的兼容的时候，可以使用软件 ietest，
|
|||||||
|
|
||||||
上图可以看出，数据列表可以自动提示。
|
上图可以看出，数据列表可以自动提示。
|
||||||
|
|
||||||
|
|
||||||
2、`<keygen>`元素：
|
2、`<keygen>`元素：
|
||||||
|
|
||||||
keygen 元素的作用是提供一种验证用户的可靠方法。
|
keygen 元素的作用是提供一种验证用户的可靠方法。
|
||||||
@ -393,8 +389,6 @@ keygen 元素是密钥对生成器（key-pair generator）。当提交表单时
|
|||||||
|
|
||||||
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
|
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
3、`<meter>`元素：度量器
|
3、`<meter>`元素：度量器
|
||||||
|
|
||||||
- low：低于该值后警告
|
- low：低于该值后警告
|
||||||
@ -407,16 +401,12 @@ keygen 元素是密钥对生成器（key-pair generator）。当提交表单时
|
|||||||
|
|
||||||
- min：最小值。
|
- min：最小值。
|
||||||
|
|
||||||
|
|
||||||
举例：
|
举例：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
<meter value="81" min="0" max="100" low="60" high="80"/>
|
<meter value="81" min="0" max="100" low="60" high="80"/>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### 表单属性
|
### 表单属性
|
||||||
|
|
||||||
- `placeholder` 占位符（提示文字）
|
- `placeholder` 占位符（提示文字）
|
||||||
@ -435,7 +425,6 @@ keygen 元素是密钥对生成器（key-pair generator）。当提交表单时
|
|||||||
|
|
||||||
- `pattern` 自定义正则，验证表单。例如
|
- `pattern` 自定义正则，验证表单。例如
|
||||||
|
|
||||||
|
|
||||||
代码举例：
|
代码举例：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -492,7 +481,6 @@ keygen 元素是密钥对生成器（key-pair generator）。当提交表单时
|
|||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### 表单事件
|
### 表单事件
|
||||||
|
|
||||||
- `oninput()`：用户输入内容时触发，可用于输入字数统计。
|
- `oninput()`：用户输入内容时触发，可用于输入字数统计。
|
||||||
@ -563,12 +551,10 @@ keygen 元素是密钥对生成器（key-pair generator）。当提交表单时
|
|||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
效果：
|
效果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 多媒体
|
## 多媒体
|
||||||
|
|
||||||
在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放。但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得音频、视频播放的处理变得非常复杂；并且移动设备的浏览器并不支持Flash插件。
|
在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放。但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得音频、视频播放的处理变得非常复杂；并且移动设备的浏览器并不支持Flash插件。
|
||||||
@ -599,7 +585,6 @@ HTML5通过`<audio>`标签来解决音频播放的问题。
|
|||||||
|
|
||||||
- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
|
- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
|
||||||
|
|
||||||
|
|
||||||
**处理兼容性问题：**
|
**处理兼容性问题：**
|
||||||
|
|
||||||
由于版权等原因，不同的浏览器可支持播放的格式是不一样的：
|
由于版权等原因，不同的浏览器可支持播放的格式是不一样的：
|
||||||
@ -664,7 +649,6 @@ HTML5通过`<video>`标签来解决视频播放的问题。
|
|||||||
</video>
|
</video>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## DOM 操作
|
## DOM 操作
|
||||||
|
|
||||||
### 获取元素
|
### 获取元素
|
||||||
@ -673,7 +657,6 @@ HTML5通过`<video>`标签来解决视频播放的问题。
|
|||||||
|
|
||||||
- document.querySelectorAll("selector") 通过CSS选择器获取符合条件的所有元素，以类数组形式存在。
|
- document.querySelectorAll("selector") 通过CSS选择器获取符合条件的所有元素，以类数组形式存在。
|
||||||
|
|
||||||
|
|
||||||
### 类名操作
|
### 类名操作
|
||||||
|
|
||||||
- Node.classList.add("class") 添加class
|
- Node.classList.add("class") 添加class
|
||||||
@ -684,7 +667,6 @@ HTML5通过`<video>`标签来解决视频播放的问题。
|
|||||||
|
|
||||||
- Node.classList.contains("class") 检测是否存在class
|
- Node.classList.contains("class") 检测是否存在class
|
||||||
|
|
||||||
|
|
||||||
### 自定义属性
|
### 自定义属性
|
||||||
|
|
||||||
js 里可以通过 `box1.index=100;` `box1.title` 来自定义属性和获取属性。
|
js 里可以通过 `box1.index=100;` `box1.title` 来自定义属性和获取属性。
|
||||||
@ -726,6 +708,7 @@ H5可以直接在标签里添加自定义属性，**但必须以 `data-` 开头*
|
|||||||
```html
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Tab 标签</title>
|
<title>Tab 标签</title>
|
||||||
@ -777,106 +760,107 @@ H5可以直接在标签里添加自定义属性，**但必须以 `data-` 开头*
|
|||||||
.cont ol {
|
.cont ol {
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<nav>
|
<nav>
|
||||||
<a href="javascript:;" data-cont="local">国内新闻</a>
|
<a href="javascript:;" data-cont="local">国内新闻</a>
|
||||||
<a href="javascript:;" data-cont="global">国际新闻</a>
|
<a href="javascript:;" data-cont="global">国际新闻</a>
|
||||||
<a href="javascript:;" data-cont="sports">体育新闻</a>
|
<a href="javascript:;" data-cont="sports">体育新闻</a>
|
||||||
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
|
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
|
||||||
</nav>
|
</nav>
|
||||||
<section class="cont" id="local">
|
<section class="cont" id="local">
|
||||||
<ol>
|
<ol>
|
||||||
<li>国内新闻1</li>
|
<li>国内新闻1</li>
|
||||||
<li>国内新闻2</li>
|
<li>国内新闻2</li>
|
||||||
<li>国内新闻3</li>
|
<li>国内新闻3</li>
|
||||||
<li>国内新闻4</li>
|
<li>国内新闻4</li>
|
||||||
<li>国内新闻5</li>
|
<li>国内新闻5</li>
|
||||||
<li>国内新闻6</li>
|
<li>国内新闻6</li>
|
||||||
<li>国内新闻7</li>
|
<li>国内新闻7</li>
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
<section class="cont" id="global">
|
<section class="cont" id="global">
|
||||||
<ol>
|
<ol>
|
||||||
<li>国内新闻1</li>
|
<li>国内新闻1</li>
|
||||||
<li>国际新闻2</li>
|
<li>国际新闻2</li>
|
||||||
<li>国际新闻3</li>
|
<li>国际新闻3</li>
|
||||||
<li>国际新闻4</li>
|
<li>国际新闻4</li>
|
||||||
<li>国际新闻5</li>
|
<li>国际新闻5</li>
|
||||||
<li>国际新闻6</li>
|
<li>国际新闻6</li>
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
<section class="cont" id="sports">
|
<section class="cont" id="sports">
|
||||||
<ol>
|
<ol>
|
||||||
<li>体育新闻1</li>
|
<li>体育新闻1</li>
|
||||||
<li>体育新闻2</li>
|
<li>体育新闻2</li>
|
||||||
<li>体育新闻3</li>
|
<li>体育新闻3</li>
|
||||||
<li>体育新闻4</li>
|
<li>体育新闻4</li>
|
||||||
<li>体育新闻5</li>
|
<li>体育新闻5</li>
|
||||||
<li>体育新闻6</li>
|
<li>体育新闻6</li>
|
||||||
<li>体育新闻7</li>
|
<li>体育新闻7</li>
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
<section class="cont" id="funny">
|
<section class="cont" id="funny">
|
||||||
<ol>
|
<ol>
|
||||||
<li>娱乐新闻1</li>
|
<li>娱乐新闻1</li>
|
||||||
<li>娱乐新闻2</li>
|
<li>娱乐新闻2</li>
|
||||||
<li>娱乐新闻3</li>
|
<li>娱乐新闻3</li>
|
||||||
<li>娱乐新闻4</li>
|
<li>娱乐新闻4</li>
|
||||||
<li>娱乐新闻5</li>
|
<li>娱乐新闻5</li>
|
||||||
<li>娱乐新闻6</li>
|
<li>娱乐新闻6</li>
|
||||||
<li>娱乐新闻7</li>
|
<li>娱乐新闻7</li>
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
// 目标： 默认显示一个 当前的样式
|
// 目标： 默认显示一个 当前的样式
|
||||||
// 点击导航，实现切换
|
// 点击导航，实现切换
|
||||||
// key 表示的当前显示的是第几个
|
// key 表示的当前显示的是第几个
|
||||||
|
|
||||||
(function (key) {
|
(function (key) {
|
||||||
// 获取所有的导航
|
// 获取所有的导航
|
||||||
var navs = document.querySelectorAll('nav a');
|
var navs = document.querySelectorAll('nav a');
|
||||||
// 遍历 给导航 绑定事件，并且添加当前样式
|
// 遍历 给导航 绑定事件，并且添加当前样式
|
||||||
for (var i = 0; i < navs.length; i++) {
|
for (var i = 0; i < navs.length; i++) {
|
||||||
// 如果是用户指定的当前样式
|
// 如果是用户指定的当前样式
|
||||||
if (key == i) {
|
if (key == i) {
|
||||||
navs[i].classList.add('active');
|
navs[i].classList.add('active');
|
||||||
// 拿到要显示内容section的id
|
// 拿到要显示内容section的id
|
||||||
var secId = navs[i].dataset['cont'];
|
var secId = navs[i].dataset['cont'];
|
||||||
// 获取对应的section标签
|
// 获取对应的section标签
|
||||||
document.querySelector('#' + secId).style.display = 'block';
|
document.querySelector('#' + secId).style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 给每一个导航绑定点击事件
|
||||||
|
navs[i].onclick = function () {
|
||||||
|
// 排他
|
||||||
|
// 之前有active样式的清除, 之前显示的section 隐藏
|
||||||
|
var currentNav = document.querySelector('.active');
|
||||||
|
// 获取对应的内容区域 ，让其隐藏
|
||||||
|
var currentId = currentNav.dataset['cont'];
|
||||||
|
// 去掉导航的active 样式
|
||||||
|
currentNav.classList.remove('active');
|
||||||
|
// 对应的内容区域
|
||||||
|
document.querySelector('#' + currentId).style.display = 'none';
|
||||||
|
|
||||||
|
// 突出显示自己 导航添加样式 对应的section 显示
|
||||||
|
// 给自己添加active样式
|
||||||
|
this.classList.add('active');
|
||||||
|
// 对应的section模块显示出来
|
||||||
|
var myId = this.dataset['cont'];
|
||||||
|
document.querySelector('#' + myId).style.display = 'block';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 给每一个导航绑定点击事件
|
})(0);
|
||||||
navs[i].onclick = function () {
|
|
||||||
// 排他
|
|
||||||
// 之前有active样式的清除, 之前显示的section 隐藏
|
|
||||||
var currentNav = document.querySelector('.active');
|
|
||||||
// 获取对应的内容区域 ，让其隐藏
|
|
||||||
var currentId = currentNav.dataset['cont'];
|
|
||||||
// 去掉导航的active 样式
|
|
||||||
currentNav.classList.remove('active');
|
|
||||||
// 对应的内容区域
|
|
||||||
document.querySelector('#' + currentId).style.display = 'none';
|
|
||||||
|
|
||||||
// 突出显示自己 导航添加样式 对应的section 显示
|
|
||||||
// 给自己添加active样式
|
|
||||||
this.classList.add('active');
|
|
||||||
// 对应的section模块显示出来
|
|
||||||
var myId = this.dataset['cont'];
|
|
||||||
document.querySelector('#' + myId).style.display = 'block';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
})(0);
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -4,15 +4,15 @@
|
|||||||
|
|
||||||
css 进阶的主要内容如下。
|
css 进阶的主要内容如下。
|
||||||
|
|
||||||
### 1、html 和 css 基础知识
|
### 1、html 和 css 基础知识回顾
|
||||||
|
|
||||||
- html 元素的分类和特性
|
- html 元素的分类和特性
|
||||||
|
|
||||||
- html 元素默认样式和定制化
|
- html 元素默认样式和定制化
|
||||||
|
|
||||||
- css 选择器全解析
|
- css 选择器
|
||||||
|
|
||||||
- css 常见属性讲解
|
- css 常见属性
|
||||||
|
|
||||||
### 2、css 布局相关
|
### 2、css 布局相关
|
||||||
|
|
||||||
|
|||||||
250
03-CSS进阶/01-HTML基础回顾.md
Normal file
250
03-CSS进阶/01-HTML基础回顾.md
Normal file
@ -0,0 +1,250 @@
|
|||||||
|
|
||||||
|
## 本文主要内容
|
||||||
|
|
||||||
|
- html 的常见元素
|
||||||
|
|
||||||
|
- html 元素的分类
|
||||||
|
|
||||||
|
- html 元素的嵌套关系
|
||||||
|
|
||||||
|
- html 元素的默认样式和定制化
|
||||||
|
|
||||||
|
- html 常见面试题
|
||||||
|
|
||||||
|
## html 的常见元素
|
||||||
|
|
||||||
|
html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。
|
||||||
|
|
||||||
|
### 1、head 区域的 html 元素
|
||||||
|
|
||||||
|
> head 区域的 html 元素，不会在页面上留下直接的内容。
|
||||||
|
|
||||||
|
- meta
|
||||||
|
|
||||||
|
- title
|
||||||
|
|
||||||
|
- style
|
||||||
|
|
||||||
|
- link
|
||||||
|
|
||||||
|
- script
|
||||||
|
|
||||||
|
- base
|
||||||
|
|
||||||
|
**base元素的介绍**：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<base href="/">
|
||||||
|
```
|
||||||
|
|
||||||
|
base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。
|
||||||
|
|
||||||
|
### 2、html 元素（body 区域）
|
||||||
|
|
||||||
|
> body 区域的 html 元素，会直接出现在页面上。
|
||||||
|
|
||||||
|
- div、section、article、aside、header、footer
|
||||||
|
|
||||||
|
- p
|
||||||
|
|
||||||
|
- span、em、strong
|
||||||
|
|
||||||
|
- 表格元素：table、thead、tbody、tr、td
|
||||||
|
|
||||||
|
- 列表元素：ul、ol、dl、dt、dd
|
||||||
|
|
||||||
|
- a
|
||||||
|
|
||||||
|
- 表单元素：form、input、select、textarea、button
|
||||||
|
|
||||||
|
div 是最常见的元素，大多数场景下，都可以用div（实在不行就多包几层div）。可见，**div 是比较通用的元素，这也决定了 div 的的语义并不是很明确**。
|
||||||
|
|
||||||
|
**常见标签的重要属性**：
|
||||||
|
|
||||||
|
- a[href,target]
|
||||||
|
- img[src,alt]
|
||||||
|
- table td[colspan,rowspan]。设置当前单元格占据几行几列。在合并单元格时，会用到。
|
||||||
|
- form[target,method,enctype]
|
||||||
|
- input[type,value]
|
||||||
|
- button[type]
|
||||||
|
- selection>option[value]
|
||||||
|
- label[for]
|
||||||
|
|
||||||
|
### html 文档的大纲
|
||||||
|
|
||||||
|
我们平时在写论文或者其他文档的时候，一般会先列出大纲，然后再写具体的内容。
|
||||||
|
|
||||||
|
同样，html 网页也可以看成是一种文档，也有属于它的大纲。
|
||||||
|
|
||||||
|
一个常见的html文档，它的结构可以是：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<section>
|
||||||
|
<h1>一级标题</h1>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>二级标题</h2>
|
||||||
|
<p>段落内容</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>二级标题</h2>
|
||||||
|
<p>段落内容</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<p>广告内容</p>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>某某公司出品</p>
|
||||||
|
</footer>
|
||||||
|
```
|
||||||
|
### 查看网页大纲的工具
|
||||||
|
|
||||||
|
我们可以通过 <http://h5o.github.io/> 这个工具查看一个网页的大纲。
|
||||||
|
|
||||||
|
**使用方法**：
|
||||||
|
|
||||||
|
（1）将网址 <http://h5o.github.io/> 保存到书签栏
|
||||||
|
|
||||||
|
（2）去目标网页，点击书签栏的网址，即可查看该网页的大纲。
|
||||||
|
|
||||||
|
这个工具非常好用，既可以查看网页的大纲，也可以查看 markdown 在线文档的结构。
|
||||||
|
|
||||||
|
## html 元素的分类
|
||||||
|
|
||||||
|
按照样式分类：
|
||||||
|
|
||||||
|
- 块级元素
|
||||||
|
|
||||||
|
- 行内元素
|
||||||
|
|
||||||
|
- inline-block：比如`form`表单元素。对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
|
||||||
|
|
||||||
|
按照内容分类：
|
||||||
|
|
||||||
|
20191003_1946.png
|
||||||
|
|
||||||
|
图片来源：<https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content>
|
||||||
|
|
||||||
|
## html 元素的嵌套关系
|
||||||
|
|
||||||
|
- 块级元素可以包含行内元素。
|
||||||
|
|
||||||
|
- 块级元素**不一定**能包含块级元素。比如 div 中可以包含 div，但 p 标签中不能包含 div。
|
||||||
|
|
||||||
|
- 行内元素**一般**不能包含块级元素。比如 span 中不能包含 div。但有个特例：在 HTML5 中， a 标签中可以包含 div。
|
||||||
|
|
||||||
|
**注意**：在 HTML5 中 `a > div` 是合法的， `div > a > div`是不合法的 ；但是在 html 4.0.1 中， `a > div` 仍然是不合法的。
|
||||||
|
|
||||||
|
## html 元素的默认样式和定制化
|
||||||
|
|
||||||
|
比如下拉框这种比较复杂的元素，是自带默认样式的。如果没有这个默认样式，则该元素在页面上不会有任何表现，则必然增加一些工作量。
|
||||||
|
|
||||||
|
同时，默认样式也会带来一些问题：比如，有些默认样式我们是不需要的；有些默认样式甚至无法去掉。
|
||||||
|
|
||||||
|
如果我们不需要默认的样式，这里就需要引入一个概念：**CSS Reset**。
|
||||||
|
|
||||||
|
### 常见的 CSS Reset 方案
|
||||||
|
|
||||||
|
**方案一**：
|
||||||
|
|
||||||
|
CSS Tools: Reset CSS。链接：<https://meyerweb.com/eric/tools/css/reset/>
|
||||||
|
|
||||||
|
**方案二**：
|
||||||
|
|
||||||
|
雅虎的 CSS Reset。链接：<https://yuilibrary.com/yui/docs/cssreset/>
|
||||||
|
|
||||||
|
我们可以直接通过 CDN 的方式引入：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
|
||||||
|
```
|
||||||
|
**方式三**：（比较有争议）
|
||||||
|
|
||||||
|
```css
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
上面何种写法，比较简洁，但也有争议。有争议的地方在于，可能会导致 css 选择器的性能问题。
|
||||||
|
|
||||||
|
### Normalize.css
|
||||||
|
|
||||||
|
上面的几种 css reset 的解决思路是：将所有的默认样式清零。
|
||||||
|
|
||||||
|
但是，[Normalize.css](https://necolas.github.io/normalize.css/) 的思路是：既然浏览器提供了这些默认样式，那它就是有意义的。**既然不同浏览器的默认样式不一致，那么，`Normalize.css`就将这些默认样式设置为一致**。
|
||||||
|
|
||||||
|
## html 常见面试题
|
||||||
|
|
||||||
|
### doctype 的意义是什么
|
||||||
|
|
||||||
|
- 让浏览器以标准模式渲染
|
||||||
|
|
||||||
|
- 让浏览器知道元素的合法性
|
||||||
|
|
||||||
|
### HTML、XHTML、HTML5的区别
|
||||||
|
|
||||||
|
- HTML 属于 SGML
|
||||||
|
|
||||||
|
- XHTML 属于 XML，是 HTML 进行 XML 严格化的结果
|
||||||
|
|
||||||
|
- HTML5 不属于SGML，也不属于 XML（HTML5有自己独立的一套规范），比 XHTML 宽松。
|
||||||
|
|
||||||
|
### HTML5 有什么新的变化
|
||||||
|
|
||||||
|
- 新的语义化元素
|
||||||
|
|
||||||
|
- 表单增强
|
||||||
|
|
||||||
|
- 新的API：离线、音视频、图形、实时通信、本地存储、设备能力等。
|
||||||
|
|
||||||
|
### em 和 i 的区别
|
||||||
|
|
||||||
|
共同点：二者都是表示斜体。
|
||||||
|
|
||||||
|
区别：
|
||||||
|
|
||||||
|
- em 是语义化的标签，表示强调。
|
||||||
|
|
||||||
|
- i 是纯样式的标签，表示斜体。HTML5 中不推荐使用。
|
||||||
|
|
||||||
|
### 语义化的意义是什么
|
||||||
|
|
||||||
|
- 开发者容易理解，便于维护。
|
||||||
|
|
||||||
|
- 机器（搜索引擎、读屏软件等）容易理解结构
|
||||||
|
|
||||||
|
- 有助于 SEO
|
||||||
|
|
||||||
|
### 哪些元素可以自闭和
|
||||||
|
|
||||||
|
> 自闭和的元素中不能再嵌入别的元素。且 HTML5 中要求加斜杠。
|
||||||
|
|
||||||
|
- 表单元素 input
|
||||||
|
|
||||||
|
- 图片 img
|
||||||
|
|
||||||
|
- br、hr
|
||||||
|
|
||||||
|
- meta、link
|
||||||
|
|
||||||
|
### form 表单的作用
|
||||||
|
|
||||||
|
- 直接提交表单
|
||||||
|
|
||||||
|
- 使用 submit / reset 按钮
|
||||||
|
|
||||||
|
- 便于浏览器保存表单
|
||||||
|
|
||||||
|
- 第三方库（比如 jQuery）可以整体获取值
|
||||||
|
|
||||||
|
- 第三方库可以进行表单验证
|
||||||
|
|
||||||
|
所以，如果我们是通过 Ajax 提交表单数据，也建议加上 form。
|
||||||
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
|
|
||||||
## 本文主要内容
|
|
||||||
|
|
||||||
- html 常见元素和理解
|
|
||||||
|
|
||||||
- html版本
|
|
||||||
|
|
||||||
- html 元素分类
|
|
||||||
|
|
||||||
- html 元素嵌套关系
|
|
||||||
|
|
||||||
- html 元素默认样式和定制化
|
|
||||||
|
|
||||||
- html 常见面试题
|
|
||||||
|
|
||||||
|
|
||||||
## html的 常见元素
|
|
||||||
|
|
||||||
html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。
|
|
||||||
|
|
||||||
|
|
||||||
### 1、head 区域的 html 元素
|
|
||||||
|
|
||||||
> head 区域的 html 元素，不会在页面上留下直接的内容。
|
|
||||||
|
|
||||||
- meta
|
|
||||||
|
|
||||||
- title
|
|
||||||
|
|
||||||
- style
|
|
||||||
|
|
||||||
- link
|
|
||||||
|
|
||||||
- script
|
|
||||||
|
|
||||||
- base
|
|
||||||
|
|
||||||
**base**：
|
|
||||||
|
|
||||||
```html
|
|
||||||
<base href="/">
|
|
||||||
```
|
|
||||||
|
|
||||||
base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。
|
|
||||||
|
|
||||||
### 2、html 元素（body 区域）
|
|
||||||
|
|
||||||
> body 区域的 html 元素，会直接出现在页面上。
|
|
||||||
|
|
||||||
- div、section、article、aside、header、footer
|
|
||||||
|
|
||||||
- p
|
|
||||||
|
|
||||||
- span、em、strong
|
|
||||||
|
|
||||||
- 表格元素：table、thead、tbody、tr、td
|
|
||||||
|
|
||||||
- 列表元素：ul、ol、dl、dt、dd
|
|
||||||
|
|
||||||
- a
|
|
||||||
|
|
||||||
- 表单元素：form、input、select、textarea、button
|
|
||||||
|
|
||||||
div 是最常见的元素，大多数场景下，都可以用div（实在不行就多包几层div）。可见，**div 是比较通用的元素，这也决定了 div 的的语义并不是很明确**。
|
|
||||||
|
|
||||||
**常见标签的重要属性**：
|
|
||||||
|
|
||||||
- a[href,target]
|
|
||||||
|
|
||||||
- img[src,alt]
|
|
||||||
|
|
||||||
- table td[colspan,rowspan]。设置当前单元格占据几行几列。在合并单元格时，会用到。
|
|
||||||
|
|
||||||
- form[target,method,enctype]
|
|
||||||
- input[type,value]
|
|
||||||
- button[type]
|
|
||||||
- selection>option[value]
|
|
||||||
- label[for]
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user