网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
HTML 标签是可以嵌套的,标签里面可以放其它标签
- 外层的标签称为父标签/父元素
- 里层的标签称为子标签/子元素
通过 HTML 文件的基本结构,我们会发现各个标签之间其实是有着一个层次关系,包括:
- 父子关系:例如 html 和 head 标签就是一个父子关系,head 和 title 标签就是一个父子关系
- 兄弟关系:例如 head 和 body 标签就是一个兄弟关系
这种嵌套的层次结构就构成了数据结构中的 N 叉树,在这里我们称之为 DOM 树(Document Object Mode)
1.4 快速生成代码框架
在 VScode 或 IDEA 等编译器中,可以通过 ! + tab
组合按键,让编译器快速的自动生成 HTML 代码的主体框架
<!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>
称为 DTD(文档类型定义),方便浏览器来识别当前的文件类型(此时值为 html,故表示当前的文件是一个 html5 版本的文件) -
<html lang='en'>
中 lang 是 html 标签的一个属性,表示当前的页面是一个英语页面。有些浏览器会根据该属性提示是否启动自动翻译功能 -
<meta charset='UTF-8'>
是用来描述页面的字符编码方式,UTF-8 是一种字符编码方式 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
name="viewport"
其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域content="width=device-width, initial-scale=1.0"
表示设置可视区和设备宽度等宽,并设置初始缩放为不缩放(该属性对于移动端开发更重要)
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
该行代码告诉 IE浏览器 IE8/9 及以后的版本都会以最高版本 IE 来渲染页面
1.5 浏览器的开发者工具
浏览器中含自带的网页开发者工具,可以帮助前端以及测试人员来快速定位、分析和解决问题
打开方式:
- 方式一:按 F12 键
- 方式二:右键页面选择检查
- 方式三:按 Crtl + Shift + i 组合按键
打开后,页面如下
元素(Elements)模块: 查看网页页面的所有元素,修改元素的代码与属性。用于查看修改元素的属性、CSS 属性、监听事件以及断点等等。
- 查看元素代码:点击开发者工具左上角的箭头图标进入选择元素模式,在页面中找到要查看的页面,用鼠标移动过去,开发者工具内就会显示对应的代码
- 修改元素的代码和属性:在开发者工具中可以对元素进行属性的修改,但这仅仅是对当前页面进行修改,而不会修改服务器的源代码,常用作调试页面效果
使用示例:
2. HTML 常见标签
2.1 注释标签
标签形式及介绍: 注释过的文本不会显示在界面上
<!-- 我是注释 -->
快捷键:Crtl + /
可以快速进行注释或取消注释
注意: HTML 中注释不可以嵌套使用
2.2 标题标签
标签形式及介绍: 有6个标题标签,从 h1 到 h6,数字越大,字体越小
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
示例:
注意: 每个标题的字体大小、粗细都是浏览器默认定义的,因此不同的浏览器运行出的效果可能会有不同。可以使用自定义样式来覆盖默认的样式
2.3 段落标签
标签形式及介绍: 将一篇文章直接复制到 html 中,文章不会分段,通过 p 标签,可以将每段进行分段
<p>这是一个段落</p>
不使用 p 标签示例:
使用 p 标签示例:
注意:
- 使用 p 标签会使文章有段落感,p 标签之间会有明显的间距。但是使用 p 标签不会使段首产生缩进效果,缩进会在 CSS 章节介绍
- 在 HTML 中,内容首尾的换行和空格均无效
- 在 HTML 中,文字之间输入多个空格只相当于一个空格
- 在 HTML 中,直接输入换行不会真的换行,而是相当于一个空格
2.4 换行标签
标签形式及介绍: br 是 break 的缩写,表示换行
<br/>
示例:
注意:
- br/ 是一个单标签,不需要结束标签
- 使用 br/ 标签后的换行效果不会像使用 p 标签那样产生段落感,仅仅就是换行
2.5 格式化标签
标签形式及介绍: 下面介绍加粗、倾斜、删除线和下划线标签
<strong>strong 标签用于加粗</strong>
<b>b 标签用于加粗</b>
<em>em 标签用于倾斜</em>
<i>i 标签用于倾斜</i>
<del>del 标签用于加删除线</del>
<s>s 标签用于加删除线</s>
<ins>ins 标签用于加下划线</ins>
<u>u 标签用于加下划线</u>
示例:
2.6 图片标签
标签形式及介绍: img 标签用于显示图片,必须带有 src 属性,该属性的值为图片的路径
<img src="图片路径">
示例:
img 标签的其它属性:
属性 | 描述 |
---|---|
alt | 表示替换文本,如果当前图片不能正确显示,就会显示该替换的文字 |
title | 表示提示文本,当鼠标放到图片上,就会显示提示的文字 |
width/heigth | 控制图片的宽度和高度,单位是像素 px,当只设置其中一个时,另一个属性会等比例缩放 |
border | 表示边框,参数是宽度的像素,该属性一般用 CSS 来设定 |
注意:
- img 是一个单标签,不需要结束标签
- src 的值,即图片路径,可以使用相对路径(推荐使用)、绝对路径(磁盘路径和网络路径)
2.7 超链接标签
标签形式及介绍: a 标签是用于超链接,必须具备 href 属性,即链接的地址
<a href="链接地址">链接名</a>
示例:
a 标签的其它属性: target 属性表示打开链接的方式,默认值为 _self,即使用当前页面打开该链接,也可以设置值为 _blank,即使用信道标签页打开该链接
链接的几种形式:
- 外部链接:href 引用其它网站的地址
<a href="https://blog.csdn.net/weixin\_51367845?type=blog">吞吞吐吐大魔王的CSDN主页</a>
- 内部链接:网站内部页面之间的链接,href 值为相对路径
- 空链接:使用 # 在 href 中占位
<a href="#">空链接</a>
- 下载链接:href 对应的路径是一个文件
<a href="test.zip">下载文件</a>
- 网页元素链接:可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="https://blog.csdn.net/weixin\_51367845?type=blog">
<img src="./image/弥豆子.jfif">
</a>
- 锚点链接:可以快速定位到页面中的某个位置
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
<img src="./image/one.jpg">
...
</p>
<p id="two">
第二集剧情 <br>
<img src="./image/two.jpg">
...
</p>
<p id="three">
第三集剧情 <br>
<img src="./image/three.jpg">
...
</p>
注意: 禁止 a 标签跳转到 <a href="javascript:void(0);">
或者 <a href="javascript:;">
2.8 表格标签
标签形式及介绍:
- table 标签:表示整个表格,其它表格标签都在它内部
<table>
</table>
- tr 标签:表示表格的一行
<tr></tr>
- td 标签:表示一个单元格
<td></td>
- th 标签:表示表头单元格,字体会居中加粗
<th></th>
- thead 标签:表示表格的头部区域(注意和 th 区分,它表示整个表格的表头)
<thead></thead>
- tbody 标签:表示表格的主体区域
<tbody></tbody>
table 标签的属性: 表格标签有一些属性可以用于设置表格大小、边框等,这些属性都放在 table 标签中
属性 | 描述 |
---|---|
align | 表示整个表格相对于周围元素的对齐方式,有 left、center、right |
border | 表示边框大小,1表示有边框(数字越大,边框越粗);""表示没边框 |
cellpadding | 表示内容距离边框的距离,默认1像素 |
cellspacing | 表示单元格之间的距离,默认2像素 |
width/heigth | 设置表格尺寸 |
示例:
<body>
<table align="left" border="1" cellspacing="0" width="500" heigth="300">
<thead>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>13</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>16</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
td 标签的属性:
- rowspan 属性:表示跨行合并,
rowspan="n"
表示从该行开始到下面n行,合并成一行,合并行内容为本行内容 - colspan 属性:表示跨列合并,
colspan="n"
表示从该列开始到右边n列,合并成一列,合并列内容为本列内容
示例:
<body>
<table align="left" border="1" cellspacing="0" width="500" heigth="300">
<thead>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td colspan="2">13</td>
</tr>
<tr>
<td>16</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
2.9 列表标签
标签形式及介绍:
- 无序列表标签:ul 和 li
<ul>
<li></li>
</ul>
- 有序列表标签:ol 和 li
<ol>
<li></li>
</ol>
- 自定义列表标签:dl(总标签)、dt(小标题)、dd(围绕每个小标题下的说明)
注意:
- 列表中各元素是并列关系
- ul 和 ol 中只能放 li 标签,dl 中只能放 dt 和 dd 标签
- li 中可以放其它标签
- 列表带有自己的样式,但可以使用 CSS 来修改
示例1: 无序列表
<body>
<ul>
<li>第一集</li>
<li>第二集</li>
<li>第三集</li>
</ul>
</body>
示例2: 有序列表
<body>
<ol>
<li>第一集</li>
<li>第二集</li>
<li>第三集</li>
</ol>
</body>
示例3: 自定义列表
<body>
<dl>
<dt>第一季</dt>
<dd>第一集</dd>
<dd>第二集</dd>
<dt>第二季</dt>
<dd>第一集</dd>
<dd>第二集</dd>
</dl>
</body>
2.10 表单标签
表单是让用户输入信息的重要途经,表单分成两个部分
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上Go语言开发知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
d>
<dt>第二季</dt>
<dd>第一集</dd>
<dd>第二集</dd>
</dl>
![image-20220121161106610](https://i-blog.csdnimg.cn/blog_migrate/27a7cd482c1cc3563d8a1add46a4f6ee.png)
### 2.10 表单标签
表单是让用户输入信息的重要途经,表单分成两个部分
[外链图片转存中...(img-oymFEZOp-1715373011417)]
[外链图片转存中...(img-vIkHC2vl-1715373011418)]
[外链图片转存中...(img-aFEpHkg1-1715373011418)]
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上Go语言开发知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[如果你需要这些资料,可以戳这里获取](https://bbs.csdn.net/topics/618658159)**