HTML是超本文标记语言
什么是超文本
HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。
什么是标记语言
说HTML是一种『标记语言』是因为它不是像Java这样的『编程语言』，因为它是由一系列『标签』组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。
-
双标签:标签是通过一组尖括号+标签名的方式来定义的：
<p>HTML is a very popular fore-end technology.</p>单标签
<a href="http://www.xxx.com">show detail</a>href="网址" 就是属性，href是属性名，"网址"是属性值
注释写法
<!-- 注释内容 -->整体结构
<!DOCTYPE html> <!--声明是一个html文件-->
<html lang="en">
<head>
<meta charset="UTF-8"> <!--字符编码-->
<title>我的第一个网页</title>
</head>
<body>
hello html!!!
</body>
</html>-
html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。
head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等
-
body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内
-
语法规则
-
1 根标签有且只能有一个
-
2 无论是双标签还是单标签都需要正确关闭
-
3 标签可以嵌套但不能交叉嵌套
-
4 注释语法为<!-- --> ,注意不能嵌套
-
5 属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值
-
6 HTML中不严格区分字符串使用单双引号
-
7 HTML标签不严格区分大小写,但是不能大小写混用
-
8 HTML中不允许自定义标签名,强行自定义则无效
-
推荐使用工具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 文件显示图标插件
-
Vue 3 snipptes 生成VUE模板插件
-
Vue language Features Vue3语言特征插件
HTML基本标签介绍
<h1>一级标题</h1> <!--标题标签 有h1到h6 从大到小 -->
<p>啊大苏打阿三</p> <!--段落标签一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果-->
<br> <!--换行标签-->
<hr> <!--分割线标签 -->
列表标签
<ol> <!-- ol是有序列表分条列项展示数据的标签, 其每一项前面的符号带有顺序特征-->
<li>JAVA</li> <!-- 列表项标签 li-->
<li>前端</li>
<li>大数据</li>
</ol>
<ul> <!-- ul无序列表 分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征-->
<li>JAVASE</li>
<li>JAVAEE</li>
<li>数据库</li>
</ul>列表案列
<ol>
<li>
JAVA
<ul>
<li>JAVASE</li>
<li>JAVAEE</li>
<li>数据库</li>
</ul>
</li>
<li>前端</li>
<li>大数据</li>
</ol>效果
超链接标签
<!--
href属性用于定义连接
href中可以使用绝对路径,以/开头,始终以一个路径作为基准路径作为出发点
href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点
href中也可以定义完整的URL
target用于定义打开的方式
_blank 在新窗口中打开目标资源
_self 在当前窗口中打开目标资源
-->
<a href="01html的基本结构.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>多媒体标签
<!--
src
用于定义图片的连接
title
用于定义鼠标悬停时显示的文字
alt
用于定义图片加载失败时显示的提示文字
-->
<img src="img/logo.png" title="尚硅谷" alt="尚硅谷logo" />
<!--
src
用于定义目标声音资源
autoplay
用于控制打开页面时是否自动播放
controls
用于控制是否展示控制面板
loop
用于控制是否进行循环播放
-->
<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
<!--
src
用于定义目标视频资源
autoplay
用于控制打开页面时是否自动播放
controls
用于控制是否展示控制面板
loop
用于控制是否进行循环播放
-->
<video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />表格标签(代码+案例)
<!--
table标签 代表表格
tr标签 代表一行
td标签 代表行内的一格
th标签 自带加粗和居中效果的td
通过td的rowspan属性实现上下跨行
通过td的colspan属性实现左右的跨列
-->
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<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="6">
前三名升职加薪
</td>
</tr>
<tr>
<td>2</td>
<td>李小东</td></td>
<td>99</td>
</tr>
<tr>
<td>3</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>
<tr>
<td>及格率</td>
<td colspan="2">80%</td>
</tr>
</table>效果
表单标签(重点)
<!--
form标签,表单标签
action, form标签的属性之一,用于定义信息提交的服务器的地址
method, form标签的属性之一,用于定义信息的提交方式
get get方式, 数据会缀到url后,以?作为参数开始的标识,多个参数用&隔开
post post方式,数据会通过请求体发送,不会在缀到url后
input标签,主要的表单项标签,可以用于定义表单项
name, input标签的属性之一,用于定义提交的参数名
type, input标签的属性之一,用于定义表单项类型
text 文本框
password 密码框
submit 提交按钮
reset 重置按钮
file文件标签
hidden隐藏域通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。
radio 单选框 (两个及以上的单选框需要name属性一样，保证到时候只提交一个。value值可以不一样，name和value配合起来组成一个键值提交。在里面checked="checked"属性设置默认被选中的radio)
checkbox 复选框
select 设置下拉列表，option标签设置列表项name属性在select标签中设置,value属性在option标签中设置。
textarea 多行文本框
-->
<form action="h8.html" method="get">
用户名<input type="text" name="username"><br>
密码<input type="password" name="password"><br>
<input type="radio" value="男" name="sex" value="男">男
<input type="radio" value="女" checked="checked" name="sex" value="女">女<br>
<input type="checkbox" name="1" value="巴西">巴西
<input type="checkbox" name="1" value="德国">德国
<input type="checkbox" name="1" value="中国">中国
<input type="checkbox" name="1" value="法国">法国
<input type="checkbox" name="1" value="美国">美国
<input type="checkbox" name="1" value="日本">日本<br>
爱好 <select name="aihao">
<option value="1">游泳</option>
<option value="2">洗澡</option>
<option value="3">音乐</option>
<option value="4">打游戏</option>
<option value="5">跳舞</option>
</select>
自我介绍：<textarea name="desc"></textarea>
头像:<input type="file" name="file"/>
<input type="hidden" name="userId" value="2233"/>
<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" 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>效果
