Note

December 14, 2024

HTML学习笔记

0. HTML 综述

What is HTML？

HTML(Hyper Text Markup Language)：超文本标记语言
维护：万维网联盟（W3C）
扩展名：.html/.htm
用途：用于网页创建和其他在网页浏览器中看到的信息设计的一种标记语言

1. HTML 基础框架

1.0 HTML 初始标记

1
2
3

<html>
	/* code */
</html>

框架构成：<>,</>

1.1 head & body 标记

<html>
	<head>
		/* code */
	</head>
	<body>
		Hello World！
		/* code */
	</body>
</html>

<head></head> 头文件标记：表示声明配置选项，包括html源代码文件的头文件，用于告诉html该文件内包含哪些配置项、配置表等。

<body></body> 标记：表示声明网站主体显示内容

1.2 title 标记

<html>
	<head>
		<title>MetaMask</title>
	</head>
</html>

<title></title> 标记：设置网页标签标题

1.3 meta charset 声明编码类型

<html>
	<head>
		<title>MetaMask</title>
		<meta charset=uft-8>
	</head>
</html>

<meta charset=utf-8> 标记：声明 Unicode 编码 utf-8

1.4 !DOCTYPE 声明HTML规范

<!DOCTYPE html>
<html>
	<head>
		<title>MetaMask</title>
		<meta charset=uft-8>
	</head>
</html>

标记：声明遵循HTML5的规则

2. HTML字符标记

2.0 paragraph & word-break 段落标记

<!DOCTYPE html>
<html>
	<head>
		<title>Hello</title>
		<meta charset=uft-8>
	</head>
	<body>
		第一章：什么是Spark Lab
		2024年12月14日
		<p>
			Mission over opportunity is one of Spark Lab’s values, refusing to be an opportunist and mission-driven entrepreneurship.
			Because we find that the most successful founders are motivated by an interest in what they are building, not money.
			So we built this **<wbr>**tempo-rary**</wbr>** “city” that was both a refuge and a utopia. Pure, this is a place that accepts you unconditionally, and no one here laughs at your dreams.
			The best people get together, hack together, explore, create, discover, and let creation happen 10x faster.
			In this space, we take off our labels, put down our ego, escape from external pressure, and begin to explore within. Find and ignite your own Spark through entrepreneurial projects.
			Someone asked: "Have you found yourself these days?"
			I replied, "No, I just lost myself."
			Finding yourself is a lifelong matter,
			Here is a fresh start.
		</p>
	</body>
</html>

<p></p>标记：声明分段的段落标记，不同的p标签分隔的每个段落之间有空行

<wbr></wbr>标记：word-break标记，声明在段落标记中的某一个单词可以被拆分成两部分显示

2.1 break-up 分行标记

<!DOCTYPE html>
<html>
	<head>
		<title>Hello</title>
		<meta charset=uft-8>
	</head>
	<body>
		第一章：什么是Spark Lab<br>
		2024年12月14日
		<p>
			最聪明、最有潜力、最出格的年轻人，我们应该做些什么？年轻人的 Passion 应该投入到哪里？
			我们出生在最浪漫的黄金年代，却很少被鼓励创新。我们被社会齿轮困在既定轨道上，却不敢逃离这一成不变。
			这不仅关乎个人命运，更关乎人类文明的延续。
			人类的历史就是不断创造发明那些“后代会认为理所应当且很快过时的先进科技”。
			而今天，世界的疯狂还在等待我们的进步。
		</p>		
		<p>
			难道没有很棒的年轻华人创业者吗？当然不是.
			我们看到了越来越多这样的年轻人，包括 AdventureX 的 Founder @Ryan Zhu，他们散落在全球各地，有的还只是初中，但是从他们的身上我们看到了未来。
			我想，如果只是遵从纯理性的传统教育，我们很可能无法释放人类的全部潜力。我想，我们应该为这些年轻人和人类文明做点什么。
			于是，我们创立了 Spark Lab。
		</p>
	</body>
</html>

<br>标记：无结束标记，所以也可写作 <br /> , 用于在该标记后插入一个空行

2.2 hx & hgroup 标题标记

