进入 web1.0 时代。
一、文档第一行
不是 html 标签。
文档类型声明,表示 html 那个版本。
二、基本格式
1 2 3 4 5 6 7 8 9 10
| <!docctpye html> <html> <head> <meta charset="utf-8"> <title>网页标题</title> </head> <body> </body> </html>
|
text/html
告诉浏览器,服务器即将发送的是 html 文件, charset = utf-8"
告诉浏览器,该 html 文件使用字符集为 utf-8。
1
| <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
|
四、基本语法
1 2 3 4 5
| <p></p> <p align = "left">这是左对齐</p> <p align = "right">这是右对齐</p> <p align = "center">这是居中对齐</p> <p align = "justify">这是两端对齐</p>
|
1 2 3 4 5 6
| <hr color = "red"></hr> <hr color = "red"/>
<hr width = "80%", align = "left"/>
|
1
| <hr width = "80%", align = "left"/>
|
1 2 3
| <body bgcolor = "red"> </body>
|
1 2
| <pre> pre 元素中的文本通常会保留 空格和 换行符<pre>
|
五、修饰标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <i></i> <em></em>
<b></b> <strong></strong>
<ins></ins>
<sup></sup>
<sub></sub>
<del></del>
|
六、特殊符号
1 2 3 4 5 6
| < > ® © ™
|
七、列表
1 2 3 4 5 6
| <ul type = "disc"> <li></li> <li></li> <li></li> <li></li> </ul>
|
1 2 3 4 5 6
| <ol type = "I"> <li></li> <li></li> <li></li> <li></li> </ol>
|
1 2 3 4 5 6 7 8 9
| <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>
|
效果类似于:
1 2 3 4 5 6 7
| Apple iphone ipad MacBook pro HuaWei P40 pro matePad
|
八、图像
1 2 3
| <img src = "E/html/001.jpg"> <img src = "001.jpg"> <img src = "../../image/001.jpg">
|
1.绝对路径与相对路径
绝对路径:从根目录开始。
相对路径:从共同的目录开始。
2.alt
图片的文字代替。
1
| <img src = "001.jpg" alt = "图片说明" >
|
3.width、height
1 2 3 4
| <img src = "001.jpg" width = "80px" height = "50px" >
<img src = "001.jpg" width = "80%" >
|
九、超链接
1
| <a href = "https://www.aimtao.net">aimtao.net</a>
|
1.空链接
2.target
(1)默认当前窗口打开
1
| <a href = "https://www.aimtao.net" target = "_self">aimtao.net</a>
|
(2)新窗口打开
1
| <a href = "https://www.aimtao.net" target = _blank">aimtao.net</a>
|
(3)“target = _top”
(4)“target = _parent”
3.title
显示解释性文字。
1
| <a href = "https://www.aimtao.net" tilte = “我的博客”>aimtao.net</a>
|
4.rel
Google 使用 “nofollow”,用于指定 Google 搜索引擎不要跟踪链接。
1
| <a href = "https://www.aimtao.net" rel = "nofollow noopener">aimtao.net</a>
|
锚点
6.mailto
邮箱链接
1
| <a href = "mailto:net@aimtao.net"> my Email </a>
|
7.下载链接
链接使用相对路径。
1
| <a href = "file/1.txt"></a>
|