共计 3462 个字符，预计需要花费 9 分钟才能阅读完成。
HTML5 入门
-
- 1.HTML5
-
- 1.1 html5 是什么：
- 1.1 html5 基础结构：
- 1.2 html 的语法规则
- 1.3 vscode 插件推荐
- 1.4 常见标签
学习笔记，尚硅谷 2023javaweb 教程
w3c html 教程
1.HTML5
1.1 html5 是什么：
HTML是 Hyper Text Markup Language 的缩写，意思是 超文本标记语言 。它的作用是搭建网页结构，在网页上展示内容。HTML5 在 2008 年正式发布，在 2012 年已形成了稳定的版本，2014 年 10 月 28 日，W3C 发布了 HTML5 的最终版。
超文本 ：HTML 文件本质上是文本文件，而普通的文本文件只能显示字符。通过标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义： 本身是文本，但是呈现出来的最终效果超越了文本。
1.1 html5 基础结构：
1.2 html 的语法规则
1 根标签是 有且只能有一个；
2 无论是双标签还是单标签都需要正确关闭；
3 标签可以嵌套但不能交叉嵌套；
4 注释语法为，注意不能嵌套；
5 属性必须有值，值必须加引号，H5 中属性名和值相同时可以省略属性值；
6 HTML 中不严格区分字符串使用单双引号；
7 HTML 标签不严格区分大小写，但是不能大小写混用；
8 HTML 中不允许自定义标签名，强行自定义则无效；
1.3 vscode 插件推荐
Auto Rename Tag 自动修改标签对插件
Chinese Language Pack 汉化包
HTML CSS Support HTML CSS 支持
Intellij IDEA Keybindings IDEA 快捷键支持
Live Server 实时加载功能的小型服务器
open in browser 通过浏览器打开当前文件的插件
Prettier-Code formatter 代码美化格式化插件
Vetur VScode 中的 Vue 工具插件
vscode-icons 文件显示图标插件
Vue3 snipptes 生成 VUE 模板插件
Vue language Features Vue3 语言特征插件
1.4 常见标签
标题
h1>一级标题h1>
h2>二级标题h2>
h3>三级标题h3>
h4>四级标题h4>
h5>五级标题h5>
h6>六级标题h6>
常用
断落
p>p>
换行：br>
水平分割新：hr>
p>
第 1 块月壤砖的太空行程 #月亮“月壤砖”是我国科学家模拟月壤成分烧制而成的，呈榫卯结构，有利于未来拼装建造月球基地。它的抗压强度是普通红砖、混凝土砖的 3 倍以上，相当于 1 平方厘米的面积上能承受 10 多吨的重量。br>
hr>
月亮为弄清楚“月壤砖”能否胜任月球造房子的任务，“月壤砖”将搭乘“天舟八号”货运飞船前往中国空间站，验证力学、热学性能，以及能否经受得住宇宙辐射。完成太空实验后
p>
列表
ol>
li>JAVAli>
li>前端li>
li>大数据li>
ol>
ul>
li>JAVASEli>
li>JAVAEEli>
li>数据库li>
ul>
a href="01fistPage.html" target="_blank">相对路径本地资源连接a> br>
a href="/day01-html/01html 的基本结构.html" target="_self">绝对路径本地资源连接a> br>
a href="http://www.atguigu.com" target="_blank">外部资源链接a> br>
img src="img/python.jpg" title="python" alt="pythonlogo" />
audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
h3 style="text-align: center;">员工技能竞赛评分表h3>
table border="1px" style="width: 400px; margin: 0px auto;">
tr>
th>排名 th> th> 姓名 th> th> 分数th>
tr>
tr>
td>1td>
td>张小明td>
td>100td>
tr>
tr>
td>2td>
td>李小东td>
td>99td>
tr>
tr>
td>3td>
td>王小虎td>
td>98td>
tr>
table>
hr>
table border="1px" style="width: 400px; margin: 0px auto;">
tr>
th>排名 th> th> 姓名 th> th> 分数 th> th> 备注th>
tr>
tr>
td>1td>
td>张小明td>
td>100td>
td rowspan="3">前三名升职加薪td>
tr>
tr>
td>2td>
td>李小东td>
td>99td>
tr>
tr>
td>3td>
td>王小虎td>
td>98td>
tr>
table>
hr>
hr>
table border="1px" style="width: 400px; margin: 0px auto;">
tr>
th>排名 th> th> 姓名 th> th> 分数 th> th> 备注th>
tr>
tr>
td>1td>
td>张小明td>
td>100td>
td rowspan="5">前三名升职加薪td>
tr>
tr>
td>2td>
td>李小东td>
td>98td>
tr>
tr>
td>总人数td>
td colspan="2">2000td>
tr>
tr>
td>平均分td>
td colspan="2">90td>
tr>
table>
hr>
表单标签(重点)
form action="http://www.atguigu.com" method="get">
用户名 input type="text" name="username" /> br>
密 码 input type="password" name="password" /> br>
input type="radio" name="sex" value="boy" />男
input type="radio" name="sex" value="girl" checked="checked" />女br>
籍贯
input type="checkbox" name="team" value="shandong"/>山东
input type="checkbox" name="team" value="hebei" checked/>河北
input type="checkbox" name="team" value="henan"/>河南
br>
你喜欢的运动是：select name="sport">
option value="swimming">游泳option>
option value="running">跑步option>
option value="shooting" selected="selected">射击option>
option value="skating">溜冰option>
select>
br>
自我介绍：textarea name="desc">textarea>
br>
证件照:input type="file" name="file"/>br>
input type="submit" value="登录" />
input type="reset" value="重置" />
form>
布局
div style="width: 500px; height: 400px;background-color: cadetblue;">
div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;">
span style="color: blueviolet;">页面开头部分span>
div>
div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;">
span style="color: blueviolet;">页面中间部分span>
div>
div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;">
span style="color: blueviolet;">页面结尾部分span>
div>
div>
原文地址: HTML5 入门
