一.HTML的初始结构
<!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>
这是我的first page！
</body>
</html>
二.HTML中的常用标签
1. 标题标签
<h1> 到 <h6>：定义六个级别的标题，<h1> 级别最高，<h6> 级别最低。
h1字体大小是32px
h4字体大小是16px
默认字体大小是16px
2. 段落和换行标签
<p>：定义段落。
<br>：插入一个简单的换行符。
3. 链接标签
<a>：定义超链接，用于链接到其他网页或网站。
4. 图像标签
<img>：定义图像，src 属性用于指定图像的URL。
5. 列表标签
<ul>：定义无序列表。
<ol>：定义有序列表。
<dl>: 自定义列表
<dt>:自定义列表头
<dd>:自定义列表项
<li>：定义列表项。
<tr>：定义表格行。
<td>：定义表格数据单元格。
<th>：定义表头单元格。
6. 表单标签
<form>：定义HTML表单，用于用户输入。
<input>：定义输入字段，type 属性用于指定输入类型（如 text, password, submit 等）。
<textarea>：定义多行文本输入字段。
<label>：定义 <input> 元素的描述。
<select> 和 <option>：定义下拉列表。
<button>：定义一个点击按钮。
7. 语义化标签
<header>：定义文档的头部区域。
<footer>：定义文档的底部区域。
<article>：定义文档中的独立内容区域。
<section>：定义文档中的节（或区段）。
<nav>：定义导航链接的部分。
<aside>：定义页面的侧边栏内容。
8.格式化标签
<strong>我变强壮了</strong>
<b>我也可以加粗</b>
<hr>
<em>我倾斜了吗</em>
<i>我倾斜了吗</i>
<hr>
<del>我身上有什么？</del>
<s>我身上有一条线</s>
<hr>
<ins>台湾是中国的，日本也是中国的</ins>
<u>台湾是中国的，日本也是中国的</u>
<hr>
100<sub>10</sub>
26<sup>C°</sup>
9. 其他常用标签
<div>：定义文档中的区块或节，常用于结合CSS进行布局和样式设计。
<span>：对文档中的行内元素进行分组。
<meta>：提供有关HTML文档的元数据，如字符编码、页面描述、关键词等。
<title>：定义浏览器工具栏的标题，当网页添加到收藏夹时的标题。
<style>：用于包含CSS样式信息。
<script>：用于嵌入或引用JavaScript代码。
这些只是HTML5中常用标签的一部分，实际上HTML5还包含许多其他标签和属性，用于构建功能丰富、结构清晰的网页。
三.部分标签的使用
1. table标签
1.1 table标签的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table标签的使用</title>
</head>
<body>
<!--
border 边框
cellspacing 格子和格子之间的边距
cellpadding 格子和文字的边距
align="" left, center, right
th 默认字体加粗，内容居中
表格的组成
caption 标题
thead 表头
tr 代表一行
th 代表一行中的一个格子
tbody 主体部分
tr
td 代表一行中的一个格子
tfoot
tr
td
-->
<table border="1" cellspacing="0" cellpadding="0">
<caption>水果价格列表</caption>
<thead>
<tr>
<th>No</th>
<th>fruit</th>
<th>price</th>
<th>num</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1001</td>
<td align="center">apple</td>
<td align="center">$2</td>
<td align="center">10</td>
</tr>
<tr>
<td align="center">1002</td>
<td align="center">pear</td>
<td align="center">$5</td>
<td align="center">8</td>
</tr>
<tr>
<td align="center">1003</td>
<td align="center">strawberry</td>
<td align="center">$7</td>
<td align="center">10</td>
</tr>
<tr>
<td>1004</td>
<td>watermelon</td>
<td>$1.2</td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总金额：</td>
</tr>
</tfoot>
</table>
</body>
<style>
</style>
</html>
1.2 table标签的合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, tr, td{
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="200" height="200">
<tr>
<td>1</td>
<td >2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">7</td>
</tr>
</table>
</body>
</html>
2. ul, ol, dl 标签的使用
<!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>
<script>
// 列表 块级元素
// 1.有序列表 ol
// 默认显示 1-n的数字
// start="10"
// type=""
// 2.无序列表 ul 默认是黑点
// style="list-style: circle;" 空心的圆
// style="list-style:none;"
// 3.自定义列表 dl > dt > dd
</script>
<ol start="10">
<li>苹果</li>
<li>梨子</li>
<li>草莓</li>
<li>香蕉</li>
</ol>
<br>
<ul style="list-style: none;">
<li>周杰伦</li>
<li>蔡徐坤</li>
<li>黎明</li>
<li>迪丽热巴</li>
</ul>
<!-- t:title -->
<dl>
<dt>吃了吗</dt>
<dd>吃的包子</dd>
<dt>今天去哪里玩</dt>
<dd>哪里都不去</dd>
</dl>
</body>
</html>
3.label 标签
<!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>
<p>
<!-- label中的for应该与input中的id相关联 -->
<!-- 使用单选框时，想要两个单选框为一组，需要给他们设置相同的name -->
<label for="username">
用户名： <input type="text" name="" id="username" >
</label>
<label for="nan">
<input type="radio" value="男" id="nan" checked name="gender">男
</label>
<label for="nv">
<input type="radio" value="女" id="nv" name="gender">女
</label>
</p>
</body>
</html>
label 标签通常和表单元素一起使用
4.form 表单标签
<!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>
<!-- 表单：数据的入口 -->
<!-- form表单
method="get/post"
get:通过url地址传智，体积小，速度快，不安全，数据格式有限（asc,string）
post:通过表单传值，体积大，速度慢，安全，类型和格式不限制(压缩包，视频，音频，ppt)
action="提交的地址"
-->
<form action="" method="get">
<p>
用户名<input type="text" placeholder="用户名" name="username" >
</p>
<p>
密 码<input type="password" name="pwd">
</p>
<p>
性别：
<!-- 使用lable标签for属性应该和input标签中的id相关联 -->
<!-- 使用单选框时选项应该在同一组中（在同一个name属性中） -->
<label for="gender1">
<input type="radio" id="gender1" name="gender" value="男">男
</label>
<label for="gender2">
<input type="radio" id="gender2" name="gender" value="女" checked>女
</label>
</p>
<p>
<label for="age">
年龄：<input type="number" max="120" min="18" value="20">
</label>
</p>
<p>
爱好：
<input type="checkbox" value="钱" name="hobby"> 钱
<input type="checkbox" value="黄金" name="hobby"> 黄金
<input type="checkbox" value="香车" name="hobby"> 黄金
<input type="checkbox" value="美女" name="hobby"> 黄金
<input type="checkbox" value="黄金" name="hobby"> 黄金
</p>
<p>
<label for="city">
城市：
<select name="" id="city">
<option value="请选择">请选择</option>
<option value="长沙">长沙</option>
<option value="株洲">株洲</option>
<option value="湘潭">湘潭</option>
<option value="怀化" selected>怀化</option>
</select>
</label>
</p>
<p>
详细地址：
<textarea rows="5" style="width: 500;"></textarea>
</p>
<p>
<button type="submit">提交</button>
<button>提交2</button>
<button type="reset"> 重置</button>
<!-- <input type="rest" value="重置"> 过时 -->
<!-- -->
</p>
</form>
</body>
</html>
注意在form表单中 button按钮默认为 submit 类型， 即type=“submit”
5.audio 音频 和 video 视频
<!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>
<!--
autoplay 自动播放
controls 控制的界面
loop 循环
preload 预加载
-->
<!-- 音频 -->
<!-- 第一种方式 -->
<!-- <audio src="file/1.mp3" autoplay controls loop preload="auto">
</audio> -->
<!-- 第二种方式 -->
<audio autoplay controls loop preload="auto">
<source src="file/1.mp3" type="audio/mpeg">
<source src="file/1.mp3" type="audio/mpeg">
</audio>
<!-- 视频 -->
<video src="file/1.mp3" autoplay controls loop preload="auto"></video>
<video src="">
<source src="file/1.mp3" type="video/mp4">
<source src="file/1.mp3" type="video/mp4">
</video>
</body>
</html>
rgba, hsla 和 opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- 直接设置会影响子盒子的颜色 -->
<!-- 弹框，给父盒子设置一个背景色为 rgba() ,子盒子的颜色不会被影响 -->
<div class="dialog" style="width: 100%;height: 100%; background-color: black; opacity: 0.5;">
<div class="content" style="width: 200px;height: 200px;background-color: red;"></div>
</div>
<!-- <div class="dialog" style="width: 100%;height: 100%; background-color: rgba(0,0,0,0.5);">
<div class="content" style="width: 200px;height: 200px;background-color: red;"></div>
</div> -->
<!-- <div style="width: 200px;
height: 200px;background-color: hsla(24, 50%, 47%, 0.416);"></div> -->
</body>
<script>
// 1. hex 16进制 0-f
// 2. rgb 和 rgba
// 3. hsl 和 hsla
// hsl(色调0-360，饱和度，亮度)
</script>
</html>
使用opacity给父盒子添加透明度时会影响到子盒子，其他两个不会
如下图使用opacity，代码如上
下图使用rgba
四. HTML区块
1.块级元素
div 定义了文档的区域，块级 (block-level)
块级元素有：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre、header、section、aside、footer等。
2.内联元素
span 用来组合文档中的行内元素， 内联元素(inline)
行内元素：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button等。
五.在VS中常用的快捷方式
ctrl + B 折叠菜单
shift + alt + F 格式化
shiift + alt + 向下箭头 向下复制一行
ctrl + z 撤销
ctrl + v 粘贴
ctrl + c 复制
ctrl + x 剪切
crtl + k, ctrl + 0 全部折叠
ctrl + k, ctrl + j 全部展开
快速生成带有标签的类名 标签名.类名 如 img.price
快速生成标签 如 ul>li{$}*3
