前端三剑客HTML学习笔记

1.1 排版标签

1.2 文本格式化标签

1.3 标签属性

1.4 图像标签img -->单标签

1.5 链接标签 -->双标签

1.6 注释标签

目录文件夹

相对路径：

绝对路径 --> 不提倡使用

其他文本标签注意事项

3.1 锚点定位

3.2 base标签 --> 单标签

预格式化文本pre标签

3.4 特殊字符

4.1 创建表格

4.2 表格属性

4.3 表头单元格标签th

4.4 表格标题

4.5 合并单元格

5. 列表标签

5.1 无序列表ul

5.2 有序列表ol

5.3 自定义列表

6.1 input控件

6.2 label标签

6.3 textarea控件（文件域）

6.4 select下拉列表

7. form表单域

查文档的网站

1.1 排版标签

(1)标题标签 --> 双标签

分类总共有六级，分别是h1-h6，加了标题的文字会变得加粗，并且字体按照h6-h1的顺序依次变大增粗, 形式是<h></h>

(2)段落标签p --->paragraph 双标签

顾名思义，就是把html分成若干个段落，形式是<p>文本内容</p>。

(3)水平线标签hr --> horizontal 单标签

<hr />创建的是一条横跨网页水平线的标签，但是是一个单标签。

(4)换行标签br --> break 单标签

在HTML中，一个段落的文字会从左到右依次排列，知道浏览器窗口的右端，然后自动换行，如果希望文字某段强制换行显示，就需要使用换行标签，形式是< /br>。

(5)div和span标签

div和span本身是没有语义的，是我们进行页面布局的主要的两个盒子。

div即division的缩写，是分割，分区的意思，由很多的div组成我们的网页；span，意为跨度，跨距，范围

语法格式：<div>这是头部</div>, <span>今日价格</span>

区别：
(1).div标签是用来布局的，但是在一行之中只能放置一个div的标签。
(2).span标签也是用来布局的，但是一行上可以放置多个span标签。

1.2 文本格式化标签

字体加粗标签 --> 双标签

为bold的缩写，即是文字以粗体的方式显示（XHTML推荐使用strong），格式是<b>文字内容</b>和<strong>文字内容</strong>。

需要注意的是， b标签仅仅是加粗，但是strong除了加粗还有强调的意思，语义更加强烈。

斜体标签 --> 双标签

使得文字以斜体的格式显示，格式是<i></i>和<em></em>。

删除标签 --> 双标签

使得文字以加删除线的方式显示（XHTML推荐使用del）

<del>十块八块</del> ==> 十块八块，格式是<s></s>和<del></del>。

下划线标签 -- > 双标签

使得文字以加上下划线的方式显示， (XHTML不推荐使用<u></u>)，形式是<u></u>和<ins></ins>。

<ins></ins> ==>等待爱情

1.3 标签属性

格式是 <标签名属性1 = “值1” 属性2 = “值2”......>内容</标签名>。

eg: <手机颜色=“红色” 大小=“5寸”></手机>

1.4 图像标签img -->单标签

image图像，语法是<img src="URL"/>, 作用是在这里面添加图片。

属性	属性值	描述
src（必有）	URL	图像的路径
alt	文本	图像不能显示时的替换的文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面的页面百分比）	设置图像的宽度
height	像素（XHTML不支持%页面的页面百分比）	设置图像的高度
brder	数字	设置图像边框的宽度

注意：

(1)标签可以拥有多个属性，必须写在开始标签中，位于标签名的后面。
(2)属性之间不分先后顺序，标签名和属性，属性和属性之间均用空格分开。
(3)采取键值对的方式， key=value的格式。

eg:

正常的<br / >

带有边框的<br / >

有提示文本的<br / >

有替换文本的<br / >

1.5 链接标签 -->双标签

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

href, 用于指定链接目标的url的地址，是一个必须的属性，当为标签应用href属性时，他就具有了超链接的功能。

target，用于指定链接页面的打开方式，其取值由self和_blank两种方式，其中self为默认的值， _blank为在新的窗口之中打开方式。

注意是_blank而不是blank！！！

注意：

(1)外部链接，需要添加https://, 例如https://www/baidu.com
(2)内部链接，直接链接内部的页面名称即可， eg: <a href="index.html"></ a>。
(3)如果当时没有去顶的链接目标时，通常将href的属性值设置为"#"，即href="#"，表示该链接暂时为一个空的链接。
(4)不仅可以创建文本的超链接，在网页中的各种网页元素，比如图像、表格、音频、视频等都可以添加超链接。

