HTML综合

一.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, rightth 默认字体加粗，内容居中表格的组成caption 标题thead   表头tr  代表一行th 代表一行中的一个格子tbody   主体部分trtd 代表一行中的一个格子tfoottrtd--><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>密&nbsp;&nbsp;码<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