学习笔记｜HTML

本文最后更新于：8 个月前

一、文档第一行

不是 html 标签。
文档类型声明，表示 html 那个版本。

<!doctype html>

二、基本格式

<!docctpye html>
<html>
  <head>
    <meta charset="utf-8">
   	<title>网页标题</title>
  </head>
  <body>
    <!--网页主体内容-->
  </body>
</html>

三、元信息（meta-information）

text/html 告诉浏览器，服务器即将发送的是 html 文件， charset = utf-8" 告诉浏览器，该 html 文件使用字符集为 utf-8。

<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>

四、基本语法

段落

<p></p>
<p align = "left">这是左对齐</p>
<p align = "right">这是右对齐</p>
<p align = "center">这是居中对齐</p>
<p align = "justify">这是两端对齐</p>

改变横线颜色

<!--改变横线颜色-->
<hr color = "red"></hr>
<hr color = "red"/>

<!--改变宽度-->
<hr width = "80%", align = "left"/>

改变宽度

<hr width = "80%", align = "left"/>

改变背景（多个属性，空格隔开）

<body bgcolor = "red">
  <!--网页主体内容-->
</body>

标题

<h1></h1>

换行

<br/>

空格

&nbsp;

预格式标签

pre 元素中的文本通常会保留空格和换行符。否则不会保留换行符。

<pre> pre 元素中的文本通常会保留 空格和
换行符<pre>

五、修饰标签

<!--斜体-->
<i></i>
<em></em>
<!--加粗-->
<b></b>
<strong></strong>
<!--下划线-->
<ins></ins>
<!--上标-->
<sup></sup>
<!--下标-->
<sub></sub>
<!--删除线-->
<del></del>

六、特殊符号

&lt;    <!--<-->
&gt;		<!-->-->
&reg;		<!--®-->
&copy;	<!--©️-->
&trade; <!--™️-->
&nbsp;	<!--空格-->

七、列表

无序列表

disc 表示圆形，square 表示方形，circle 表示空心圆。

<ul type = "disc">
  <li></li>
  <li></li>
	<li></li>
  <li></li>  
</ul>

有序列表

1 表示1、2，a 表示a、b，A表示A、B，i表示小写罗马数字，I表示大写罗马数字。

<ol type = "I">
  <li></li>
  <li></li>
	<li></li>
  <li></li>  
</ol>

定义列表

<dl>
  <dt>Apple</dt>
  <dd>iphone</dd>
  <dd>ipad</dd>
  <dd>MacBook pro</dd>
  <dt>HuaWei</dt>
  <dd>P40 pro</dd>
  <dd>matePad</dd>
</dl>

效果类似于：

Apple
	iphone
	ipad
	MacBook pro
HuaWei
	P40 pro
	matePad

八、图像

<img src = "E/html/001.jpg">
<img src = "001.jpg">

1.相对路径与绝对路径：

2.alt

图片的文字代替。

<img src = "001.jpg" alt = "图片说明" >

3.width、height

<!--大小固定-->
<img src = "001.jpg" width = "80px" height = "50px" >
<!--比例固定-->
<img src = "001.jpg" width = "80%" >

九、超链接

<a href = "https://www.aimtao.net">aimtao.net</a>

1.空链接

<a href = "#">空链接</a>

2.target

（1）默认当前窗口打开

<a href = "https://www.aimtao.net" target = "_self">aimtao.net</a>

（2）新窗口打开

<a href = "https://www.aimtao.net" target = _blank">aimtao.net</a>

（3）”target = _top”

（4）”target = _parent”

3.title

显示解释性文字。

<a href = "https://www.aimtao.net" tilte = “我的博客”>aimtao.net</a>

4.rel

Google 使用 “nofollow”，用于指定 Google 搜索引擎不要跟踪链接。

<a href = "https://www.aimtao.net" rel = "nofollow noopener">aimtao.net</a>

5.name

锚点

6.mailto

邮箱链接

<a href = "mailto:net@aimtao.net"> my Email </a>

7.下载链接

链接使用相对路径。

<a href = "file/1.txt"></a>

Mark

前端

本博客所有文章均个人原创，除特别声明外均采用 CC BY-SA 4.0协议，转载请注明出处！

学习笔记｜Linux 上一篇