1.6 注释标签

便于阅读和理解，但是又不需要显示在页面中的注释文字。

简单解释，注释不会显示在浏览器的窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码的时候可以查看到。

语法格式：  快捷键是Ctrl+/，或者是Ctrl+Shift+/, 需要注意注释添加在所注释语句的上一行。

目录文件夹

目录文件夹：普通的文件夹，存放了相关的页面素材，比如html文件，图片等。

根目录：打开文件夹的第一层。

相对路径：

以引用文件的网页所在的位置为参考基础，而建立出的目录文件。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同。

(1)同一级路径：直接写就可以

(2)下一级路径：即图像名称位于HTML文件同级文件夹下， "/"

(3)上一级路径：在文件名之前加入"../"，如果是上两级，则需要使用"../../"，以此类推，eg: <img src="../baidu.gif" />。

相对路径是从代码所在的文件出发，去寻找我们的目标文件的，而我们所说的在哪一级，为图片相对于HTML页面的位置。

绝对路径 --> 不提倡使用

绝对路径是以Web站点根目录为参考基础的目录路径，之所以称之为绝对，意为当所有的网页引用同一个文件时，所使用的路径是一样的。

“D：\web\img\logo.gif”, or 完整网络 "https://www.itcast.cn/images/logo.gif"

其他文本标签注意事项

3.1 锚点定位

通过创建锚点链接，用户能够快速的定位到目标的内容。

步骤：1.使用相应的id名标注跳转的目标的位置。 eg:<h3 id="two"> 第二集</ h3>(找目标)

2.<a href = "#id名" >链接文本</ a>创建文本链接（被点击）

3.2 base标签 --> 单标签

总结：
1.base标签可以设置整体的链接打开的状态。
2.base写到<head>< / head>之间。
3.把所有的链接都默认添加target = "_blank"。

预格式化文本pre标签

可以定义预格式化文本。被包围在<pre>标签元素中的文本通常会保留空格和换行符，而文本也会出现等宽的字体。

被<pre></ pre>包围的保留原格式，按照哦我们原来预先写好的文字格式来显示页面，保留空格和换行。

3.4 特殊字符

特殊字符	描述	字符的代码
<	小于号	&+lt+;
>	大于号	& + gt + ;
&	和号	& + amp + ;
¥	人民币	& + yen +;
©	版权	& + copy + ;
®	注册商标	& + reg + ;
°	摄氏度	& + deg + ;
±	正负号	& + plusmn + ;
×	乘号	& + times + ;
÷	除号	& + divide + ；
²	平方2	& + sup2 + ;
³	立方3	& + sup3 + ;
	空格符	& + nbsp + ;

4.1 创建表格

表格不是用来布局，而是常见显示和展示表格格式数据。

基本语法:

<table>
<tr>
<td>单元格文字</ td>
...
</ tr>
...
< /table>

注意事项：

1.table用于定义一个表格标签。
2.tr标签用于定义一个表格中的行，必须嵌套在table标签之中， row。
3.td标签定义表格中的单元格，必须嵌套在tr标签中， data。
4.字母td代表的是表格数据，即table data，数据单元格中的内容。

4.2 表格属性

属性名	属性名	常用的属性值
border	设置单元格的边框，默认border=“0”无边框	像素值
cellspacing	设置单元格和单元格之间的空白间距	像素值，默认为2像素
cellpadding	设置单元格内容和单元格边框之间的空白间距	像素值，默认是1像素
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中水平对齐的方式	left, center, right

4.3 表头单元格标签th

作用：一般表头单元格位于表格的第一行或者是第一列，并且文本加粗居中。

语法：只需要用表头标签<th></ th>替代相应的单元格标签<td></ td>即可。

4.4 表格标题

定义和用法：

<table>
<caption>我是表格标题< / caption>
< /table>

注意：

1.caption元素定义表格标题，通常这个标题会被居中并且显示在表格之上。
2.caption标签必须紧随在table标签之后。
3.这个标签只有在表格里面才有意义。

4.5 合并单元格

4.5.1 合并单元格的两种方式

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

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

4.5.2 合并单元格的顺序

合并的顺序我们按照先上后下，先左后右的顺序。

4.5.3 合并单元格的三步曲

1.先确定是跨行合并还是跨列合并。
2.根据先上后下，先左后右的原则找到目标单元格，然后写上合并方式还有要合并的单元格的数量， eg： <td colspan= "3" >< / td>。
3.删除多余的单元格——被覆盖的单元格要删除。

