参考文档or教程

Web 开发技术 | MDN (mozilla.org)

HTML 教程 | 菜鸟教程 (runoob.com)

CSS 教程 | 菜鸟教程 (runoob.com)

HTML简介

HTML是一个标记语言，不是一个编程语言。HTML 使用标记标签来描述网页，HTML 文档包含了HTML标签及文本内容。

HTML标签是HTML所使用的标记，是由尖括号所包围的关键词，如<head>等。HTML标签是成对出现的，第一个标签是开始标签，第二个标签是结束标签。HTML元素就是HTML标签所涵盖的内容。

HTML的网页结构：

image-20220830160532846

一个完整HTML网页：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>first html</h1>
    <p>HHHHHELLO WORLD</p>
</body>
</html>

在vscode中，我们新建一个html文件时，我们可以通过英文的!＋回车快速生成html文档的基本结构

在JB系软件中，可以通过html:5+tab快速生成

HTML基础

语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

大部分HTML元素都可以嵌套。

基本结构标签

  • <html></html> HTML标签

    根标签，是页面中最大的标签

  • <head></head> 文档的头部

    注意在head标签中必须设定title标签

    <title><title>设定网页的标题

  • <body></body> 文档的主体

    包含着HTML文档的所有内容，页面显示的内容都会放在body内

文档类型声明标签

  • <!DOCTYPE>文档类型声明

    声明HTML的版本，这句代码需要放在HTML文档的最前面

  • lang = 定义当前文档显示的语言

    作用是给搜索引擎和浏览器作提示作用，并不是限制文档所使用的语言

  • <mate charset= "XXXX"> 规定HTML文档使用的字符编码

    一般情况下都是用UTF-8，避免出现乱码现象

常用标签

  • 标题标签 <h1>-<h6> 有大到小递减

  • 段落标签<p></p> 定义段落，可以将网页分割成多个段落

    特性：会根据浏览器窗口自动换行

  • 换行标签<br/> 手动换行 单标签

  • 文本格式化标签

    语义 标签
    加粗 或
    倾斜 或
    删除线 或
    下划线 或

  • <div>和<span>标签

    这两个标签本身是没有含义，是作为一个盒子的存在，用于存储内容

    特点：

    1. <div>一行只能放一个，该标签独占一行，相当于是一种大盒子
    2. <span>一行可以放置多个，相当于是一种小盒子

  • 图像标签<img src = "图像URL" /> 单标签

    图像标签有以下属性可以设置：

    属性 属性值 说明
    src 图片路径 必须属性，用于指定图像文件的路径和文件名
    alt 文本 替换文本。图片不能显示时的文字
    title 文本 提示文本。鼠标放在图像上显示的文字
    width 像素 宽度
    height 像素 高度
    border 像素 边框的粗细

    图像标签注意点：

    1. 图像标签可以拥有多个属性，必须写在标签名的后面
    2. 属性之间不分先后顺序，标签名与属性、属性与属性之间以空格隔开
    3. 属性采用键值对的格式，即key = "value"

    相对路径的含义：

    相对路径含义 符号
    同一级路径
    下一级路径 /
    上一级路径 …/

  • 超链接标签 <a href = "跳转目标" target = "目标窗口弹出方式">文本或者图像</a>

    作用是从一个页面链接到另外一个页面

    target默认为_self，_blank为在新窗口中打开的方式

    在文本或者图像的位置，我们可以填入文本，或者是图像标签之类的各种网页元素

    href跳转目标：

    1. 外部链接

    2. 网站内部的其他网页

    3. 空链接

    4. 下载链接：文件所在的路径

    5. 锚点链接：点击链接可以快速定位到页面的某个位置

      找到目标位置的标签，在内部添加一个id = "名字"，在href属性中设置为#名字即可

  • 注释 <!-- 注释语句 -->

特殊字符

在HTML中，空格等特殊字符我们需要借助特殊的标记进行表示

常用的特殊字符：

image-20220916012707314

详细请参考HTML ISO-8859-1 参考手册 | 菜鸟教程 (runoob.com)

表格标签

表格的主要作用是显示、展示数据

基本语法

表格主要由三组标签组成，<table>、<tr>、<td>

  • <table>用于定义表格的标签
  • <tr>用于定义表格的行
  • <td> table date 即单元格
  • 三组标签呈现<td> -> <tr> -> <table>的嵌套关系

表格的基本例子

1
2
3
4
5
6
<body>
    <table>
        <tr><td>姓名</td> <td>年龄</td></tr>
        <tr><td>张三</td> <td>17</td></tr>
    </table>
</body>

image-20220916103701582

表头单元格标签

<th> 即table head

表格的第一行一般都是作为表头使用，因此<th>标签可以使得里面的文本内容加粗居中显示，以此表示表头

注意：这是个单元格大小的标签，与<td>类似

