当前位置：首页 > news >正文

01--HTML基础

news 2025/10/12 14:25:33

一.什么是HTML页面

HTML超文本标记语言

超文本:文本,声音,图片,视频,表格...

标记:由许许多多标签组成

二.HTML结构

1.标签介绍

HTML是由标签构成的

<标签名>

双标签(大部分):标签有开始有结束,例如<body> 标签内容 </body>

单标签(少部分):只有开始标签

开始标签中可能有属性,例如id属性就相当于给这个标签设置了一个唯一的标识码

<body id="MyId"> Hello </body>

2.HTML基本结构

<html><head> <title>Hello,World</title></head><body>你好,世界</body>
</html>

html是整个html文件的根标签(最顶层标签)

head中写的是文件的属性

title中写的是页面的标签

body中写的是页面的内容

3.标签层次结构

head和body是html标签的子标签(html是head和body的父标签)

title是head的子标签(head是title的父标签)\

body和head是兄弟标签

标签之间的结构就构成了一棵DOM树

4.HTML常见标签

注释标签

不会显示在页面上,只是为了提高代码的可读性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>这是注释<!-- 这是注释 -->
</body>
</html>

标题标签h1-h6

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 这是注释这是注释 --><h1> 标题一</h1><h2> 标题二</h2><h3> 标题三</h3><h4> 标题四</h4><h5> 标题五</h5><h6> 标题六</h6>
</body>
</html>

h1-h6依次变小

段落标签p

把一段比较长的文本显示在网页上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 这是注释这是注释 --><!-- <h1> 标题一</h1><h2> 标题二</h2><h3> 标题三</h3><h4> 标题四</h4><h5> 标题五</h5><h6> 标题六</h6> -->
一、政府规划与政策支持文件
《永济市国民经济和社会发展第十四个五年规划和二〇三五年远景目标纲要》
核心内容：明确提出巩固省级农产品质量安全县创建成果，加快“三品一标”认证步伐，全力打造“永济葡萄”等特色品牌，推进“区域公用品牌+企业产品品牌”的母子品牌模式建设，积极争创农产品地理标志商标。
分析：该文件为永济葡萄产业提供了长期发展框架，强调品牌化、标准化建设，是产业升级的政策依据。
《永济市人民政府关于确定“永济葡萄”和“永济芦笋”地理标志证明商标注册申请人的批复》
核心内容：同意永济市国营黄河农牧中心作为“永济葡萄”地理标志证明商标注册申请人，负责向国家知识产权局申请注册及日常监督管理。
分析：此批复标志着“永济葡萄”品牌保护进入法律程序，有助于提升产品市场竞争力。
二、产业发展动态与项目实施
《永济市农业农村局2025年设施水果发展项目实施方案》
核心内容：省财政安排100万元用于设施水果发展，重点支持果园设施建设（如防雹网、水肥一体化）、新优品种引进、“三新”果园集成技术推广等。方案明确申报主体需具备土地合规性、示范带动能力等条件，每亩补助1000元。
分析：该方案直接推动葡萄产业技术升级和规模化发展，通过资金扶持和标准制定，促进产业提质增效。
《永济：发展特色农业 “葡”写振兴新篇》
核心内容：卿头镇作为华北最大晚熟鲜食葡萄基地，种植面积达5万亩，拥有54家水果保鲜库，形成“公司+协会+合作社+农户+互联网”模式，成为乡村振兴重要引擎。
分析：动态报道展示了葡萄产业在永济的规模化、市场化成果，凸显其经济带动作用。
三、产业创新与融合发展
《卿头镇：葡萄农创园 串起“甜蜜链”》
核心内容：卿头镇改造提升葡萄展示观光园，打造集葡萄文化展馆、研学、采摘于一体的乡村田园综合体，项目涵盖农产品展销、主题餐厅、电商中心等功能区，推动“农业+电商+文旅”融合。
分析：该案例体现了葡萄产业从单一种植向三产融合的转型，通过文化赋能和业态创新，提升产业附加值。
《永济市组织农业领域银发人才调研指导葡萄产业发展》
核心内容：农业专家深入卿头镇葡萄基地，就品种优化、科学施肥、病虫害防治等提出建议，并点赞当地智能化保鲜冷库和产业链规范化发展。
分析：动态反映了政府通过技术指导提升葡萄品质和产业效益的努力，强化了科技对产业的支撑作用。
四、基层实践与党建引领
《永济市开张镇枣圪塔村：党建引领产业兴》
核心内容：枣圪塔村党支部带领村民调整产业结构，引进克伦生、阳光玫瑰等葡萄品种，成立合作社，形成“合作社+农户+基地”模式，全村种植面积达3000亩，亩均收入1.5万元。
分析：该案例展示了基层党建在产业振兴中的核心作用，通过组织化经营和品种升级，实现农民增收。
</body>
</html>

