学习笔记|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/>
- 空格
- 预格式标签
pre 元素中的文本通常会保留空格和换行符。否则不会保留换行符。
<pre> pre 元素中的文本通常会保留 空格和
换行符<pre>
五、修饰标签
<!--斜体-->
<i></i>
<em></em>
<!--加粗-->
<b></b>
<strong></strong>
<!--下划线-->
<ins></ins>
<!--上标-->
<sup></sup>
<!--下标-->
<sub></sub>
<!--删除线-->
<del></del>
六、特殊符号
< <!--<-->
> <!-->-->
® <!--®-->
© <!--©️-->
™ <!--™️-->
<!--空格-->
七、列表
- 无序列表
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>
本博客所有文章均个人原创,除特别声明外均采用 CC BY-SA 4.0协议,转载请注明出处!