学习笔记|HTML

本文最后更新于:2 years ago

进入 web1.0 时代。

一、文档第一行

  • 不是 html 标签。
  • 文档类型声明,表示 html 那个版本。
1
<!doctype 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>

三、元信息(meta-information)

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
    <h1></h1>
  • 换行
    1
    <br/>
  • 空格
    1
    &nbsp;
  • 预格式标签
    pre 元素中的文本通常会保留空格和换行符。否则不会保留换行符。
    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
&lt;    <!--<-->
&gt; <!-->-->
&reg; <!--®-->
&copy; <!--©️-->
&trade; <!--™️-->
&nbsp; <!--空格-->

七、列表

  • 无序列表
    disc 表示圆形,square 表示方形,circle 表示空心圆。
    1
    2
    3
    4
    5
    6
    <ul type = "disc">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
  • 有序列表
    1 表示1、2,a 表示a、b,A表示A、B,i表示小写罗马数字,I表示大写罗马数字。
    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.空链接

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

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>

5.name

锚点

6.mailto

邮箱链接

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

7.下载链接

链接使用相对路径。

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

学习笔记|HTML
https://www.aimtao.net/html/
Posted on
2018-07-15
Licensed under