可以看到就算我们的文本文件分了段落分了行,但是在页面中却显示的是一长段文字,这是就要用到段落标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 这是注释这是注释 --><!-- <h1> 标题一</h1><h2> 标题二</h2><h3> 标题三</h3><h4> 标题四</h4><h5> 标题五</h5><h6> 标题六</h6> --><p>一、政府规划与政策支持文件《永济市国民经济和社会发展第十四个五年规划和二〇三五年远景目标纲要》核心内容：明确提出巩固省级农产品质量安全县创建成果，加快“三品一标”认证步伐，全力打造“永济葡萄”等特色品牌，推进“区域公用品牌+企业产品品牌”的母子品牌模式建设，积极争创农产品地理标志商标。分析：该文件为永济葡萄产业提供了长期发展框架，强调品牌化、标准化建设，是产业升级的政策依据。《永济市人民政府关于确定“永济葡萄”和“永济芦笋”地理标志证明商标注册申请人的批复》核心内容：同意永济市国营黄河农牧中心作为“永济葡萄”地理标志证明商标注册申请人，负责向国家知识产权局申请注册及日常监督管理。分析：此批复标志着“永济葡萄”品牌保护进入法律程序，有助于提升产品市场竞争力。</p><p>二、产业发展动态与项目实施《永济市农业农村局2025年设施水果发展项目实施方案》核心内容：省财政安排100万元用于设施水果发展，重点支持果园设施建设（如防雹网、水肥一体化）、新优品种引进、“三新”果园集成技术推广等。方案明确申报主体需具备土地合规性、示范带动能力等条件，每亩补助1000元。分析：该方案直接推动葡萄产业技术升级和规模化发展，通过资金扶持和标准制定，促进产业提质增效。《永济：发展特色农业 “葡”写振兴新篇》核心内容：卿头镇作为华北最大晚熟鲜食葡萄基地，种植面积达5万亩，拥有54家水果保鲜库，形成“公司+协会+合作社+农户+互联网”模式，成为乡村振兴重要引擎。分析：动态报道展示了葡萄产业在永济的规模化、市场化成果，凸显其经济带动作用。</p><p>   三、产业创新与融合发展《卿头镇：葡萄农创园 串起“甜蜜链”》核心内容：卿头镇改造提升葡萄展示观光园，打造集葡萄文化展馆、研学、采摘于一体的乡村田园综合体，项目涵盖农产品展销、主题餐厅、电商中心等功能区，推动“农业+电商+文旅”融合。分析：该案例体现了葡萄产业从单一种植向三产融合的转型，通过文化赋能和业态创新，提升产业附加值。《永济市组织农业领域银发人才调研指导葡萄产业发展》核心内容：农业专家深入卿头镇葡萄基地，就品种优化、科学施肥、病虫害防治等提出建议，并点赞当地智能化保鲜冷库和产业链规范化发展。分析：动态反映了政府通过技术指导提升葡萄品质和产业效益的努力，强化了科技对产业的支撑作用。</p><p>四、基层实践与党建引领《永济市开张镇枣圪塔村：党建引领产业兴》核心内容：枣圪塔村党支部带领村民调整产业结构，引进克伦生、阳光玫瑰等葡萄品种，成立合作社，形成“合作社+农户+基地”模式，全村种植面积达3000亩，亩均收入1.5万元。分析：该案例展示了基层党建在产业振兴中的核心作用，通过组织化经营和品种升级，实现农民增收。</p>    </body>
</html>

注意:

当前p标签描述的段落,还没有首行缩进(需要使用CSS对标签进行修饰)

