【HTML】HTML标签实例学习笔记（待更新）-黑马程序员

东方神剑2023

已于 2024-03-04 10:17:35 修改

阅读量916

点赞数 25

文章标签： html 学习笔记

于 2024-03-04 10:16:57 首次发布

本文链接：https://blog.csdn.net/qq_41562897/article/details/136443818

版权

本文详细介绍了HTML标签的基础知识，包括成对标签的使用、文档类型声明、语言设定、字符集、标题标签的层次结构、段落和换行，以及图像、链接、注释、表格、列表和表单元素的详细说明。

摘要由CSDN通过智能技术生成

【HTML】HTML标签实例学习笔记（待更新）-黑马程序员

成对出现的标签

标签一般都是成对出现，标签之间的关系有包含关系和并列关系两种。

像 <head></head>为双标签，<br/>为单标签单标签很少大多数都为双标签。
<!DOCTYPE> 文档类型声明，作用就是i告诉浏览器哪种 HTML格式来显示网页

lang语言种类（用来定义当前文档显示的语言）

1.en定义语言为英语
2.zh-CN定义语言为中文

字符集 <meta charset=”UTF-8” /> :一定要写否则会出现乱码的情况

标题标签 <h1>-<h6>（重要）
为了使网页具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题。即<h1>-<h6>。

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

单词head的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。

特点：

加了标题的文字会变的加粗，字号也会依次变大。

<P>标签用于定义段落，它可以将整个网页分为若干个段落

<p></p>

标签语义：将文章分成几段
特点：

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

<br />换行标签
在HTML中，一个段落中的文字会从左到右一次排列，直到浏览器窗口的右端，然后才自动换行，如果希望某段文字自动换行，就需要使用换行标签<br />
标签语义：强制换行
特点：1、是一个单标签

文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
加粗：<strong></strong>或者<b></b>
倾斜：<em></em>或者<i></i>
删除线：<del></del>或者<s></s>
下划线：<ins></ins>或者<u></u>

<div>和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
<div>这是头部</div> ：超大的盒子，一个人独占一行，可以装很多的内容
<span>今日价格</span> ：一行上可以多个<span>。小盒子

图像标签和路径（重点）
1、图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像。
alt(图片显示不出来的时候显示在图片上图片裂开)；
title（鼠标放到图片上，提示的文字）；
width height border（设置图像边框的粗细）

<img src=”图像URL“/>

图像标签注意点
1、图像标签可以拥有多个属性，必须写在标签名的后面。
2、属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3、属性采取键值对的格式，即key=”value”的格式，属性=”属性值“。

下一级 / 上一级../
相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置
绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

链接的语法格式 <a></a>
必须属性：href

链接分类：target为窗口打开方式

1.外部链接（必须以http：// 开头）_self为默认值 _blank为在新窗口中打开方式。
2.内部链接
3.空链接
4.下载链接：
5.网页元素的链接（即把中间的文字换成一个图片的格式）
6.锚点链接（点击链接，可以快速定位到页面中的某个位置）
成果展示：一点击就到了

注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以 结束

Ctrl + / 能够快速的添加注释

注意：注释标签是给程序员看的，这个代码不执行不显示到页面中的

特殊字符

1.表格标签
1.1表格的主要作用
表格主要用于显示、展示数据
1.2表格的基本语法

1.<table></table>用于定义表格的标签
2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
4.字母td指表格数据，即数据单元格的内容

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

标签表示HTML表格的表头部分（table head）的缩写

1.4表格属性
表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置
这些属性要写到表格标签table里面去
例如：

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

1.6合并单元格
合并单元格方式：

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

目标单元格：（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格。写合并代码

合并单元格三部曲：

-》

1.7表格总结
1.表格的相关标签
我们学习了
table标签 tr行标签 td单元格标签 th表头单元格标签thead表格头部区域标签 tbody表格主体区域标签
合并单元格标签

2.列表标签
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便
列表分为三大类：无序列表、有序列表、自定义列表。
2.1无序列表（重点）

标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用
标签定义。无序列表的语法格式如下：

2.2有序列表
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。
有序列表的基本语法格式如下：

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

在HTML标签中，<dl>标签用于定义描述列表，该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。
基本语法：

2.4列表总结

3.表单标签

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

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

3.4表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单输入或者选择的内容控件。

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

3.4.1 input
<input>标签用于收集用户信息。
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式

<input/>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
type属性的属性值及其描述如下：

例：
password：密码（输入会隐藏）
radio:单选按钮
checkbox：复选框实现多选效果
复选name属性和单选按钮一样，需要做到几个的名字一致
submit：提交
reset:重置
button:普通按钮
file:上传文件
input的属性
value:
checked:单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮checked=”checked”
maxlength:输入字段输入的最大长度
name：

注意：
1.name和value是每个表单元素都有的属性值，主要给后台人员使用。
2.name表单元素的名字，要求单选按钮和复选框要有相同的name值。
3.checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素

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

语法：

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

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

注意：

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

3.4.4<textarea>表单元素
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文本，该控件常见于留言板，评论。
语法：

1.通过<textarea>标签可以轻松地创建多行文本输入框。
2.cols=“每行中的字符数”，rows=“显示的行数”，我们实际开发中不会使用，都是使用css来改变大小