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基础结构：
<!--
<!DOCTYPE html>
文档声明：HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息以及HTML文档遵循的语法标准。
根标签： <html></html> 标签是整个文档的根标签，所有其他标签都必须放在这对标签里面。
头部元素： <head></head> 标签是 <html></html> 第一个一级子标签,用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。
主体元素： <body></body> 标签是 <html></html> 第二个一级子标签,用于标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。
注释：
-->
<!--
标签：代码中的一个 <> 叫做一个标签,双标签和单标签
属性：在开始标签中，用于定义标签的一些特征
文本：标签中间的文字
元素：经过浏览器解析后，每一个完整的标签(标签 +属性+文本)可以称之为一个元素。
-->
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>JAVA</li>
<li>前端</li>
<li>大数据</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>JAVASE</li>
<li>JAVAEE</li>
<li>数据库</li>
</ul>
<!-- 超链接
_blank 在新窗口中打开目标资源；
_self 在当前窗口中打开目标资源；
-->
<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>
<!--多媒体标签 图片
title:属性用于定义鼠标悬停时显示的文字。
alt:属性用于定义图片加载失败时显示的提示文字。-->
<img src="img/python.jpg" title="python" alt="pythonlogo" />
<!-- 音视频
autoplay属性用于控制打开页面时是否自动播放 。
controls属性用于控制是否展示控制面板 。
loop属性用于控制是否进行循环播放 。 -->
<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
<video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
<!--表格标签 -->
<!--表格标签
table标签代表表格；
thead标签代表表头，可以省略不写；
tbody标签代表表体，可以省略不写，浏览器解析DOM时会自动添加；
tfoot标签 代表表尾，可以省略不写；
tr标签代表一行；
td标签代表行内的一格；
th标签自带加粗和居中效果的td； -->
<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>1</td>
<td>张小明</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>李小东</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王小虎</td>
<td>98</td>
</tr>
</table>
<!-- 通过td的rowspan属性实现上下跨行 -->
<hr>
<table border="1px" style="width: 400px; margin: 0px auto;">
<tr>
<th>排名</th> <th>姓名</th> <th>分数</th> <th>备注</th>
</tr>
<tr>
<td>1</td>
<td>张小明</td>
<td>100</td>
<td rowspan="3">前三名升职加薪</td>
</tr>
<tr>
<td>2</td>
<td>李小东</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王小虎</td>
<td>98</td>
</tr>
</table>
<hr>
<!-- 通过td的colspan属性实左右的跨列 -->
<hr>
<table border="1px" style="width: 400px; margin: 0px auto;">
<tr>
<th>排名</th> <th>姓名</th> <th>分数</th> <th>备注</th>
</tr>
<tr>
<td>1</td>
<td>张小明</td>
<td>100</td>
<td rowspan="5">前三名升职加薪</td>
</tr>
<tr>
<td>2</td>
<td>李小东</td>
<td>98</td>
</tr>
<tr>
<td>总人数</td>
<td colspan="2">2000</td>
</tr>
<tr>
<td>平均分</td>
<td colspan="2">90</td>
</tr>
</table>
<hr>
表单标签(重点 )
<!-- 表单标签(重点 )
form标签：表单标签，其内部用于定义可以让用户输入信息的表单项标签。
action属性：用于定义信息提交的服务器的地址。
method属性：用于定义信息的提交方式。
get值： get方式提交，数据会缀到url后，以?作为参数开始的标识，多个参数用&隔
开。
post值： post方式提交，数据会通过请求体发送，不会在缀到url后。
input标签：主要的表单项标签，可以用于定义表单项。
name属性：用于定义提交的参数名。
type属性：用于定义表单项类型。
text 文本框
password 密码框
submit 提交按钮
reset 重置按钮 -->
<form action="http://www.atguigu.com" method="get">
用户名 <input type="text" name="username" /> <br>
密 码 <input type="password" name="password" /> <br>
<!-- name属性相同的radio为一组，组内互斥；
当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务
器；设置checked="checked"属性设置默认被选中的radio，如果属性名和属性值一样的话，可以省略属性值，只写checked即可； -->
<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标签： 俗称"块 "，主要用于划分页面结构，做页面布局。
span标签： 俗称 "层 "，可以用于划分元素范围，配合CSS做页面元素样式的修饰
-->
<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>
