啊丘的博客
0%

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
<!DOCTYPE html>		<!---声明，html5的声明，不需要写成html5--->

<html>		<!---html文件页面的标记--->

<head>		<!---源代码文件的头，用来放配置的--->
	<title>我的页面</title>		<!---页面标题--->
	<meta charset="utf-8">		<!---建议此格式=范围广，编码格式utf-8是国标码--->
</head>
<!---html只是告诉浏览器里面有什么内容，而不是什么样子，样子交给css--->

<body>		<!---放正文--->

<hgroup><!---告诉浏览器形成 结构图 的 树状结构--->
<h1>第一章</h1><!---自动分行了，所以正文标题可以不用再加br了--->
<h2>2022.8.3 星期三</h2>
</hgroup>

Friendship is an umbrella of two figure, is a table on the two pairs of eyes;
Friendship is like a curvved warm harbor, quietly to soothe tired sailing; Friendship is crossing the sea,
Sometimes silence, their <wbr>respective</wbr>; From time to time to  on a park bench, or
The <abbr title="Unidentified Flying Object">UFO</abbr> is fancy.

我爱学习，学习爱我！
<p><!---表示一个段落，段落前后自动空出一行，但它的作用并不是为了分行分行的作用是br--->
我也爱学习，但是学习好像不爱我！<br/><!---分行，原型是br/但是可以不加斜杠，按照传统因为它没有结束的slash，所以为了好看就给它加，但现在可以不加了--->
哈哈哈！
</p>
<p>
	<b>bold</b> other <b>加S粗</b> 其他<br>
	<i>italic</i> other <i>斜体</i> 其他<br>
	嵌套【加粗＋斜体】<br>
	<i>斜体包含 <b>粗体</b> <b>Happy</b> other </i><br>
	<b>粗体包含 <i>斜体</i> <i>Happy</i> other </b><br>
	打字机字体The <tt>function</tt> for tt 等宽的西文字体，西方文字<br>
	The <small>function</small> for small 中文会比较<small>明显</small> <br>
	以上要想实现这些视觉效果，我们应该用CSS而不是以来html的样式表达<br>
	<del>删除线</del> <ins>修改后的文字,删除后新加进来的东西</ins> <br>
	del并不是告诉浏览器要在中间加删除线，ins也没有说加下划线，del只是表示把这个东西删掉了，ins表示删掉后新加进来的东西，至于浏览器如何表达这两个样式，是浏览器决定的<br>
	<s>不被提倡用的</s>区别于删除del,可能表现出来是一样，但是其内部的意义是不一样的，不能因为需要这个样子而乱用<br>
	<u>下划线u在html5去掉了，因为u是没有意义的，区别于ins，因为ins是有意义的</u><br>
</p>

<p>
	公式中的上标和下标在html5被保留下来的有sup上和sub下：<br>
	x<sup>2</sup>+b<sub>0</sub>=y 可嵌套<br>
	
	在HTML5中新加的特别强调mark<br>
	<mark>特别强调</mark><br>
</p>

<p id="here">
超人
</p>

<p>
	在内容上面可以表达一些样式，但是更多的是表达内容：<br>
	<em>强调em</em><br>
	<strong>strong着重</strong><br>
	<dfn>definition定义</dfn><br>
	<code>code代码,英文字体中作用更加明显，在一行里面表达源代码，带式不是大段的代码，大段的代码有别的方法</code><br>
	<samp>samp例子代码</samp><br>
	不用纠结【代码】和【例子代码】因为在浏览器中可能CSS对这两个会有不同的样式，不必纠结<br>
	<hr width="50%"><!---这里的双引号在html5中可以去掉，不强调一定要用，width属性也是有/无可选的--->
	
	<kbd>kbd用户输入</kbd><br>
	<var>variable变量</var><br>
	<cite>cite引用</cite><br>
	短语样式，不会引起换行,以上样式可能表现相同，但是它们的内部在浏览器会被当作不同的东西处理<br>
</p>

<address><!---地址--->
<blockquote><!---内容被缩进,可嵌套--->
广东省 广州市<br>
红花岗 408<br>
</blockquote>
</address>

<q>
广东省 广州市
</q><!---小引用“双引号的效果”--->

<pre><!---预格式化,在html文件里面什么样就原原本本地被显示出来--->
int main()
{
	printf("Hello!");
	return 0;
}
</pre>
<hr width=50>
线一
<hr width="50%">
线二
<hr width="50%" align="left" size="10"><!---size是表示线的粗/细--->
<!---这些属性现在更倾向于用CSS样式表来做--->
<!---曾经有一个阶段要求这些属性后面的值都要加上双引号，无论是数值还是字符串，在html5后这不是强制的要求--->
线三<br>
<code><!---区别于pre的效果，code是在一整行的--->
int main()
{
	printf("Hello");
	return 0;
}
</code><br>
<abbr title="中华人民共和国">PRC</abbr><!---缩写，并且当鼠标放在其上方时，会出现悬浮的title标签--->
<!---实际上，title在p和h1也可以做这个事情,好吧，其实html所有的这些标签都可以加上title产生悬浮标签--->
<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
<p><bdo dir="rtl">该段落文字<bdi>从右到左</bdi>显示。</bdo></p>
<!---bdo里面的dir方向可以指定文字from right to lift，而颠倒过来的文字中加入bdi可以回复原来从右到左的顺序--->

