HTML笔记(第1次修订)

整理了一些HTML笔记,日常速成计划 : )

第1次修订:2017.9-2017.10

  • 补充quote, address, caption, label等标签;
  • 修订单标记语法,跟进xhtml1.0标准;
  • 细节增补改进。

创建:2017.3.28

  • 初稿

HTML笔记

1 概念

1.1 定义

  • 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

1.2 动态/静态网页

  • 静态网页,无计算处理能力的网页,后缀名:.htm.html.shtml.xml
  • 动态网页,有计算处理能力的网页,可提供交互反馈等,如 .asp.jsp.php.perl.cgi

注意:动态/静态之分与网页画面是否在动无关

1.3 标记

  • HTML作为标记(Markup)语言,其核心组成元素是标记。
  • 标记分为单标记双标记;(也称“标签”)

1.3.1 单标记

  • <标记 />(xhtml1.0), 简记<标记>(html4.01)
  • 例子:
    • <hr /> - 横线(水平分隔线(horizontal rule))
    • <br /> - 换行(barter rabbet)
  • 目前的规范标准是xhtml

1.3.2 双标记

  • <标记>内容</标记>

1.3.3 注释

  • <!-- 注释内容 -->

  • 也可跨行

  • ```html

    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



    ### 1.4 结构

    document

    - html
    - head
    - title
    - meta
    - body
    - table
    - span
    - p

    **注意**:HTML标记须按照结构组织,可以包含,但不得交叉,如 `<title>` 不得放入 `<body>` 内。



    通常结构:

    ```html
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网页标题</title>
    </head>

    <body>
    <p> </p>
    </body>
    </html>
  • meta为元信息,供浏览器解析使用


2 版面

2.1 标题

标题共6级,从1到6,字体有大到小,

1
2
3
4
5
6
<h1>标题</h1>		// 最大
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6> // 最小

2.2 段落

1
2
3
<p>
段落
</p>

段落之间默认会有段距;

注意**:默认多个连续空格会合并成一个,多个连续空行会合并成一行。

  • 增加空格: &nbsp ;(new blank space)
  • 增加空行:
    • 换行标记: <br />,简记为<br>
    • 段间距:<p></p>,简记为 <p>
  • 禁用换行:<nobr>段落</nobr> (不常用);

2.3 对齐

  • 标记的align属性:
    • align="left" ,另有”right”,”center”;
  • 居中标记:
    • <center>内容</center>

2.4 列表

2.4.1 无序表

无序表标记为<ul>表</ul> (unordered list)

1
2
3
4
<ul>
<li>表项1</li>
<li>表项2</li>
</ul>
  • li (list item)

2.4.2 有序表

有序表标记为<ol>表</ol>(ordered list)

1
2
3
4
<ol type="1">
<li>表项1</li>
<li>表项2</li>
</ol>
  • 有序表默认type属性为“1”,表示数字序标
    • 另:"A", "a", "i", "Ⅰ"

2.5 特殊段

2.5.1 预解析

  • <pre>内容</pre>
    • 只解析内容中的HTML标记,不合并空格、换行,保留源格式

2.5.2 不解析

  • <xmp>内容</xmp>
    • 不对内容做任何解析,保留内容中的HTML标记,格式;

2.5.3 代码段

  • <code>代码段</code>
    • 用于显示代码
  • </var>变量</var>
    • 用于标记变量(会斜体显示)

2.6 引用

2.6.1 短文本引用

  • ```html
    短文本

    1
    2
    3
    4
    5
    6
    7
    8
    9

    - quote
    - 一般默认解析为自动带上引号
    - <q>短文本</q>

    #### 2.6.2 长文本引用

    - ```html
    <blockquote>长文本</blockquote>
    • block quote
    • 一般默认解析为左右缩进,文本居中且自动折行
    • 暗淡轻黄体性柔,情疏迹远只香留。何须浅碧深红色,自是花中第一流。

2.7 地址信息

