-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHTML_note.html
274 lines (223 loc) · 11.3 KB
/
HTML_note.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
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML note</title>
</head>
<body style="background-color:#E6E6FA">
<!-- 标题(h1~h6) -->
<h1 style="text-align:center">h1 标题</h1>
<hr/>
<h2 style="text-align:justify">h2 标题</h2>
<h3 style="text-align:left">h3 标题</h3>
<h4 style="text-align:right">h4 标题</h4>
<h5>h5 标题</h5>
<h6>h6 标题</h6>
<!-- 段落(p,br) -->
<p>这是第一段</p>
<p>这是第二段,这个很长,在这里换行<br/>
换行后
</p>
<!--在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。-->
<!--即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。-->
<!--html属性-->
<a href="https://www.baidu.com/">这是一个链接</a>
<!--html样式-->
<h2 style="background-color:#5068ff">设置了样式颜色的标题</h2>
<p style="background-color:green">设置了样式颜色的段落</p>
<p style="font-family:'Source Code Pro';color:#ff47e1;font-size:20px;">设置了样式字体,颜色及大小的段落</p>
<!--样式用;分割-->
<!--style 替代了 align,bgcolor,font-->
<!--文本格式化-->
<!--文本格式化标签-->
<b>[航海]</b><em>大船可以去远处探险，而小船不应该远离海岸。</em>
<small>------</small>
<strong>本杰明 富兰克林</strong>
<p style="font-family:'Source Code Pro';color:#ff47e1;"> x<sup>2</sup> +
<ins>y<sup>2</sup></ins>
=
<del>z<sup>2</sup></del>
</p>
<!--“计算机输出”标签-->
<code> f(n) = f(n-1) + f(n-2)</code><br/>
<var>int s;</var><br/>
<!--引用、引用和术语定义-->
<!--http://www.w3school.com.cn/html/html_formatting.asp-->
<!--http://www.w3school.com.cn/html/html_quotation_elements.asp-->
<!--HTML 链接-->
<a href="#tips">指向锚点</a><br/>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
<a name="tips">这是一个锚点</a><br/>
<!--HTML图片-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552889033535&di=6cc00ea5017ebb5ef4328fc99cd111e0&imgtype=0&src=http%3A%2F%2Fi3.sinaimg.cn%2Fgm%2Fcr%2F2013%2F0910%2F1187401620.jpg"
alt="Big Boat"/>
<!--更多实例-->
<!--http://www.w3school.com.cn/html/html_images.asp-->
<!--html表格-->
<table border="1" summary="test">
<!--每一行tr分割-->
<tr> <!--表头-->
<th>Heading</th><!--表头的每一列用th分割-->
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td><!--每一行的每一列用td分割-->
<td>row 1, cell 2</td>
</tr>
<tr> <!--表头-->
<th>Heading</th><!--表头的每一列用th分割-->
<th>Another Heading</th>
</tr>
<tr>
<td> </td><!--空白占位符-->
<td>row 2, cell 2</td>
</tr>
</table>
<!--html邮件-->
<a href="mailto:[email protected]" subject="观了不起的盖茨比有感" &body="你好，对此评论有些想法">对此影评有何感想，发送邮件给我</a>
<!--基础知识学习-->
<!--https://www.imooc.com/learn/9-->
<!--文本域-->
<form action="save.php" method="post">
<label>个人简介：</label>
<textarea cols="50" rows="10">在这里输入内容...</textarea>
<input type="submit" value="确定" name="submit"/>
<input type="reset" value="重置" name="reset"/>
</form>
<!--表格,控件,单选,复选框,label-->
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male"/>
<br/>
<label for="female">女</label>
<input type="radio" name="gender" id="female"/>
<br/>
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
<!--复选-->
<form method="post" action="save.js">
你对什么运动感兴趣<br/>
<label>慢跑<input type="checkbox" name="run"></label><br/>
<label>登山<input type="checkbox" name="mount"></label><br/>
<label>篮球<input type="checkbox" name="basketball"></label><br/>
<input type="submit" value="确定" name="submit"/>
<input type="reset" value="重置" name="reset"/>
</form>
<link href="style.css" rel="stylesheet" type="text/css"/>
<p>慕课网，<span class="myclass">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；
<span>服务及时贴心</span>，内容专业、<span id="myid">有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
<hr/>
<!--子选择器-->
<!--即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：-->
<p class="first">三年级时，<span>我还<span>是</span>一个</span>胆小如鼠<span>的小女孩</span>，上课从来不敢回答老师提出的问题，
生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--<!–子选择器只包含第一个后代–> 第一代的后代会默认集成第一代的样式-->
<!--包含选择器包含所有的后台-->
<!--<可以通过包含选择器来指定第二代 第三代的样式>-->
<!--# reference https://www.imooc.com/qadetail/278849-->
<style type="text/css">
.first span {
border: 1px solid red;
}
.first span span {
border: 1px solid blue;
}
/*通用选择器，匹配所有标签*/
/* * {color:red;} */
/* 伪类选择器 */
/* 为鼠标滑过a表情设置样式 */
a:hover {
color: red;
font-size: 20px;
}
/*:hover 选择器用于选择鼠标指针浮动在上面的元素。*/
/*提示：:hover 选择器可用于所有元素，不只是链接。*/
/*提示：*/
/*:link 选择器设置指向未被访问页面的链接的样式，*/
/*:visited 选择器用于设置指向已被访问的页面的链接，*/
/*:active 选择器用于活动链接。*/
/*注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。*/
/*分组选择符*/
/*为多个标签赋予同样的样式*/
/*h1,span{color:red;}*/
/*等同于*/
/*h1{color:red;}*/
/*span{color:red;}*/
</style>
<p class="first">三年级时，<span>我<span>是</span>是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，
生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--元素分类-->
<!--在讲解CSS布局之前，我们需要提前知道一些知识，-->
<!--在CSS中，html中的标签元素大体被分为三种不同的类型：-->
<!--块状元素、内联元素(又叫行内元素)和内联块状元素。-->
<!--常用的块状元素有：-->
<!--<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>-->
<!--1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）-->
<!--2、元素的高度、宽度、行高以及顶和底边距都可设置。-->
<!--3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。-->
<!--常用的内联元素有：-->
<!--<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>-->
<!--元素分类--内联元素
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）
（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，
从而使 div 元素具有内联元素特点。
div{
display:inline;
}
......
-->
<!--内联元素特点：-->
<!--1、和其他元素都在一行上；-->
<!--2、元素的高度、宽度及顶部和底部边距不可设置；-->
<!--3、元素的宽度就是它包含的文字或图片的宽度，不可改变。-->
<!--小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，-->
<!--常用的内联块状元素有：-->
<!--<img>、<input>-->
<!--内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，-->
<!--代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。-->
<!--inline-block 元素特点：-->
<!--1、和其他元素都在一行上；-->
<!--2、元素的高度、宽度、行高以及顶和底边距都可设置。-->
<!--css布局模型-->
<!--清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。-->
<!--布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，-->
<!--又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。-->
<!--CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。-->
<!--在网页中，元素有三种布局模型：-->
<!--1、流动模型（Flow）-->
<!--2、浮动模型 (Float)-->
<!--3、层模型（Layer）-->
<!--先来说一说流动模型，流动（Flow）是默认的网页布局模式。-->
<!--也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。-->
<!--流动布局模型具有2个比较典型的特征：-->
<p>流动模型;自上而下按顺序垂直延伸分布</p>
<!--第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。-->
<!--实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。-->
<!--第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。-->
<!--
浮动模型
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img
等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
-->
<!--什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，-->
<!--每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。-->
<!--但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。-->
<!--如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。-->
<!--CSS定义了一组定位（positioning）属性来支持层布局模型。-->
<!--层模型有三种形式：-->
<!--1、绝对定位(position: absolute)-->
<!--2、相对定位(position: relative)-->
<!--3、固定定位(position: fixed)-->
</body>
</html>