【HTML】HTML标签实例学习笔记（待更新）-黑马程序员，2024年最新字节跳动Linux运维面试凉凉经-CSDN博客

本文链接：https://blog.csdn.net/ccc6553584/article/details/137942855

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Linux运维全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上运维知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024b （备注运维）

正文

倾斜：<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属性主要针对于单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024b （备注运维）