2.7.1 地址块

  • ```html
    江苏省苏州市姑苏区十梓街1号 苏州大学
    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
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118

    - <address>江苏省苏州市姑苏区十梓街1号 苏州大学</address>

    ------



    ## 3 字体

    字体分物理字体和逻辑字体。

    ### 3.1 物理字体

    - <b>粗体</b> - `<b>粗体</b>`
    - <i>斜体</i> - `<i>斜体</i>`
    - <u>下划线</u> - `<u>下划线</u>`
    - <s>删除线</s> - `<s>删除线</s>`
    - <sup>上标</sup> - `<sup>上标</sup>`
    - <sub>下标</sub> - `<sub>下标</sub>`
    - <tt>打字机字体</tt> - `<tt>打字机字体</tt>`



    ### 3.2 逻辑字体

    - <em>强调</em> - `<em>强调</em>`
    - <strong>加重</strong> - `<strong>加重</strong>`
    - <code>代码</code> - `<code>代码</code>`
    - <samp>示例文字</samp> - `<samp>示例文字</samp>`
    - <kbd>键盘按键文字</kbd> - `<kbd>键盘按键文字</kbd>`
    - <small>缩小</small> - `<small>缩小</small>`
    - <big>放大</big> - `<big>放大</big>`



    ### 3.3 属性字体

    更高级的字体设计可以使用属性字体标记实现:

    `<font>字体</font>`

    #### 3.3.1 颜色

    - `<font color="red">字体</font>`
    - 属性值为颜色名
    - `<font color="#ff0000">字体</font>`
    - 属性值为RGB 十六进制值

    #### 3.3.2 大小

    - `<font size="3">字体</font>`
    - size的值从1~7,由小到大



    ------



    ## 4 图像

    ### 4.1 引用图片

    引用图片时: `<img src="url">`



    ### 4.2 属性

    - `width="200px"` px即像素
    - `height="..px"`
    - `alt="解释"`
    - 光标停留时输出
    - 图片加载失败时显示
    - `align="bottom"`
    - 默认bottom, 另top, middle;
    - `border="1opx"`
    - 边框像素
    - `title="标题"`
    - 光标置于图片上时,浮出显示title内容



    ------

    ## 5 链接

    ### 5.1 超链接

    #### 5.1.1 基本

    `<a href="example.html">内容</a>`

    - 内容可以是文字或图片等…

    #### 5.1.2 属性

    - `target="_self"`
    - 默认`"_self"` 当前窗口打开
    - `_parent` 父标签页打开
    - `_top` 销毁当前标签页,顶层窗口打开
    - `_blank` 新标签页打开【常用】
    - `title="click"`
    - 光标置于链接上时会浮出文字提示`click`



    ### 5.2 区域链接

    通过`map`和`area`在图片中实现可点击的链接区域:

    ```html
    <img src="example.jpg" usemap="#face">
    <map name="face">
    <area shape="rect" href="link1.html" coords="140, 20, 280, 60">
    <area shape="ploy" href="link2.html" coords="100, 100, 180, 80, 200, 140">
    <area shape="circle" href="link3.html" coords="80, 100, 60">
    </map>

5.3 页内链接

1
2
3
<a href="#item">跳转至item处</a>
……
<a href="item">item</a>
  • 点击后,会在页面内跳转到item目标行

5.4 邮件链接

5.4.1 典型

1
<a heaf="mailto:demo@mail.com?subject=mail subject title&body=mail content body">click to send e-mail</a>
  • mailto:邮箱地址
  • subject=邮件主题
  • body=邮件内容
  • 通过?和一系列&符号实现分隔

5.4.2 关键字

  • mailto: 邮箱地址
    • ; 封号隔开多个邮箱地址
  • subject= 邮件主题
  • body= 邮件内容
  • cc= 抄送地址
  • bcc= 密件抄送地址

6 表单

6.1 表单框体

1
2
3
4
<form action="test.php" method="get">
表项
……
</form>
  • action 表单发送目标url,通常发给一个php这样的对象
  • method GET或POST报文

6.2 输入

6.2.1 文本框

  • <input type="text">
    • 上限255字符

6.2.2 密码框

  • <input type="password">

6.2.3 按钮

  • <input type="submit" value="提交">
    • 提交按钮
  • <input type="reset" value="重置">
    • 重置按钮
  • <input type="button" value="自定义按钮">
    • 自定义按钮

6.2.4 上传

  • <input type="image" src="image.jpg" />
    • 图片
  • <input type="file" />
    • 上传文件,点击后会弹出文件选择框

6.2.5 隐藏信息

  • <input type="hidden" name="text" value="隐藏区域信息">

6.2.6 文本域(大段)

  • ```html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    - **注意:**这两个属性可用css样式的width和height来代替:col用width、row用height来代替。

    #### 6.2.7 单选按钮

    - ```html
    <label>男</label>
    <input type="radio" name="sex" value="m">
    <label>女</label>
    <input type="radio" name="sex" value="f">
    • value 提交数据到服务器的值(后台PHP脚本运行使用);
    • name 为控件命名,以备后台程序 ASP、PHP 使用;
    • 注意:**同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“sex”,这样同一组的单选按钮才可以起到单选的作用。

6.2.8 复选按钮

  • ```html



    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    - `checked` 当设置 checked="checked" 时,该选项被默认选中

    #### 6.2.9 下拉列表框

    - ```html
    <form action="save.php" method="post" >
    <label>爱好:</label>
    <select multiple="multiple">
    <option value="看书">看书</option>
    <option value="旅游" selected="selected">旅游</option>
    <option value="运动">运动</option>
    <option value="购物">购物</option>
    </select>
    </form>
    • 设置selected=”selected”属性,则该选项就被默认选中。
    • 设置multiple=”multiple”属性,则按下Ctrl可多选。

6.3 其它

