HTML学习笔记

发表于 更新于 阅读次数： 本文字数： 7.3k 阅读时长 ≈ 7 分钟

HTML 介绍

HTML(Hyper Text Markup Language)超文本标记语言

网页后缀为html或htm。

web标准

结构：用于对网页元素进行整理分类，语言为HTML

表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要为CSS

行为：行为指网页模型的定义及交互的编写，语言为JavaScript

三者关系

HTML语法规范

  1. HTML标签是由尖括号包围的关键词，例<html>
  2. HTML标签通常是成对出现的，例如<html>和</html>，我们称之为双标签，标签中的第一个标签为开始标签，第二个标签为结束标签
  3. 有些特殊的标签为单标签(极少情况),例 <br>

标签关系

包含关系和并列关系

1
2
3
4
5
包含关系举例
<head>
    <title>
    </title>
</head>
1
2
3
并列关系举例
<head></head>
<body></body>

HTML基本结构标签

<html></html>页面中最大的标签，称之为根标签

<head></head> 在head标签中必须要设置title

<title></title> 网页的标题

<body></body> 文档的所有内容，页面内容等

1
2
3
4
5
6
7
8
<html>
    <head>
        <title>...</title>
    </head>
    <body>
        ...
    </body>
</html>

如果使用VScode，敲下一个!，然后回车可以弹出网站框架

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html><!-- 声明网站使用的html版本，这里指用html5版本，必须位于文档中最前面的位置，在<html>之前 -->
<html lang="en"><!-- 标注出网站的语言，en为英文，zh-CN为中文，如果不为中文，浏览器会弹出要不要翻译为中文的选项 -->
<head>
    <meta charset="UTF-8"><!-- 标注出网站使用的字符编码类型 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!--网站标题-->
</head>
<body>
    <!-- 网页的内容 -->
</body>
</html>

HTML常用标签

标题标签

<h1>-<h6>HTML提供了6个等级的网页标题

使用方法：

1
<h1>我是一级标题</h1>

显示效果：

标题显示效果

特点：加了标题属性的文字会加粗，字号加大。一个标题占一行。

段落标签

1
2
3
<p>
    文字
</p>

特点：

  1. 文本在一个段落中会根据浏览器的窗口大小自动换行
  2. 段落与段落之间会有空隙

显示效果：

效果

换行标签

<br /> (break的缩写)

特点：

<br />是单标签，<br />只是单独的开启新一段，与段落不同，段落之间会有一定的距离。

显示效果：

huanhang

文本格式化标签

1
2
3
4
加粗 <strong></strong> <b></b>
倾斜 <em></em> <i></i>
删除线 <del></del> <s></s>
下划线 <ins></ins> <u></u>

div标签和span标签

<div>标签和<span>标签是没有语义的，它们只是一个盒子用来装内容。

特点：

  1. <div>标签用来布局，但是一行只能放一个<div>(大盒子)
  2. <span>标签用来布局，一行可以放多个<span>(小盒子)

图像标签

1
<img src="图象路径" />
可选属性 属性值 备注
src 图片路径 必须属性
alt 文本 当图像无法显示时的替换文字
title 文本 提示文字，鼠标放到图象上显示的文字
width 像素或百分比 宽度
height 像素或百分比 高度
border 像素 设置图像边框的粗细

注意点：

  1. 图像标签可以有多个属性，属性必须写在 img 的后面
  2. 属性之间不分前后顺序，标签与属性，属性与属性之间以空格分开
  3. 属性采用键值对的方式，即 key=”value“的格式

绝对路径

…\...\...

相对路径

…/…/…

超链接标签

1
<a href="跳转目标" target="目标窗口弹出方式，默认为_self(原窗口打开)，_blank为新窗口打开">文本或图像</a>

链接分类：

  1. 外部链接
1
<a href="https://www.baidu.com">baidu</a>
  1. 内部链接
1
<a href="index.html">首页</a>
  1. 空链接
1
<a href="#">blank</a>
  1. 下载链接
1
<a href="f.zip">download</a>

  1. 网页元素链接

    在网页中各种元素都可以添加超链接

  2. 锚点链接

    在链接文本的href属性中，设置为”#名字“的形式

1
<a href = "#two"> 第二集 </a>

​ 找到目标位置标签，里面添加一个id属性等于刚才的名字

1
<h3 id="two">第二集</h3>

​ 这样，当点击链接时，会自动跳转到目标位置处。

注释标签

1
<!--我是注释文本-->

VScode快捷键Crtl+/

特殊字符

字符 名称 代码
空格符 &nbsp(no breaking space)
< 小于号 &lt(less than)
> 大于号 &gt(great than)
￥ 人民币 &yen
& 和号 &amp
© 版权 &copy
® 注册商标 &reg
° 度 &deg
± 正负号 &plusmn
× 乘号 &times
÷ 除号 &divide
² 平方 &sup2
³ 立方 &sup3