自动根据浏览器宽度进行排版

在html文件中输入多个空格也只显示一个空格,回车也不是真正的换行符,而是被解析为一个空格

换行标签br

br是break的缩写,表示换行

br是一个单标签

<br/>是规范写法,不推荐写为<br>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 这是注释这是注释 --><!-- <h1> 标题一</h1><h2> 标题二</h2><h3> 标题三</h3><h4> 标题四</h4><h5> 标题五</h5><h6> 标题六</h6> --><p>一、政府规划与政策支持文件《永济市国民经济和社会发展第十四个五年规划和二〇三五年远景目标纲要》核心内容：明确提出巩固省级农产品质量安全县创建成<br/>果，加快“三品一标”认证步伐，全力打造“永济葡萄”等特色品牌，推进“区域公用品牌+企业产品品牌”的母子品牌模式建设，积极争创农产品地理标志商标。分析：该文件为永济葡萄产业提供了长期发展框架，强调品牌化、标准化建设，是产业升级的政策依据。《永济市人民政府关于确定“永济葡萄”和“永济芦笋”地理标志证明>>标志证明商标注册申请人，负责向国家知识产权局申请注册及日常监督管理。分析：此批复标志着“永济葡萄”品牌保护进入法律程序，有助于提升产品市场竞争力。</p><p>二、产业发展动态与项目实施《永济市农业农村局2025年设施水果发展项目实施方案》核心内容：省财政安排100万元用于设施水果发<br/>展，重点支持果园设施建设（如防雹网、水肥一体化）、新优品种引进、“三新”果园集成技术推广等。方案明确申报主体需具备土地合规性、示范带动能力等条件，每亩补助1000元。分析：该方案直接推动葡萄产业技术升级和规模化发展，通过资金扶持和标准制定，促进产业提质增效。《永济：发展特色农业 “葡”写振兴新篇》核心内容：卿头镇作为华北最大晚熟鲜食葡萄基地<br/>，种植面积达5万亩，拥有54家水果保鲜库，形成“公司+协会+合作社+农户+互联网”模式，成为乡村振兴重要引擎。分析：动态报道展示了葡萄产业在永济的规模化、市场化成果，凸显其经济带动作用。</p><!-- <p>   三、产业创新与融合发展《卿头镇：葡萄农创园 串起“甜蜜链”》核心内容：卿头镇改造提升葡萄展示观光园，打造集葡萄文化展馆、研学、采摘于一体的乡村田园综合体，项目涵盖农产品展销、主题餐厅、电商中心等功能区，推动“农业+电商+文旅”融合。分析：该案例体现了葡萄产业从单一种植向三产融合的转型，通过文化赋能和业态创新，提升产业附加值。《永济市组织农业领域银发人才调研指导葡萄产业发展》核心内容：农业专家深入卿头镇葡萄基地，就品种优化、科学施肥、病虫害防治等提出建议，并点赞当地智能化保鲜冷库和产业链规范化发展。分析：动态反映了政府通过技术指导提升葡萄品质和产业效益的努力，强化了科技对产业的支撑作用。</p><p>四、基层实践与党建引领《永济市开张镇枣圪塔村：党建引领产业兴》核心内容：枣圪塔村党支部带领村民调整产业结构，引进克伦生、阳光玫瑰等葡萄品种，成立合作社，形成“合作社+农户+基地”模式，全村种植面积达3000亩，亩均收入1.5万元。分析：该案例展示了基层党建在产业振兴中的核心作用，通过组织化经营和品种升级，实现农民增收。</p>     --></body>
</html>

格式化标签

加粗标签:strong和b

倾斜标签:em和i

删除线标签:del和s

下划线标签:ins和u

<html><head> <title>格式化标签</title></head><body><strong>strong 加粗</strong><b>b 加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u></body>
</html>

注:使用CSS也可以完成该功能,业务上我们一般会使用CSS来完成

图片标签img

img标签必须带有src属性,表示图片的路径

路径分为绝对路径和相对路径

相对路径:

(./)xxx.jpg 必须和html文件在同级目录下

(./)img/xxx.jpg 在和html文件同级目录的文件夹下

../xxx.jpg 在html文件的上级目录下

