0%

HTML笔记

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

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 单标记

  • <标记 />, 简记<标记>
  • 例子:
    • <hr> - 横线(水平分隔线(horizontal rule))
    • <br> - 换行(barter rabbet)

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
    35
    36
    37



    ### 1.4 结构

    document

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

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



    ------



    ## 2 版面

    ### 2.1 标题

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

    ```html
    <h1>标题</h1> // 最大
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6> // 最小

2.2 段落

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

段落之间默认会有段距;

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

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

2.3 对齐

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

2.4 列表

2.4.1 无序表

无序表标记为<ul>表</ul>

1
2
3
4
<ul>
<li>表项1</li>
<li>表项2</li>
</ul>

2.4.2 有序表

有序表标记为<ol>表</ol>

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>
    • 用于标记变量(会斜体显示)

3 字体

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

3.1 物理字体

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

3.2 逻辑字体

  • 强调 - <em>强调</em>
  • 加重 - <strong>加重</strong>
  • 代码 - <code>代码</code>
  • 示例文字 - <samp>示例文字</samp>
  • 键盘按键文字 - <kbd>键盘按键文字</kbd>
  • 缩小 - <small>缩小</small>
  • 放大 - <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"
    • 边框像素

5 链接

5.1 超链接

5.1.1 基本

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

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

5.1.2 属性

  • target="_self"
    • 默认"_self" 当前窗口打开
    • _parent 父标签页打开
    • _top 销毁当前标签页,顶层窗口打开
    • _blank 新标签页打开

5.2 区域链接

通过maparea在图片中实现可点击的链接区域:

1
2
3
4
5
6
<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目标行

6 表单

6.1 表单框体

1
2
3
4
<form action="test.aspx" method="get">
表项
……
</form>
  • action 表单发送目标url
  • 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="隐藏区域信息">

7 表格

7.1 表格框体

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

7.2 结构解析

1
2
3
4
5
6
7
8
9
10
<table>
<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
    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



    ### 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 框架集

    ```html
    <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紧密相关
支持我的写作!