HTML

April 11, 2023 6159

基本标签

HTML的基本骨架：

1
2
3
4
5
6
7
8
9
10
11
<!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>
</body>
</html>

<!DOCTYPE>标签

文档类型声明标签（注意不是HTML标签），用于告诉浏览器使用的是哪种版本的HTML来显示网页。

<!DOCTYPE html>表明当前页面采取的是HTML5版本来显示网页。

HTML标签

HTML标签，页面中最大的标签，作为文档的根标签。

存在属性lang，表示文档的语言，支持的值主要为”en”：英语；”zh-CN”：中文……

meta标签

meta表示“元”，即基本的配置项目。

<meta charset="UTF-8">用来规定HTML文档使用的字符编码，utf-8是目前最常用的字符集编码方式，

标题标签

<h1> - <h6>，一个标题独占一行。

段落标签

<p>段落标签。文本在一个段落中会根据浏览器窗口大小自动换行。段落和段落之间会存在空隙。

换行标签

<br/>（单标签）

文本格式化标签

文字加粗：<strong>或<b>

文字倾斜：<em>或<i>

删除线：<del>或<s>

下划线：<ins>或<u>

<div>和<span>标签

没有语义，代表一个盒子用来装内容。

<div>可以理解为一个大盒子，一行只能放一个。

<span>可以理解为一个小盒子，一行可以放很多个。

图像标签

<img src="图片URL" />

图像标签的属性：

  • src是<img>标签的的必须属性，用于指定图像文件的路径和文件名。
  • alt，替换文本，图片不能显示时显示的文字。
  • title，提示文本，鼠标放到图像上，显示的文字。
  • width，设置图像的宽度，单位px可以不写。
  • height，设置图像的高度，单位px可以不写。（width和height可以只修改一个，另一个会等比例缩放）
  • border，设置图像的边框粗细，单位px可以不写。

超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

链接分类：

  • 外部链接：例如<a href="http://www.baidu.com">百度</a>。
  • 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。例如：<a href="index.html">首页</a>。
  • 空链接：如果当时没有确定链接目标，例如：<a href="#">首页</a>。
  • 下载链接：如果href里面地址是一个文件（.exe）或压缩包（.zip），会下载这个文件。
  • 网页元素链接：在网页中的各种网页元素，如文本、图像、视频、表格、音频等都可以添加超链接。
  • 锚点链接：当我们点击链接，可以快速定位到页面中的某个位置。使用方法：
  1. 在链接文本的href属性中，设置属性值为#名字的形式，如：<a href="#first">第一点</a>。
  2. 找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h1 id="first">第一点介绍</h1>。

超链接标签的属性：

  • href，必须属性，用于指定链接目标的url地址。
  • target，用于指定链接页面的的打开方式，其中_self为默认值，表示当前窗口打开页面，__blank为在新窗口中打开页面。

注释标签

<!--注释语句-->，注释语句便于阅读和理解，不在页面中显示。

特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来代替：

  • &nbsp;表示空格。
  • &lt;表示 < 符号。
  • &gt;表示 > 符号。

表格标签

基本标签

表格主要用于展示数据。

1
2
3
4
5
<table>
        <tr>
            <td></td>
        </tr>
</table>

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

<tr>用于定义表格中的行，必须嵌套在<table>中。

<td>是用于定义表格中的单元格，必须嵌套在<tr>中。

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格的文本内容加粗居中显示。

<th>标签表示HTML表格的表头部分。

1
2
3
4
5
<table>
        <tr>
            <th></th>
        </tr>
</table>

表格属性

  • align：left、center、right。规定表格相对周围元素的对齐方式（注意是整个表格的位置）。
  • border：””或像素值。规定表格单元是否拥有边框，默认为””，表示没有边框。
  • cellpadding：像素值。规定单元边沿与其内容之间的空白，默认为1像素。
  • cellspacing：像素值。规定单元格之间的空白，默认为2像素。
  • width：像素值或百分比。规定表格的宽度。
  • height:像素值或百分比。规定表格的高度。

表格结构标签

表格标签<thead>，<tbody>可以更好地分清表格结构。

  • <thead>表示表格的头部区域。
  • <tbody>表示表格的主体区域。

合并单元格

合并单元格方式：

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

目标单元格（写合并代码）：

  • 跨行：最上侧的单元格为目标单元格，在此单元格上写合并代码。
  • 跨列：最左侧的单元格为目标单元格，在此单元格上写合并代码。