绝对路径:

本地图片路径

网络上的资源图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 相对路径 --><img src ="初音表情包2.jpg" width="300px" height="300px"><img src ="img/初音表情包10.jpg" width="300px" height="300px"><img src ="./img/初音表情包12.jpg" width="300px" height="300px"><!-- 绝对路径 --><img src="https://ts3.tc.mm.bing.net/th/id/OIP-C.IuNuzsR9jKSqu2-VTCmNOAHaE8?rs=1&pid=ImgDetMain&o=7&rm=3" width="300px" height="300px"><img src="E://初音表情包20.jpg" alt="初音未来图片加载失败">
</body>
</html>

img的其他属性

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.

title: 提示文本. 鼠标放到图片上, 就会有提示.

width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片

失衡.

border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

补充

属性可以有多个,都不能写在标签前面

属性之间用空格或者换行进行分割

属性之间不分先后

属性使用键值对(key value)的格式来表示,前面是属性名,后面是值,中间用=进行连接

超链接标签a

属性

href:点击后跳转到哪个页面(必须有)

target:打开方式,默认_self,如果是_blank,则使用新标签页`打开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 默认_self打开 --><a href="https://www.baidu.com/" >百度一下 </a><br/><!-- 使用新标签页打开 --><a href="https://www.baidu.com/" target="_blank">百度一下 </a><br/><!-- 跳转至内部链接 --><a href="html04.html" target="_blank"> 跳转至内部链接</a><!-- 使用图片进行跳转 --><a href="https://www.baidu.com/"> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></a><br/><!-- 跳转至自身 --><!-- #空链接 --><a href="#">当前网页 </a><br/><!-- 锚点链接 --><a href="#one">第一集</a><a href="#two">第二集</a><a href="#three">第三集</a><p id="one">第一集剧情 <br>第一集剧情 <br>...</p><p id="two">第二集剧情 <br>第二集剧情 <br>...</p><p id="three">第三集剧情 <br>第三集剧情 <br>...</p><br/><!-- 下载链接 --><a href="初音表情包2.jpg"> 打开图片</a><!-- 如果这里是zip文件可以之间下载 -->
</body>
</html>

小结

链接的几种形式

外部链接: href 引用其他网站的地址

内部链接: 网站内部页面之间的链接. 写相对路径即可.

空链接: 使用 # 在 href 中占位.

下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

锚点链接: 可以快速定位到页面中的某个位置

禁止 a 标签跳转: <a href="javascript:void(0);"> 或者 <a href="javascript:;">

表格标签

基本使用

table:表示整个表格

tr:表示表格的一行

td:表示一个单元格

th:表示表头单元格:会居中加粗

thead:表格的头部区域(范围要比th大)

tbody:表格的主体内容

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.

这些属性都要放到 table 标签中.

align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)

border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺寸.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td>男</td><td>11</td></tr><tr><td>李四</td><td>男</td><td>10</td></tr><tr><td>王五</td><td>女</td><td>20</td></tr></table>
</body>
</html>

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>男</td><td>11</td></tr><tr><td>李四</td><td>男</td><td>10</td></tr><tr><td>王五</td><td>女</td><td>20</td></tr></tbody></table>

我们一般把表头封装在thead中,正文部分封装在tbody中,这是为了CSS设置格式方便(后面讲到CSS会介绍)

合并单元格

跨行合并: rowspan="n"

跨列合并: colspan="n"

步骤

1.先确定要合并行还是列

2.找目标单元格(左右合并从左开始,上下合并从上开始)

3.删除多余的单元格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td rowspan="2">男</td><td>11</td></tr><tr><td>李四</td><!-- <td>男</td> --><td>10</td></tr><tr><td colspan="3">王五/女/20</td><!-- <td>女</td><td>20</td> --></tr></tbody></table>
</body>
</html>

列表标签

主要是用来布局美观的

分类

无序列表(最常用):ul li

有序列表:ol li

自定义列表(也常用):dl(总标题) dt(小标题) dd(小标题内容)

注

元素之间是并列关系

ul和ol下只能用li,不能用dt和dd

dl下只能用dt和dd,不能用li

li标签中可以放其他标签

列表可以修改格式(后面用CSS修改比较方便)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul>无序列表<li>无序列表1</li><li>无序列表2</li><li>无序列表3</li></ul><ol>有序列表<li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><dl>自定义列表总标题<dt> 自定义列表标题1<dd>自定义列表标题1内容1</dd></dt><dt> 自定义列表标题2<dd>自定义列表标题2内容1</dd><dd>自定义列表标题2内容2</dd></dt></dl>
</body>
</html>

属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- circle 空心圆 --><!-- disc 实心圆 (默认展示) --><!-- squre 实心方块 --><ul type="circle">无序列表<li>无序列表1</li><li>无序列表2</li><li>无序列表3</li></ul><!-- a小写字母 A大写字母 i小写罗马数字 I大写罗马数字 1数字(默认) --><!-- start 开始序号 --><ol type="i" start="6">有序列表<li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><dl>自定义列表总标题<dt> 自定义列表标题1<dd>自定义列表标题1内容1</dd></dt><dt> 自定义列表标题2<dd>自定义列表标题2内容1</dd><dd>自定义列表标题2内容2</dd></dt></dl>
</body>
</html>

表单标签

表单标签是让用户输入的重要途径

分为两部分:

表单域: from标签包含表单元素的区域

表单控件: input标签输入框,提示按钮等等

from标签

要将什么数据提交到哪个页面上

(form标签需要结合服务器和网络编程来理解,后面讲)

input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

属性

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.

name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.

value: input 中的默认值.

checked: 默认被选中. (用于单选按钮和多选按钮)

maxlength: 设定最大长度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- <form action="https://www.baidu.com/">你好百度</form> --><!-- 单行文本框 -->单行文本框:<input type="text"><br/><!-- 密码框 -->密码:<input type="password"><br/><!-- 单选框 -->性别:<input type="radio" name="gender" checked="checked"> 男<input type="radio" name="gender"> 女<input type="radio" name="gender"> 保密<br/><!-- 复选框 -->爱好:<input type="checkbox" name="hobby"> 篮球<input type="checkbox" name="hobby"> 足球<input type="checkbox" name="hobby"> 乒乓球<input type="checkbox" name="hobby"> 羽毛球<input type="checkbox" name="hobby"> 跑步<br/><!-- 按钮 --><input type="button" value="普通button" onclick="alert('我被点击了')"> <br/><form action="https://www.baidu.com/">提交内容<input type="text"><!-- 提交按钮 --><input type="submit" value="提交"><!-- 重置 --><input  type="reset" value="重置"><br/><!-- 选择文件 --><input type="file"></form>
</body>
</html>

小结

文本框密码框单选框复选框普通按钮提交按钮清空按钮选择文件

label标签

搭配input标签使用,点击label也能选中对于的单选/复选框,提升用户体验

for属性:指定当前label与哪个相同id的input标签对应(相同id只有一个,也就是一对一的关系,这里不是name)

select标签

下拉菜单

option中定义select=select表示默认选项,但是实际上可以将默认选项直接放在第一个,这和手动定义select是一个效果

textarea标签

文本域中的内容,就是文本框的默认内容

属性有rows和cols设置行和列,但是实际上不会使用,都是通过CSS来修改的

无语义标签 div和span

div 标签, division 的缩写, 含义是分割

span 标签, 含义是跨度

实际上就相当于两个盒子,div占一行,是一个大盒子,span不单独占一行,是一个小盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>姓名:<input type="text" size="7"><br/>性别:<label for="male"><input type="radio" name="gender" id="male"> 男</label><label for="famale"><input type="radio" name="gender" id="famale">女</label><br/>生日:<select> <option>选择出生月份</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select>月<input type="text" size="2"> 日<br/>自我介绍: <textarea rows="5" cols="30">快和大家介绍一下自己</textarea><br/><div><span> span1 </span><span> span2 </span><span> span3 </span></div><div><span> span4 </span><span> span5 </span><span> span6 </span></div>
</body>
</html>

如何查看页面结构

右键检查或者F12打开开发者工具就可以查看网页细节

快速生成代码框架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

在一个新建的html文件中直接输入!加Enter,就可以直接生成上面的代码框架

细节解释:

DOCTYPE:成为DTD(文档类型定义),这里描述当前文件是一个HTML5文件

lang:language语言,这里的en指的是英文

charset:该网页的字符编码方式,没有改行可能会导致中文乱码

name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区

域

content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并

设置初始缩放为不缩放. (移动端适配)

三.综合案例

1.展示个人简历

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简历</title>
</head>
<body><h1>个人简历</h1> <br/><!-- 基本信息 --><div> <p><h2>基本信息</h2></p><p><strong>姓名:</strong> <span>初音未来</span></p><p><strong>性别:</strong> <span>女</span></p><p><strong>年龄:</strong> <span>18</span> </p><p><strong>博客:</strong> <a href="https://blog.csdn.net/iuuia?spm=1000.2115.3001.10640"><span>https://blog.csdn.net/iuuia?spm=1000.2115.3001.10640 </span></a></p><p><strong>码云:</strong><a href="https://gitee.com/shen_yu66"><span>https://gitee.com/shen_yu66</span></a></p><p> <img src="img/初音表情包2.jpg"width="200px" height="200px"></p></div><!-- 教育背景 --><div><p><h2>教育背景</h2></p><ol type="I"><li>2000-2003 喜羊羊幼儿园</li><li>2003-2009 喜羊羊小学</li><li>2009-2012 喜羊羊中学</li><li>2012-2015 喜羊羊高中</li><li>2015-20019 喜羊羊大学</li></ol></div><!-- 专业技能 --><div><p><h2>专业技能</h2></p><ul type="circle"><li>熟练掌握html</li><li>熟练掌握CSS</li><li>熟练掌握JS</li><li>熟练掌握AJAX</li></ul></div><!-- 项目 --><div><p><h2>项目</h2></p><dt><dl>喜羊羊点读机<dd>实现ai回答功能</dd><dd>小朋友线上聊天功能</dd></dl><dl>喜羊羊跑步机<dd>实现走路锻炼功能</dd><dd>实现跑步锻炼功能</dd></dl></dt></div>
</body>
</html>

2.简历界面填写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简历信息填写</title>
</head>
<body><!-- 使用表格进行整体布局 --><table width="700px" cellspacing="0"><thead><h2>请填写简历</h2></thead><tbody><tr><td><label for="name">姓名:</label></td><td><input type="text" id="name"></td></tr><tr><td>性别:</td><td><label for="male"><img src="https://img.tukuppt.com/png_preview/00/34/10/j8H6B67EkF.jpg!/fw/780" width="10" height="10"></label><input type="radio" name="gender" id="male"><label for="male">男</label></td><td><label for="famale"><img src="https://pic.616pic.com/ys_bnew_img/00/06/90/6YlqFNky01.jpg"width="10" height="10"></label><input type="radio" name="gender" id="famale"><label for="famale">女</label></td></tr><tr><td>出生日期:</td><td><select><option>--选择年份--</option>                   <option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option></select></td><td><select><option>--选择月份--</option><option>1月</option><option>2月</option><option>3月</option><option>4月</option><option>5月</option><option>6月</option><option>7月</option><option>8月</option><option>9月</option><option>10月</option><option>11月</option><option>12月</option></select></td><td><select><option>--选择日期--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option></select></td></tr><tr><td><label for="school">就读学校:</label></td><td><input type="text" id="school"></td></tr><tr><td>应聘岗位:</td><td><input type="radio" name="emp" id="1"><label for="1">前端开发</label><input type="radio" name="emp" id="2"><label for="2">后端开发</label></td><td><input type="radio" name="emp" id="3"><label for="3">测试岗位</label><input type="radio" name="emp" id="4"><label for="4">运营维护</label></td></tr><tr><td>掌握技能:</td><td><textarea name="" rows="10" cols="30"></textarea></td></tr><tr><td>项目经历:</td><td><textarea name="" rows="10" cols="30"></textarea></td></tr><tr><td colspan="2"><input type="checkbox" name="check" id="check"><label for="check">我已阅读过公司招聘请求</label></td></tr><tr><td><ul>请确认<li>可以接受加班请求</li><li>能尽快到岗位工作</li><li>以上经历均属实</li></ul></td></tr></tbody></table>
</body>
</html>