0.VScode常用快捷键
bash
复制代码
<!--常用快捷键
输入英文叹号！，然后按enter键，填充默认代码模板
代码格式化：Shift+Alt+F
向上或向下移动一行：Alt+Up 或 Alt+Down
快速复制一行代码：Shift+Alt+Up 或 Shift+Alt+Down
快速保存：Ctrl + S
快速查找：Ctrl + F
快速替换：Ctrl + H
-->
1.h1-h6
bash
复制代码
<!DOCTYPE html>
<html>
<head>
<title>我是标题</title>
<meta charset="UTF-8">
</head>
<body>
<h1 align="left">标题</h1>
<h2 align="center">标题</h2>
<h3 align="right">标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
</body>
</html>
2 p br hr
bash
复制代码
<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>我是一个段落</p>
<p>我是一个段落我先要<br/>换行显示</p>
<hr color="red" width="300px" size="20px" align="left">
</body>
</html>
3.img
bash
复制代码
<!DOCTYPE html>
<!--
属性:
1 src: 路径 (图片地址与名字)
2 alt: 规定图像的替代文本
3 width: 规定图像的宽度
4 height: 规定图像的高度
5 title: 鼠标悬停在图片上给予提示
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="1.webp" alt="美丽的天河" width="300px" height="300px" title="aaa">
</body>
</html>
4. a
bash
复制代码
<!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>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com">
<img src="image/sj-img-31.jpg" width="100px">
</a>
</body>
</html>
5.span
bash
复制代码
<!DOCTYPE html>
<!--
<em> 定义着重文字
<b> 定义粗体文本
<i> 定义斜体字
<strong> 定义加重语气
<del> 定义删除字
<span> 元素没有特定的含义
-->
<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>我喜欢吃<em>白菜</em></p>
</body>
</html>
6 list
bash
复制代码
<!DOCTYPE html>
<!--
ol>li*3
<ol>的属性 type 拥有的选项
1 1 表示列表项目用数字标号（1,2,3...）
2 a 表示列表项目用小写字母标号（a,b,c...）
3 A 表示列表项目用大写字母标号（A,B,C...）
4 i 表示列表项目用小写罗马数字标号（i,ii,iii....）
5 I 表示列表项目用大写罗马数字标号（I,II,III....）
<ul>的属性 type 拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>橙子</li>
</ol>
<ol >
<li>水果</li>
<li>蔬菜
<ol>
<li>白菜</li>
<li>土豆</li>
</ol>
</li>
<li>肉类</li>
</ol>
<ul type="a">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>橙子</li>
</ol>
</body>
</html>
7.table
bash
复制代码
<!DOCTYPE html>
<!--
table>tr*2>td*3{单元格}
表格属性
1 border: 设置表格的边框
2 width: 设置表格的宽度
3 height: 设置表格的高度
合并
1 水平合并：colspan
2 垂直合并：rowspan
水平合并：保留左边，删除右边
垂直合并：保留上边，删除下边
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="400px" height="200">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
<tr>
<td>单元格7</td>
<td>单元格8</td>
<td>单元格9</td>
</tr>
</table>
<P>合并单元格2和3 colspan</P>
<P>合并单元格6和9 rowspan</P>
<P>合并单元格10 11 13 14</P>
<table border="1" width="400px" height="200">
<tr>
<td>单元格1</td>
<td colspan="2">单元格2 3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td rowspan="2">单元格6 9</td>
</tr>
<tr>
<td >单元格7</td>
<td >单元格8</td>
</tr>
</tr>
<tr>
<td colspan="2" rowspan="2">单元格10 11 13 14</td>
<td>单元格12</td>
</tr>
<tr>
<td>单元格15</td>
</tr>
</table>
</body>
</html>
bash
复制代码
<!DOCTYPE html>
<!--
属性说明
action 服务器地址
name 表单名称
method 中 Get 和 Post 的区别
1 数据提交方式，get 把提交的数据 url 可以看到，post 看不到
2 get 一般用于提交少量数据，post 用来提交大量数据
内联元素和块级元素的区别
块级元素 内联元素
块元素会在页面中独占一行（自上向下垂直排列） 行内元素不会独占页面中的一行，只占自身的大小
可以设置 width，height 属性 行内元素设置 width，height 属性无效
一般块级元素可以包含行内元素和其他块级元素 一般内联元素包含内联元素不包含块级元素
常见块级元素
div、form、h1~h6、hr、p、table、ul、等
常见内联元素
a、b、em、i、span、strong 等
行内块级元素（特点：不换行、能够识别宽高）
button、img、input 等
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="get" name="myform">
用户名：<input type="text">
密码：<input type="password">
<input type="submit" value="登录">
</form>
</body>
</html>
9.div 新元素
bash
复制代码
<!DOCTYPE html>
<!--
H5 新标签
<header></header> 头部
<nav></nav> 导航
<section></section> 定义文档中的节，比如章节、页眉、页脚
<aside></aside> 侧边栏
<footer></footer> 脚部
<article></article> 代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>