表格属性

实际开发中并不常用，实际开发中表格属性往往通过CSS来设置

image-20220916130347019

表格结构标签

为了更好的表示表格，可以将被表格分割成表格头部和表格主体两大部分

在表格标签中，分别用：<thead>表示表格的头部区域、<tbody>表示表格的主体区域

这两个结构标签位于<table>下面，在<tr>之上

注意：<thead>的属性与表格总的属性是分隔的，需要额外设置

合并单元格

特殊情况下，我们需要用到多个单元格合并成一个单元格，例：

image-20220916131341116

这种情况下，个人简历和图片就用到了合并单元格

合并单元格的方式：

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

合并的代码需要写到目标单元格上：

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

image-20220916132536909

举个实现上图的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <table width="500" height="300" border="1" cellspacing="0">
        <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>

列表标签

跟表格标签不同，列表最主要是用来布局

列表的特点是整齐、整洁、有序，且作为布局会更加自由和方便

列表主要分为三大类：无序列表、有序列表、自定义列表

image-20220916155000749

无序列表

<ul>标签表示无序列表，列表项使用<li>定义

1
2
3
4
5
6
7
<ul>
	<li>one</li>
	<li>two</li>
	<li>three</li>
	<li>four</li>
	<li>five</li>
</ul>

在<li>里相当于是一个容器，可以容纳任何内容

无序列表有自己的样式属性，但是在实际使用中，我们往往使用CSS进行设置

有序列表

<ol>标签表示有序列表，列表项用<li>定义

与无序列表类似<li>里相当于是一个容器，可以容纳任何内容，且有序列表有自己的样式属性，但开发中更常用CSS进行设置样式

自定义列表

开发中自定义列表常用于对术语或名词进行解释和描述，自定义列表的列表项前面没有任何项目符号

<dl>标签用于表示自定义列表，<dt>用于表示项目/名字，<dd>用于表示详细描述

<dt>和<dd>的关系类似于表头和单元格的关系

1
2
3
4
5
<dl>
	<dt>关注我们</dt>
    <dd>bilibili</dd>
	<dd>联系我们</dd>
</dl>

<dt>和<dd>数量都是没有限制的，比较常用的是一个<dt>对应多个<dd>

表单标签

表单常用在注册等场景下使用，常用于收集用户的信息和相关数据

在HTML中，一个完整的表单一般由三部分组成，表单域、表单控件（表单元素）、提示信息

表单域

表单域即包含整个表单元素的区域，<form>标签用于定义表单域，以实现用户信息的收集及传递

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

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

提交方式：可用的取值为，get与post，在我的另外一篇文章（渗透测试（1））中提及两者区别

名称：用于指定表单的名称，以区分不同表单

表单控件

表单控件可用按照使用的方式分为以下几种类型

  • input输入表单元素

    <input>标签可以让用户输入数据，注意，他是一个单标签

    在<input>标签中，包含一个必填的属性type属性，根据不同的属性，输入的字段拥有很多种形式（文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）

    type具体可以取得值可以见下表：

    image-20220917020311733

    除了type属性以外，<input>还提供其他属性以供设置，其常用的其他属性如下：

    image-20220917021924503

    其中name值，在用radio实现多选一的时候，必须让多个按钮有同一个name值，才能实现多选一的效果，否则会出现可以多选的问题。复选按钮<checkbox>也同样需要有相同的name值

    value属性对于不同type类型，用法也不同：

    • 对于 button、reset、submit 类型 - 定义按钮上的文本
    • 对于 text、password、hidden 类型 - 定义输入字段的初始（默认）值
    • 对于 checkbox、radio、image 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

  • select下拉表单元素

    下拉表单常用于选择分类之类的地方

    我们可以使用<select>标签控件定义下拉列表，具体的列表选项我们可以使用<option>来进行列出

    在<select>标签应当至少含有一对<option>标签，在<option>标签中设置属性selected = "selected"时会使得当前选项成为默认选项

  • textarea文本域元素

    与<input>标签的 text相类似，都是作为让用户输入文字表单的地方，但是这个文本域元素能提供更大的输入空间，一般用于让用户输入自我介绍等内容的地方，可以理解为大号的 text

    这个标签带有两个属性，rows和cols，rows是用于调整每行中的字符数，cols是用于调整显示的行数，但是我们在开发中很少会使用，因为一般都是使用CSS进行大小的调控

    在标签中间填入的内容是用于定义输入字段的初始（默认）值

<label>标签

<label>标签并不属于表单标签，但是常常用于表单中，可以使得用户不比精准点中表单也可以选中选项

<label>标签用于绑定一个表单元素，当点击<label>标签内的元素时，浏览器会自动将焦点（即光标）转向对应的表单元素上，增加用户体验

绑定的方式是设置for属性，并在表单元素上设定id属性，通过for绑定id属性

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