4.5.4 表格划分结构

对于比较复杂的表格，表格的结构就相对的复杂，所以又将表格分割成了三个部分：题头，正文和脚注，而这三部分分别用thead，tbody和tfoot来表示，这样更好的分清表格的结构。

注意：

1.<thead>< / thead>用于定义表格的头部，用来放标题之类的东西， <thead></thead>标签之间必须存放<tr>标签。
2.<tbody></tbody>标签用于定义表格的主体，放数据的本体。
3.<tfoot></tfoot>放表格的脚注之类。
4.以上的标签军放置在table标签中。

5. 列表标签

表格是用来显示数据的，列表是用来布局的。

概念：容器里面装载着结构，样式一致的文字或者图标的一种形式。特点是整齐，整洁，有序，可结合自由度更高。

5.1 无序列表ul

无序列表的各个列表项之间没有顺序级别之分，是并列的，基本语法格式：

注意事项：

1.<ul>< /ul>中只能嵌套<li></ li>标签，直接在其中输入其他标签或者文字的做法是不被允许的。
2.<li></ li>之间相当于是一个容器，可以容纳所有的元素。
3.无序列表会带有自己的样式属性，但是属性是交给css来做。

5.2 有序列表ol

有序列表即为有排列顺序的列表，其各个列表按照一定的顺序排列定义，有序列表的基本语法格式如下：

按照一定的顺序，前面有排列的标号，不可以随意的更改。

5.3 自定义列表

对术语或者是名词进行解释或者是描述，列表项没有任何的项目符号

6.1 input控件

作用：用来收集用户的信息。

HTML中，一个完整的表单通常是由表单控件（也成为表单元素）和提示信息加上表单域三部分组成。

<input type="属性值" value= "文字" />，此标签是一个单标签。

type属性设置不同的值来制定不同的控件的类型，除了type属性外还有别的属性。

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框（不可见）
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域，上传文件所用
name	由用户定义	空间名称，类似于我们的id
value	由用户定义	input控件中的默认的文本
size	正整数	input控件在页面中的显示宽度
checked	checked, 形式是checked="checked"	定义选择控件中默认被选中的项
maxlength	正整数	空间允许输入的最多字符数

1.type属性，决定是那种表单

eg1:用户名:<input type="text"/>

eg2:密码:<input type="password"/>

2.value属性

是value默认的文本值，有些表单想刚刚打开就默认显示几个文字，就可以通过value来设置。

3.name属性

后台通过name属性找到表单，主要的作用是区别不同的表单。name后的值是自定义的。

radio如果是一组的话就可以设置相同的name值来实现单选的效果。

<input type="radio" name="sex"/>男

<input type="radio" name="sex"/>女

checked属性

表示默认选中的状态，较常见于单选按钮和复选按钮

6.2 label标签

label标签为input元素定义标注（标签），用于绑定一个表单元素，被绑定的表单元素会获得输入焦点，就是当你点击input前的几个字的时候，光标会自动到后面的输入框之内。

方式:

1.用label标签直接包括， eg:<label>用户名:<input />< /label>, 适合单个的表单选择
2.for属性规定label与哪个表单元素绑定。
<label for ="sex">男< /label>
<input type="radio" name="sex" id="sex" />，类比锚点。

6.3 textarea控件（文件域）

通过textarea控件可以轻松的创建多行文本输入框

<textarea cols="每行中的字符数" rows="显示的行数">文本的内容</textarea>

但是实际考法之中不会使用，会通过别的来实现。

input标签是一个单标签，文本框text只能显示一行文本，单标签，通过value显示默认的文本值，适用于用户名，昵称和密码等。

textarea是文本域，可以显示多行文字，双标签，默认值写道标签的中间，适用于留言板。

6.4 select下拉列表

多个选项让用户进行选择，使用select控件定义下拉列表。

注意至少要包含一对option， option中定义selected="selected"时，当前项即为默认选中的项。

7. form表单域

HTML中，form表单被用于定义表单域，以实现用户信息的收集和传递。form中的所有的内容都会被提交给服务器。

各种表单控件

</ form>

团队约定：元素属性值可以使用双引号语法，元素属性值可以写上的就都写上，不要使用默认的值，因为不同的浏览器可能说默认不一样。

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

method, 有两种方式，get和post，设置表单数据的提交方式

name，指定表单名称，区分同一页面中的多个表单。

查文档的网站

W3C: https://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/