前端学习路线-6-学习HTML基础

发表于 更新于

When you win, say nothing. When you lose, say less.
— Paul Brown

本系列关注前端部分,根据学习路线图达到学习Vue.js的目的

developer路线图developer-roadmap/translations/chinese at master · kamranahmedse/developer-roadmap

本系列笔记的源代码GitHub项目地址:learning-area/front-end-learning at master · YJ2CS/learning-area

快速跳转

目录:前端学习路线-目录

学习HTML等前端内容,网络上已经有完备且优良的教程了,一般来说,推荐W3school的教程或者MDN的教程,搭配上一些推荐的视频和资源,具体见下面这个列表

本章学习路线及随笔记教程

首先阅读html简介

之后主要学习

也有中文版的翻译教程,

但是中文版的翻译源比较古老了,还是推荐直接阅读原版

需要注意的是,两者的教程排序存在一些差异,这是因为中文版的翻译源过于古老

之后点击这个按钮切换成中文

Pasted image 20210219111024.png

学习方式

学习方式上,以在线运行代码学习为主,可以自行制定课后lab的学习计划,添加到学习日程中.

然后对下面的这些内容进行选读,学习其中新出现的内容 – 在前文w3school中文教程中未出现的内容

HTML-块级元素-div-内联元素-span

这之前的内容都是基础知识,从这开始,就需要在IDE中进行编程练习.

demo1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
    <style>
        .cities {
            background-color:black;
            color:white;
            margin:20px;
            padding:20px;
        }
    </style>
</head>

<body>

<div class="cities">
    <h2>London</h2>
    <p>
        London is the capital city of England.
        It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
    </p>
</div>

</body>
</html>

