HTML笔记（第1次修订）

发表于 更新于 本文字数： 2.8k 阅读时长 ≈ 10 分钟

整理了一些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" 或 1或0
    • 控制框架集边框显示

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

8.3 框架

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

8.4 分栏

  • 框架集属性 cols， rows

8.4.1 多列分栏

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

8.4.2 多行分栏

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

8.4.3 表格分割

  • 复合使用cols和rows属性可以实现表格分割

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>中