表格标签

1
2
3
4
5
6
<table>
    <tr>
        <td>单元格内的文字</td>
    </tr>
    ...
</table>

<table> </table>是用于定义表格的标签

<tr> </tr> 用于定义表格中的行，嵌套在<table>标签中

<td> </td>用于定义表格中的单元格的内容，嵌套在<tr>标签中，(table data)

表头单元格

<th> </th>标签表示HTML表格的表头部分(table head)的缩写，表头单元格中的内容加粗居中显示

表格属性

属性名 属性值 备注
align left，center，right 规定表格相对于周围元素的对齐方式
border 1或“ ” 规定表格单元格是否拥有边框，数字表示像素即宽度
cellpadding 像素值 规定单元格边沿与其内容之间的空白，默认为1像素
cellspacing 像素值 规定单元格之间的空白，默认为2像素
width 像素或百分比 规定表格的宽度
height 像素或百分比 规定表格的高度

表格图片

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table width="500" height="300" border="1" cellpadding="0" cellspacing="3">
        <tr align="center">
            <th>文字</th>
            <th>文字</th>
            <th>文字</th>
        </tr>
        <tr align="center">
            <td>文字</td>
            <td>文字</td>
            <td>文字</td>
        </tr>
        <tr align="center">
            <td>文字</td>
            <td>文字</td>
            <td>文字</td>
        </tr>
        <tr align="center">
            <td>文字</td>
            <td>文字</td>
            <td>文字</td>
        </tr>
    </table>
</body>

</html>

显示效果：

表格

表格结构标签

1
2
<thead></thead><!-- 用于定义表格的头部 -->
<tbody></tbody><!-- 用于定义表格的身体 -->

这两个标签不是必须的，定义了可以显示更加清晰。

合并单元格

  • 跨行合并：rowspan=”合并单元格的个数”
  • 跨列合并：colspan=”合并单元格的个数”

合并单元格

目标单元格定义：

  • 跨行合并：最上侧单元格为目标单元格
  • 跨列合并：最左侧单元格为目标单元格

合并单元格步骤：

  1. 先确定是跨行合并还是跨列合并
  2. 找到目标单元格，写上合并代码，例<td colspan="2"></td>
  3. 删除多余的单元格
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" cellspacing="0" width="300" height="200">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>

            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>

显示效果：

表格

无序列表

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

注意事项：

  • 无序列表的各个列表项之间无顺序差别之分，是并列的
  • <ul> </ul>中只能嵌套<li></li>
  • <li></li>中可以放其他元素
  • 无序列表的样式可以用CSS来设置

显示效果：

无序列表

有序列表

1
2
3
4
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

注意事项:

  • 有序列表的各个列表项之间有顺序之分
  • <ol> </ol>中只能嵌套<li></li>
  • <li></li>中可以放其他元素
  • 有序列表的样式可以用CSS来设置

显示效果：

有序列表

自定义列表

1
2
3
4
5
<dl>
    <dt>名词</dt>
    <dd>解释1</dd>
    <dd>解释2</dd>
</dl>

注意事项：

  • <dl></dl>里面只能包含<dt>和<dd>
  • <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>

显示效果：

自定义列表

表单

表单组成

表单

表单域

包含表单元素的区域

1
2
3
<form action="url地址" method="提交方式" name="表单名称">
    各种表单元素控件
</form>

action：用于指定接受并处理表单数据的服务器程序的url地址

method：用于设置表单数据的提交方式，取值为get或post

name：用于指定表单的名称，用以区分同一页面的多个表单域

input表单元素

<input type="属性值">

type可取的属性值

属性值 解释
button 按钮
checkbox 复选框
color 颜色
date 日期
file 文件
image 图像形式的提交按钮
number 数字
password 密码
radio 单选按钮
range 滑动选项
reset 重置
submit 提交
text 文本
url 网址
week 周

input标签的其他属性

属性名称 解释
name 表单元素的名字，要求同一组单选按钮或者同一组复选框要有相同的name值
value 表单元素的默认值
checked 主要针对单选按钮和复选框，主要作用是一打开某个页面，默认选中某个表单元素
maxlength 用户可以在表单元素中输入的最大字符数

label标签

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，会自动将焦点转到对应的表单元素上

1
2
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

这样当点击“男”时，会自动选上单选按钮

<label>标签中的for属性应与相关元素的id相同

select标签

创建下拉列表

1
2
3
4
<select>
    <option>选项1</option>
    <option selected="selected">选项2</option>
</select>

注意事项：

  • 至少包含一对<option>
  • 在<option>中定义selected=”selected”时，当前项即为默认选项

textarea表单元素

1
<textarea rows="3" cols="20">文本内容</textarea>

rows=”显示的行数”

cols=”每行的字符数”

文档查询

MDN文档

MDN