demo2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 类</title>
    <style>
        .cities {
            background-color: black;
            color: white;
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>

<div class="cities">
    <h2>城市</h2>
    <p>
        伦敦在英国.
        安徽在中国.
    </p>
</div>

<div class="cities">
    <h2>巴黎</h2>
    <p>巴黎在法国</p>
</div>

<div class="cities">
    <h2>东京</h2>
    <p>东京有东京热</p>
</div>

</body>
</html>

demo3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 类</title>
    <style>
        span.red{color: red;}
    </style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>

HTML-类属性-class

HTMLclass属性用于指定HTML元素的类。

多个HTML元素可以共享同一类。

HTML-id属性-id

HTMLid属性用于为HTML元素指定唯一的ID。

一个HTML文档中不能有多个具有相同ID的元素。

HTML-框架标签-frame

HTML5不支持frame。与之对应的,我们使用内联框架标签<iframe>

  • 在HTML 4中,使用< frame >标记来定义<frameset>中的一个特定窗口（frame）。see HTML frame tag

HTML-内联框架标签-iframe

HTML iframe语法

HTML<iframe>标签指定一个内联框架。

内联框架用于将另一个文档嵌入当前HTML文档中。

句法

1
<iframe src="url" title="description">

提示：<iframe>标签最好始终包含 title属性。屏幕阅读器使用它来读取iframe的内容。

HTML js

JavaScript使HTML页面更具动态性和交互性。

HTML<script>标签用于定义客户端脚本（JavaScript）。

该<script>元素中包含脚本语句，或者它指向通过外部脚本文件src的属性。

JavaScript的常见用法是图像处理，表单验证和内容的动态更改。

要选择HTML元素，JavaScript最常使用该 document.getElementById()方法。

demo1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>

<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 

</body>
</html>

HTML 布局

<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

demo1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>杂志和报纸样式示例</title>
    <link rel="stylesheet" type="text/css" href="../resource/styles/杂志和报纸.css"/>
</head>
<body>

<div id="header">
    <h1>城市展览</h1>
</div>

<div id="nav">
    伦敦<br/>
    巴黎<br/>
    东京<br/>
</div>

<div id="section">
    <h1>London</h1>
    <p>
        伦敦在英国.
    </p>
    <p>巴黎在法国</p>
    <p>东京有东京热</p>
</div>

<div id="footer">
    Copyright <a href="https://lamirs.vercel.app/" style="color: white;" target="_blank">Visit Lamirs ❤</a>
</div>
</body>
</html>

其对应的CSS(样式表)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*<style>*/
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
/*</style>*/

使用HTML5新增的一些带语义元素

header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题

这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局：

demo2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>杂志和报纸样式示例</title>
    <link rel="stylesheet" type="text/css" href="../resource/styles/杂志和报纸-html5.css"/>
</head>
<body>

<header>
    <h1>城市展览</h1>
</header>

<nav>
    伦敦<br/>
    巴黎<br/>
    东京<br/>
</nav>

<section>
    <h1>London</h1>
    <p>
        伦敦在英国.
    </p>
    <p>巴黎在法国</p>
    <p>东京有东京热</p>
</section>

<footer>
    Copyright <a href="https://lamirs.vercel.app/" style="color: white;" target="_blank">Visit Lamirs ❤</a>
</footer>

</body>
</html>

对应的css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
header {
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px;
}

nav {
    line-height: 30;
    background-color: #eeeeee;
    height: 300px;
    width: 100px;
    float: left;
    padding: 5px;
}

section {
    width: 350px;
    float: left;
    padding: 10px;
}

footer {
    background-color: black;
    color: white;
    clear: both;
    padding: 5px;
    text-align: center;
}

HTML-响应式设计

  • RWD 指的是响应式 Web 设计（Responsive Web Design）
  • RWD 能够以可变尺寸传递网页
  • RWD 对于平板和移动设备是必需的

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

创建响应式设计的一个方法，是自己来创建它：

响应式布局原理-demo.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式原理</title>
	<style>
		/*div的公用样式*/
		div{
			height: 50px;
		}
		/*当屏幕宽度最大值不能超过400px*/
		@media all and (max-width: 400px) {
			div {
				width: 100%;
				background-color:red;
			}
		}
		/*当屏幕宽度在400px~700px之间*/
		@media all and (min-width: 400px) and (max-width: 700px) {
			div {
				width: 50%;
				background-color:yellow;
			}
		}
		/*当屏幕宽度不小于700px*/
		@media all and (min-width: 700px)  {
			div {
				width: 20%;
				background-color:blue;
			}
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

响应式设计,是指能自适应各种屏幕大小不一设备的一种设置。

先说一下响应式的原理，主要使用了CSS3的@media查询，上面面这段代码并没有使用bootstrap,调整浏览器宽度大小，他会在不同窗口宽度下展现出不同效果。另一个创建响应式设计的方法，是使用现成的 CSS 框架。

@media查询设备的一个固定用法，后面一般接all（所有设备）或者screen（电脑屏幕，平板电脑，智能手机等），后面的and可以增加一下判断的条件。看注释就能基本明白响应式原理，其实并不难，响应式并不是什么特别高大上的东西。

使用 Bootstrap

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机

读到这里,你可能已经开始百度去了解bootstrap以及响应式布局到底是什么,这里推荐一下我找到的两个优质结果

起步页是了解一个框架的入口，bootstrap的起步页面让这个简易的框架对看起来并不简易，对新手也不友好。或许下面这个对你会有点帮助。

bootstrap-demo.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>bootstrap起步</title>
</head>
<body>
<button type="button" class="btn btn-success">hello world</button>
</body>
</html>

注：直接复制黏贴进一个html文件保存打开可以直接看到效果。用了CDN链接引用的是网上的bootstrap文件，无需下载。当然你也可以使用自己下载的bootstrap文件。

你会看到左上角有一个hello world 绿色按钮，说明你已经成功调用bootstrap。你并不需要写style样式只需要在html标签写一些class，因为一切样式都写在bootstrap(.min).css文件里面等着你去调用。这是bootstrap最大的特点。可能新手会习惯于先写HTML，再根据html结构写style，不习惯先考虑封装好的CSS,根据CSS结构结合HTML来写代码。但我相信这个应该不难。

有基础还可以的人基本就可以看着文档自己开工了。多数你还不能区分下面几条样式的区别。

选择器之间有个空格

1
.btn .btn-success{....}

选择器之间有逗号

1
.btn,.btn-success{....}

选择器挨在一起

1
.btn.btn-success{....}

建议你去读一下网易NEC规范的CSS规范篇，花一天时间全部读完，回过头基本就能使用bootstrap。当然里面有些东西不一定适用（甚至有些是我讨厌的。）但在新手可以完全照做，没毛病。或许有一天你也能根据自己情况跟别人吐槽一下这个规范。

bootstrap深入

主要是关于bootstrap版本的响应式栅栏系统。

Pasted image 20210217204900.png

详细请见:

bootstrap-demo2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
    <div class="jumbotron">
        <h1>W3School Demo</h1>
        <p>Resize this responsive page!</p>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h2>London</h2>
            <p>London is the capital city of England.</p>
            <p>It is the most populous city in the United Kingdom,
                with a metropolitan area of over 13 million inhabitants.</p>
        </div>
        <div class="col-md-4">
            <h2>Paris</h2>
            <p>Paris is the capital and most populous city of France.</p>
        </div>
        <div class="col-md-4">
            <h2>Tokyo</h2>
            <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
                and the most populous metropolitan area in the world.</p>
        </div>
    </div>
</div>

</body>
</html>

关于bootstrap的介绍内容了解到这里已经可以了.

学习资源汇总