<!DOCTYPE html>
<html>
	<head>
		<title>Hello</title>
		<meta charset=uft-8>
	</head>
	<body>
		<hgroup>
		<h1>第一章：什么是Spark Lab**</h1>
		<h2>2024年12月14日</h2>
		</hgroup>
		<p>
			最聪明、最有潜力、最出格的年轻人，我们应该做些什么？年轻人的 Passion 应该投入到哪里？
			我们出生在最浪漫的黄金年代，却很少被鼓励创新。我们被社会齿轮困在既定轨道上，却不敢逃离这一成不变。
			这不仅关乎个人命运，更关乎人类文明的延续。
			人类的历史就是不断创造发明那些“后代会认为理所应当且很快过时的先进科技”。
			而今天，世界的疯狂还在等待我们的进步。
		</p>		
		<p>
			难道没有很棒的年轻华人创业者吗？当然不是.
			我们看到了越来越多这样的年轻人，包括 AdventureX 的 Founder @Ryan Zhu，他们散落在全球各地，有的还只是初中，但是从他们的身上我们看到了未来。
			我想，如果只是遵从纯理性的传统教育，我们很可能无法释放人类的全部潜力。我想，我们应该为这些年轻人和人类文明做点什么。
			于是，我们创立了 Spark Lab。
		</p>
	</body>
</html>

<h1></h1>标记：声明标题以及标题大小(第一级标题)，自动独立成一行，不需要加入 <br> 标记。

此外有<h2></h2>, <h3></h3>, <h4></h4>,…

<hgroup></hgroup> 标记：声明连续的标题标记，建立标题标记组。

2.3 bold & italic 字符样式标记

1 2	<b>这段文本会被加粗</b> <i>这段文本会变成斜体</i>

<b></b> 标记：bold 标签，表示加粗。

<i></i> 标记：italic 斜体标签，表示斜体。

2.4 del-ins 删改标记

1	<del>~~删改前~~</del><ins>删改后</ins>

<del></del> 标记：声明标记内的内容为删除的文本，有删改符显示。

<ins></ins> 标记：声明标记内的内容为删改后的文本，有下划线显示

2.5 mark 强调标记

1	<mark>Spark Lab</mark>

<mark></mark> 标记：高亮显示

2.6 其他标记

<s> /* 这段文本会在中间显示一条横线（表示内容过时） */ </s>
<small> /* 这段文本会被缩小 */ </small>
<sup> /* 上标符号 */ </sup>
<sub> /* 下表符号 */ </sub>
<em> /* emphasize 强调标记 */ </em>
<strong> /* strong 着重标记 */ </strong>
<dfn> /* definition 定义标记 */ </dfn>
<code> /* code 代码标记 */ </code>
<samp> /* sample 例子代码 */ </samp>
<kbd> /* keyboard表示用户输入 */ </kbd>
<var> /* variable 变量 */</var>
<cite> /* cite引用 */ </cite>

注以上HTML的样式标记是一种结构声明，而非单纯的表达样式。

3. HTML 特殊格式与属性

3.0 address & blockquote & quote 标记

<address>
	<blockquote>
	Rm 401 CKP West Wing<br>
	<q>
	玉泉 Camps<br>
	</q>
	浙江 U<br>
	<blockquote>
</address>

<address></address> 标记：用于声明其文本内容为地址，可以用<br>换行。

<blockquote></blockquote> 标记：用于声明其文本内容需要缩进，且可以嵌套。

<q></q> 标记：用于声明文本内容添加小缩进/小引用。

3.1 preformatted 预格式化标记

<code>
	<pre>
		# include <stdio.h>
		int main(void) {
			printf("Hello, world!\\n")
			return 0;
		}
	</pre>
</code>

<pre></pre> 标记：预格式化标记，不做文本内容的格式化，完全按原文本内容格式展现。

3.2 horizontal line 标记

<body>
	<h1>Hello World</h1>
	**<hr>**
	<h2>coding...</h2>
</body>

<hr> 标记：horizontal line 为该标签后面添加一条水平分割线。

3.3 HTML 标记属性

width 宽度属性

1 2	<hr width=50%> /* 相对浏览器宽度的50% / <hr width=50> / 宽度为50px */

align 对齐属性

1 2	<hr align=left> /* 元素左对齐 / <hr align=right> / 元素右对齐 */

size 大小属性

