HTML Website Web CSS JavaScript

Web Notes

Web端相关的笔记

Posted by Ryan Yim on 2022-03-27
Estimated Reading Time 9 Minutes
Words 1.9k In Total
Viewed Times

HTML Notes

基础

HTML 标签

结构：

<标签名 属性=值>内容<标签结尾>

Web前端开发：

HTML：网页框架结构

CSS：网页样式呈现

JS：网页交互性操作

标题：h1~h6

1
2
3
4
5
6
7
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
正文

段内换行：br

1
2
3
<p>
    你<br />好
</p>

段内分组：span

1
2
3
4
5
6
7
8
9
10
11
<!--这里是CSS，设置span标签样式-->
<style type="text/css">
span{
		color: red;
		font-weight: bold;
}
</style>

<div style="font-size: 25px; font-weight: bold; width: 100%; text-align: center;">
      动物检疫合格证明(<span id="LabCertified" style="font-size:15px;">动物B</span>)
</div>

段落：p

1
2
3
4
5
6
7
8
9
<p>
    一段
</p>
<p>
    一<br/>段
</p>
<p>
    又一段
</p>

预留格式：pre

1
2
3
4
5
6
7
<p>
		<pre>
		这里是预留格式
		空                     格
		和空行都辉显示
		</pre>
</p>

水平线：hr

1
2
3
4
5
<p>
		水平线上
		<hr/> 
		水平线下
</p>

空字符：&nbsp;

1
2
3
<p>
    你&nbsp;&nbsp;好
</p>

注释：<!-- 注释 -->

1
2
<!--注释
可以多行-->

超链接：a

1
2
3
4
5
6
<p>
	<a href="https://www.baidu.com" name="a" class="test_href" lang="zh" title=" 超链接">超链接 -> 百度</a>
    <a href="#">
        这个是虚拟超链接
    </a>
</p>

图片格式：img

1
<img src="https://i0.hdslb.com/bfs/face/4ee6bd844bd34b0e2a822f2e8ba5a9b28c004a69.jpg@96w_96h_1c.jpg">

区域标签：div

1
2
3
4
5
6
<div align="center">
		<h1> 前端开发1</h1>
</div>
<div align="left">
		左边
</div>

列表：ul、ol;li

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
	<div align="center">
		<h1> 前端开发1</h1>
		<ul>
			<li>ul-li是无序列表</li>
			<li>ul-li是无序列表</li>
			<li>ul-li是无序列表</li>
			<li>ul-li是无序列表</li>
		</ul>
		<ol>
			<li>ol-li是有序列表</li>
			<li>ol-li是有序列表</li>
			<li>ol-li是有序列表</li>
			<li>ol-li是有序列表</li>
		</ol>
	</div>
</body>

表格：table;th,tr、td

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
<body>
	<div align="center">
		<h1> 前端开发1</h1>
		<table>无边框表格
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<td>33</td>
			</tr>
		</table>
		<table border="13">有边框表格
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<td>33</td>
			</tr>
		</table>
        <table border="2">有表头、边框表格
			<th>H1</th>
			<th>H2</th>
			<th>H3</th>
			<th>H4</th>			
			<tr>
				<th>H2</th>
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr>
				<th>H3</th>
				<td>21</td>
				<th>22</th>
				<td>23</td>
			</tr>
			<tr>
				<th>H4</th>
				<td>31</td>
				<td>32</td>
				<td>33</td>
			</tr>
		</table>
	</div>
</body>

表单：Form;input、select、textarea

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
<body>
	<div align="center">
		<h1> 表单与表单元素</h1>
		<form action="这里是负责数据处理的网页(后端)">
			输入框
			<input type="text">
			密码			
			<input type="password">
			<input type="submit" value="提交">
			<input type="reset">
			<p>
				<input type="radio" checked="True" name="same">是
				<input type="radio" name="same">否
				<input type="checkbox" value="0" checked="1">选择
			</p>
			<input type="button" value="按钮">
			<input type="color">
			<input type="file">
			<p>
				下拉标签
				<form>
					<select>
						<option>0</option>
						<option>2130</option>
						<option>13</option>
						<option>2312</option>
						<option selected="selected">1</option>
					</select>
				</form>
			</p>
			<p>文本输入框
				<textarea rows="4" cols="20">默认的文本</textarea>
			</p>
		</form>
	</div>
</body>

表单的ID、VALUE、NAME

一般id是唯一性的，唯一可以定位到这个元素，主要在js的document.getElementById()使用。

name可以不唯一不是所有的元素都有name，只有表单元素有。主要用来提交表单数据给后端。通过js的document.【form表单名字】.【元素文本框名称name】.value来获取文本框值。

value就是要传给后端的值。

其他

(待补充)

CSS Notes

一键添加哀悼功能——网页黑白特效

参考:

https://blog.51cto.com/u_15072903/4323602

https://www.jianshu.com/p/df491af5749b

在HTML“body”节点添加style="-webkit-filter: grayscale(100%);"，或者在CSS文件中编辑亦可。

Java Script

(待补充)

克隆网站

wget -p -k -r -l 5 https://jitsi.github.io/handbook/

你可以使用 wget 命令来下载网页。以下是如何下载网页的步骤：

1. 使用 wget 下载网页

要下载某个网页的内容，可以在终端中输入以下命令：

1
wget <网页的URL>

例如，要下载一个网页到本地：

1
wget https://example.com

这将下载网页的 HTML 文件，并保存为 index.html。

2. 下载网页及其资源（如图片、CSS等）

如果你想下载网页及其所有相关的资源（如图片、CSS 文件、JavaScript 等），可以使用 -p 参数：

1
wget -p <网页的URL>

例如：

1
wget -p https://example.com

这将会下载网页以及它所需要的所有外部资源，使得本地查看时能看到完整的页面。

3. 下载整个网站

如果你需要下载整个网站，可以使用 -r 参数（递归下载）：

1
wget -r <网站的URL>

例如：

1
wget -r https://example.com

这会递归地下载整个网站，但需要注意，网站越大，下载时间越长。

4. 下载网页并将其转换为本地文件链接

如果你需要将网页中的外部链接（如图片或 CSS 文件）转换为本地链接（适合离线查看），可以使用 -k 参数：

1
wget -p -k <网页的URL>

这将下载网页及其资源，并将链接转换为本地链接，方便离线查看。

5. 下载并指定保存文件名

如果你想指定文件名，可以使用 -O 选项：

1
wget -O mypage.html <网页的URL>

例如：

1
wget -O mypage.html https://example.com

这将网页保存为 mypage.html。

6. 递归下载限制深度

如果你递归下载时希望限制下载深度（避免下载太多层），可以使用 -l 参数限制递归深度：

1
wget -r -l 1 <网站的URL>

-l 1 表示只下载1层链接。

通过这些命令，你可以下载网页内容到本地，方便后续的翻译或其他操作。如果你有特定网页需要帮助下载，可以告诉我，我会进一步帮助你！

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

FEATURED TAGS
HTML Website Web CSS JavaScript
FRIENDS
ESC