<!---若想显示：【a<2】，应该注意【<】，换成【&lt;】=【less than小于】，注意前面的& 后面的英文分号一定要有--->
a&lt;2	<br>
<!---若想显示：【a>2】，应该注意【>】，换成【&gt;】=【greater than小于】，注意前面的& 后面的英文分号一定要有--->
a&gt;2	<br>
<!-- 如果想表达【&】本身，可以用【&amp;】 -->
&amp;	<br>
<!-- 如果想用空格则可以用【&nbsp;】=【not breakable space不可打断的空格，也就是将空格前后的内容连接起来的特殊空格】 -->
dadasdadasdasdassssssssssssssssssssssssssssssfffsdfsdfsdfsdfsdfsdfsdfsdfs好好学习100&nbsp;km天天向上<br>
<!---无论窗口怎么缩小，100和后面单位km都不会被分开，只会保持着【100 km】一整块移动--->

<!-- 如果想表达姓氏吕拼音lU带点的，可以用【小写&uuml;】【大写&Uuml;】 -->
吕布L&uuml;B&uuml;	大写B&Uuml;	<br>
<hr>

<!---列表，无论是有序号还是没有序号，都可以嵌套--->
<ul>
	<li>红茶</li>
	<li>咖啡</li>
	<li>可乐</li>
</ul>
<ol start=2><!---start是可选的，有/无 都可以，可以指定排序从哪个数字开始--->
	<li>红茶</li>
	<li>咖啡</li>
	<li>可乐</li>
</ol>

<dl><!---要解释的词条左边顶格，解释它的内容下一行缩进：整体看起来像是列表--->
	<dt>方糖</dt>
	<dd>方的糖，甜的</dd>
	<dd>晶状体</dd>
</dl>
<!---对于html来说一张图片是一个字符，html是一种排版语言--->
<p><!---如果不加其他的属性，图片将以原来的大小显示--->
<!-- alt是在图片未完全加载或者加载过程中，先在页面显示对应位置显示出来的该图片的文字说明 -->
<img src="壁纸.jpg"  alt="壁纸" width="200" height="200"/>
<!---现在这个不指定路径是默认和html文件同一个根目录--->

<img src="https://secretcode2022.github.io/images/profile-picture.jpg" width="200"/>
</p>
<!-- 【图片和文字 的关系】在html5后，都留到了CSS -->
<iframe src="http://news.163.com" width=400 height="400"></iframe>
<br>
<!-- 中间出现的文字或者图片代表着超链接 -->
<a href="http://news.163.com">网易新闻</a><!-- 覆盖当前网页标签打开超链接 -->
<!-- 浏览器决定样式 -->
<br>

<!-- 如果href里面的链接没有http之类的协议开头的，那么该超链接会被认为是html同根目录下的一个名字为“该超链接”名字的文件 -->
<a href="news.163.com">网易新闻</a><!-- 所以如果想引用外面的链接，一定要记得加协议头 -->
<br>


<!-- 在51行有一个标记，名字叫：超人 -->
<a href="#here">跳到”超人“所在位置</a>
<br>

<a href="新html的超人.html#here">新超人</a>
<br>
<!-- 绝大多数的表达结构的标签都可以放 id作为标记跳转 -->

<a href="http://news.163.com" target=_blank>在新标签页打开网易新闻=该超链接</a>

<!-- URL = uniform resource locator = 统一资源定位器 -->
<!-- href = hypertext reference = 超链接目标的URL -->
<!-- 一度曾经很流行的标记 --><!-- rectangular矩形 --><!-- coordinate -> coords 坐标-->

<img src="壁纸.jpg" width="100" height=100 usemap="#map" /><!-- 我们要在这个图上建立一个映射/地图：地图名字叫做map -->
<map name="map">
<!-- coords左上角到右下角；或者是球心的坐标和半径 -->
	<area shape="rect" coords="0,0,50,50" href="http://news.163.com" alt="news" />
	<area shape="circle" coords="75,75,25" href="http://www.news.163.com" alt="home" />
</map>

<p>	<!-- 表格 --><!-- 再次强调：显示成什么样子，呈现出来的样式，不由html来管，交给CSS来处理 -->
<!-- 整一个table也被当作一个字符，其他文字会在表格的上面和下面，整一个表格一大行-->
	<table border="1">
		<caption>表格</caption>	<!-- 表头标题 -->
		<thead><!-- 包围起来的是表头，区别于th=针对表格本身，thead=针对浏览器识别 -->
		<tr>
			<th>水果</th>	<!-- 表头 -->
			<th>价格</th>
			<th>大/中/小</th>
		<tr/>
		</thead>
		
		<tbody>
		<tr>	<!-- 一行 -->
			<td>苹果</td> <!-- 单元格里面的内容 -->
			<td>10元</td>
			<td>大</td>
		</tr>
		
		<tr>
			<td colspan="3">好吃的</td>	<!-- colspan：合并单元格，指定一个格子占3个长度的单元格 -->
			<!-- <td></td>
			<td></td> -->
		</tr>
		</tbody>	<!-- 表格的主要内容 -->
		
		<tfoot>		<!-- 在表格单元格最后一行进行脚注说明 -->
			<tr>
				<td>脚注1</td>
				<td>脚注1</td>
				<td>脚注1</td>
			</tr>
		<tfoot/>
		
	</table>

</p>

</body>
</html><!---开头对应的结尾slash --->

以下是显示效果

点击跳转浏览展示

请博主喝杯奶茶！

欢迎关注我的其它发布渠道