列表标签

表格是用来展示数据的，那么列表就是用来布局的。

列表分为：无序列表，有序列表、自定义列表。

无序列表

<ul>标签表示HTML页面中的无序列表。

<li>标签表示无序列表<ul>标签中的列表项，列表项前存在项目符号圆点。

<ul>中只能嵌套<li>，直接在<ul>中输入其它标签或文字是不被允许的。

<li>相当于一个容器，可以容纳其它元素。

无序列表会自带css属性，可以通过CSS设置list-style:none去掉。

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

<ol>标签用于定义有序列表，列表排序以数字来显示。

<li>标签用于定义列表项，列表项前存在项目符号有序数字。

<ol>中只能嵌套<li>，直接在<ul>中输入其它标签或文字是不被允许的。

<li>相当于一个容器，可以容纳其它元素。

有序列表会自带css属性，可以通过CSS设置。

自定义列表

自定义列表常用于对术语或名词进行解释和描述。

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

<dl>标签用于定义描述列表。

<dt>标签用于定义项目/名字。

<dd>标签用于描述项目/名字。

<dl>中只能包含<dt>和<dd>。

<dt>和<dd>中可以放其它标签。

表单标签

一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息3个部分构成。

表单域

表单域是一个包含表单元素的区域。

<form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会把它范围内的表单元素信息提交给服务器。

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

属性：

  • action：url地址。用于指定接收并处理表单数据的服务器的url地址。
  • method：get/post。用于设置表单数据的提交方式，其取值为get/post。
  • name：名称。用于指定表单的名称，以区分同一个页面中的多个表单域。

表单控件（表单元素）

  1. input输入表单元素。
  2. select下拉表单元素。
  3. textarea文本域元素。

<input>表单元素

<input>标签用于收集用户信息。

在<input>标签中有一个type属性，根据不同的type属性值，输入字段拥有很多种形式。

1
<input type="属性值">
  • <input>标签为单标签。
  • type属性设置不同的属性值来指定不同的控件类型:

![](E:\笔记\笔记图片\Screenshot 2022-12-18 121332.png)

<input>中还有其他属性：

  • name：属性值自定义。定义input元素的名称，注意radio单选按钮和checkbox复选框中name属性应相同，特别是在单选按钮中，只有name属性值相同，才能实现多选一效果。
  • value：属性值自定义。规定input元素的值，会在文本框中显示，单选按钮和复选框中不会显示。
  • checked：属性值为checked或者省略。主要针对单选按钮和复选框，规定此input元素首次加载时应当被选中。
  • maxlength:正整数。规定此输入字段中的字符的最大长度。
<label>标签

<label>标签为input元素定义标注（标签）。

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

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

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

<select>表单元素

在页面，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

1
2
3
4
5
<select>
            <option >****</option>
            <option >****</option>
            <option >****</option>
</select>

<select>中至少包含一对<option>。

在<option>中定义selected属性时，当前项即为默认选中项。

<textarea>表单元素

当用户输入内容较多情况下，就不能使用文本框表单了，此时可以使用<textarea>标签。

<textarea>标签是用于定义多行文本输入的控件。

1
<textarea cols="每行中的字符数" rows="显示的行数"></textarea>

存在cols和rows属性。

HTML5部分新特性

HTML5新增的语义化标签

  • <header>头部标签
  • <nav>导航标签
  • <article>内容标签
  • <section>定义文档某个区域
  • <aside>侧边栏标签
  • <footer>尾部标签

HTML5新增的多媒体标签

<video>视频

<video>支持三种视频格式（mp4,webm,ogg），mp4兼容性更好。

属性：

![](E:\笔记\笔记图片\Screenshot 2023-01-11 142712.png)

<audio>音频

<audio>支持三种音频格式（mp3,wav,ogg），mp3兼容性更好。

![](E:\笔记\笔记图片\Screenshot 2023-01-11 143127.png)

谷歌浏览器把视频和音频自动播放禁止了。

HTML5新增的input类型

![](E:\笔记\笔记图片\Screenshot 2023-01-11 201438.png)

HTML5新增的表单属性

![](E:\笔记\笔记图片\Screenshot 2023-01-11 202147.png)

可以通过：

1
2
3
input::placeholder {
	color: blue;
}

修改placeholder里的字体颜色。