6.3.1 label标签

  • ```html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    - 格式

    - ```html
    <form>
    <label for="male">男</label>
    <input type="radio" name="gender" id="male" />
    <br />
    <label for="female">女</label>
    <input type="radio" name="gender" id="female" />
    <label for="email">输入你的邮箱地址</label>
    <input type="email" id="email" placeholder="Enter email">
    </form>
    • 示例

7 表格

7.1 表格框体

  • <table></table>
  • 属性:
    • border="1"
      • 边框粗细
    • width
    • height
    • align

7.2 结构解析

1
2
3
4
5
6
7
8
9
10
11
<table summary="table title">
<caption>table caption</caption>
<tr>
<th>table head1</th>
<th>table head2</th>
</tr>
<tr>
<td>table data1</td>
<td>table data2</td>
</tr>
</table>
  • 表格框体内,逐行,行内逐列
  • 表行、表头、表项都有诸如align 的属性,可调整对齐方式,如"center"居中

7.2.1 表行

  • ```html
    列信息
    1
    2
    3
    4
    5
    6
    7

    #### 7.2.2 表头

    - ```html
    <th>
    表头值
    </th>

7.2.2 表项

  • ```html
    表项值
    1
    2
    3
    4
    5

    #### 7.2.3 表摘要

    - ```html
    <caption>摘要</caption>

7.3 表格版面

7.3.1 跨行

  • rowspan=3
    • 当前元素跨3行

7.3.2 跨列

  • colspan=3
    • 当前元素跨3列

7.3.3 对齐

  • 表行、表头、表项都有诸如align 的属性,可调整对齐方式:
    • "center"居中;
    • "right" 右对齐。

8 框架

8.1 概念

  • 一个页面可以包含frameset,一个frameset可以包含多个frame,每个frame显示一个page。
  • 框架用途:
    • 常驻导航栏,导航栏中显示多个板块链接,方便用户在显示框架中切换到不同页面

8.2 框架集

1
2
3
4
5
<frameset cols="25,50,25">
<frame src="http://a.com" />
<frame src="http://b.com" />
<frame src="http://c.com" />
</frameset>
  • 1:2:1 分三列显示三个页面
  • <frameset frameborder="yes">
    • 另有 "no"10
    • 控制框架集边框显示

注意<frameset> 不得与 <body> 并列。

8.3 框架

  • <frame src="http://c.com" />
    • <frame />单标记
  • 禁用调节:使框架大小无法被用户调节
    • <frame noresize="noresize">
  • 滑动条
    • <frame src="http://a.com" scrolling="auto">
      • 另有: "yes""no", 可启用或禁用滚动条

8.4 分栏

  • 框架集属性 colsrows

8.4.1 多列分栏

  • cols 属性表示分配列向分栏比例

8.4.2 多行分栏

  • rows 属性分配行向分栏比例

8.4.3 表格分割

  • 复合使用colsrows属性可以实现表格分割

8.5 内联框架

<iframe src="a,html" />

  • 嵌入在网页的一个独立网页框
  • 属性:类似<frame>

9 多媒体嵌入

9.1 嵌入标记

  • <embed src=url>
  • 可嵌入音频、视频
  • url 是需要嵌入多媒体的URL
  • 依赖浏览器协同的音视频播放器 Windows Media Player

9.2 属性

  • autostart=true/false
    • 自动播放
  • loop=true/false
    • 循环播放
  • hidden=true/false(no)
    • 隐藏播放器显示
  • height
  • width
    • 默认单位px
  • bgcolor
  • align

10 动态效果

10.1 滚动

10.1.1 滚动标记

内容
  • <marquee>内容</marquee>
    • 默认从右向左滚动

10.1.2 属性

  • direction=left
    • 滚动方向
    • "right""up""down"
  • scrollamount
    • 滚动量(滚动速度)
  • behavior=“scroll”
    • 滚动方式,默认scroll 来回滚动
    • alternate 来回滚动, slide 一次滚动
  • loop="5"
    • 循环次数,此处为循环5次
  • scrolldelay
  • bgcolor
  • width
  • height

11 区块

11.1 行块span

11.1.1 标记

1
<span>内容</span>>

11.1.2 特点

  • span是跨度,宽度,从一头到另一头义
  • 顾名思义,span块的宽度为内容宽度,且内容单行,不换行

11.2 区块div

11.2.1 标记

1
2
3
<div>
内容
</div>

11.2.2 特点

  • 宽度默认为父容器宽度
  • 行、段等其它元素均可放置在div内,<div>标记使用范围广,与CSS紧密相关

12 结合CSS

12.1 style标签

  • <style type="text/css">
    p{
       font-size:20px;/*设置文字字号*/
       color:red;/*设置文字颜色*/
       font-weight:bold;/*设置字体加粗*/
    }
    </style>
    
    • html中,<p>标签内的段落文本会成为CSS中定义的样式
    • <style>标签置于<head>
支持我的写作!(Support my writing!)

欢迎关注我的其它发布渠道