1	<hr size=1> /* 大小设置 */

abbr 注解属性

1 2	<abbr title="美利坚合众国">USA</abbr> /* 添加内容注解 */

direction 方向属性 (right-to-left or left-to-right)

<bdo dir=rtl>Helloworld</bdo>
/* 输出 dlrowolleH */

<bdo dir=rtl> <bdi>Helloworld</bdi></bdo>
/* bdi 反转回来：输出 Helloworld */

字符字体

&lt; /* less than表示小于号 < */
&gt; /* greater than 表示大于号 > */
&amp; /* 表示and符号 & */
&nbsp; /* 表示不可打断的空格 */
&uuml; /* 小写元音拼音v */

4. HTML 列表

4.0 unordered list 无序列表

<ul>
	<li>红茶</li>
	<li>咖啡</li>
	<li>可乐</li>
</ul>

<ul></ul> 标记：unordered-list 声明无序列表

<li></li> 标记：list 声明列表元素

4.1 ordered list 有序列表

<ol start=1>
	<li>Step 1</li>
	<li>Step 2</li>
		<ul>
			<li>Option 1</li>
			<li>Option 2</li>
		</ul>
	<li>Step 3</li>
</ol>

<ol></ol> 标记：声明有序列表。

start=1 属性：声明有序列表从索引1开始

列表之间可以相互嵌套

4.2 definition list 定义列表

<dl>
	<dt>HTML</dt>
	<dd>A language for web develop</dd>
</dl>

<dl></dl> 标记：definition list 声明一个定义列表

<dt></dt> 标记 : 声明一个词条

<dd></dd> 标记： 声明一个词条的解释

5. HTML 插入元素

5.0 image 插入图片元素

img 标记：声明一个图片元素

1	<img> /* 可写做 <img /> */

src 属性：图片地址路径

1	<img src="hello.jpg" />

width & height属性

1	<img src="hello.jpg" width=200 height=200>

alt 属性：alternative 可替代属性

1	<img src="hello.jpg" alt="Hello...">

5.1 插入网页元素

iframe 标记：从地址中插入另一个网站内容并显示

1	<iframe src="<https://www.baidu.com>" height=200></iframe>

a 超链接标记: hyper reference (href) 超链接引用属性

1	<a href="<https://www.baidu.com>">百度搜索</a>

超链接 id 跳转属性

/* 同页面跳转 */
<a href="#here">点击跳转到文章所在位置</a>
<p id="here">
	跳转到这个位置
</p>

/* 跨页面跳转 */
<a href="index.html#here">跳转回主页面的文章所在位置</a>
<p id="here">
	index.html的文章所在位置
</p>

超链接 target 属性：设置窗口打开方式

1 2	/* _blank 打开新的窗口 */ <a href="<https://www.baidu.com>" target="_blank">百度搜索</a>

5.2 map 设置地图映射属性

map 映射标记：usemap 建立地图映射属性跳转

<img src="hello.jpg" usemap="#map" />

<map>
	/* 左上角矩形区域内点击跳转 */
	<area shape="rect" coords="0,0,50,50" href="<https://baidu.com>" alt="baidu"/>
	/* 右下角圆形区域内点击跳转 */
	<area shape="circle" coords="75,75,25" href="<https://google.com>" alt="google" />
</map>

6. HTML 表格

6.0 table 表格标记

<table border="1">
	<caption>学生名单</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Gender</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<td>Tab</td>
			<td>19</td>
			<td>Male</td>
		</tr>
		<tr>
			<td colspan="3">Mike</td>
		</tr>
	</tbody>
	
	<tfoot>
		/* 表格脚注 */
	</tfoot>
</table>

<table></table> 标记：声明一个表格
<thead></thead> 标记：识别其内容为表头
<tbody></tbody> 标记：识别其内容为表格体
<tfoot></tfoot> 标记：识别其内容为表格脚注
<caption></caption> 标记：声明一个表格名称
<tr></tr> 标记：table row 表示表格中的一行
<th></th> 标记：table head 声明表头
<td></td> 标记：表示表格一行中的一个格子
border 属性：设置边框线宽度为 1
colspan 延展属性：合并 3 个单元格

About this Post

This post is written by Tab Yang, licensed under CC BY-NC 4.0.

#note #web #html