Yixan.github.io/second.html at master · Yixan/Yixan.github.io · GitHub

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>互联网开发与实践课程学习笔记</title>


</head>
<body>
<div>
<style type="text/css">
*{margin:0;padding:0;}
 ul{
	border:0px solid black;
    padding-left:20px;
   }
ul li{
	background-color:#40E0D0;
	width:200px;
	text-align:center;
	list-style-type: none;
	display:inline-block;
	border:0px solid #20B2AA;
}
</style>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<h1>第二周——前端知识HTML、CSS和JS</h1>
<p1> 	本文是互联网软件开发技术与实践课程学习笔记的第一篇。根据课程要求，本学期我们需要学习：<br />
		1、掌握基础的前端知识（HTML+CSS+JS）<br />
		2、至少掌握一种后端编程语言（NodeJS）<br />
		3、至少掌握一种数据库（MySql）<br />
		4、至少熟练使用一个用于部署Web服务的操作系统（Linux）<br />
		5、掌握基本的网络监控和问题追踪方法<br />
		6、掌握基本的网络安全防护方法。<br />
		7、了解Web服务器的优化常用方法。<br />
</p1>
<hr><h2>前端知识体系</h2>
<p>Web前端技术由html、css和javascript三大部分构成，是一个庞大而复杂的技术体系。关于完整的前端知识体系，这篇博文里讲的比较清楚
<a target="_blank" href="https://blog.csdn.net/hello_world_csdn/article/details/79613926">最实用的web前端开发知识框架图</a><br>
<p/>
<p1><br /></p1>
<p1>html（超文本标记语言）是一种用于创建网页的标准标记语言。我们可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML 不是一种编程语言，而是一种标记语言。标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。HTML 文档包含了HTML 标签及文本内容，
HTML文档也叫做 web 页面。
</p1>

<hr><h2>HTML 网页结构</h2>
<p>下面是一个可视化的HTML页面结构：</p>
<div style="width:99%;border:1px solid grey;padding:3px;margin:0;background-color:#ddd">&lt;html&gt;
<div style="width:90%;border:1px solid grey;padding:3px;margin:20px">&lt;head&gt;
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;title&gt;页面标题&lt;/title&gt;
</div>
&lt;/head&gt;
</div>
<div style="width:90%;border:1px solid grey;padding:3px;margin:20px;background-color:#fff">&lt;body&gt;
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;h1&gt;这是一个标题&lt;/h1&gt;</div>
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;p&gt;这是一个段落。&lt;/p&gt;</div>
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px">&lt;p&gt;这是另外一个段落。&lt;/p&gt;</div>
&lt;/body&gt;
</div>
&lt;/html&gt;
</div><br>

<th style="width:34px"></th>
<td>只有 &lt;body&gt; 区域 (白色部分) 才会在浏览器中显示。</td>

<hr><h2>网页结构解析</h2>
<p>
<ul>
<strong>&lt;!DOCTYPE html&gt;</strong> 声明为 HTML5 文档<br />
<strong>&lt;html&gt;</strong> 元素是 HTML 页面的根元素<br />
<strong>&lt;head&gt;</strong> 元素包含了文档的元（meta）数据，如 <span class="marked">&lt;meta charset="utf-8"&gt;</span> 定义网页编码格式为 <strong>utf-8</strong>。<br />
<strong>&lt;title&gt;</strong> 元素描述了文档的标题<br />
<strong>&lt;body&gt;</strong> 元素包含了可见的页面内容<br />
<strong>&lt;h1&gt;</strong> 元素定义一个大标题<br />
<strong>&lt;p&gt;</strong> 元素定义一个段落<br />
</ul>
<p>

<hr><h2>在HTML中使用CSS样式</h2>
<p>CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.</p>


</body>
</html>