前端的基本框架(文件后缀名为html)
快捷方式,在vocode中创建html文件,输入!直接全部输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
快捷键(Visual Studio Code)
Shift + alt +f 调整代码格式
Ctrl +f 快速查找内容
Ctrl +h 替换
Ctrl +s 保存文件
H5标签介绍
1.<h>标签为标题标签,标题大小依次递减,1级最大,6级最小
代码展示
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
样式
标签加属性align="right"|"left"|"center"
<h1 align="right">一级标题</h1>
<h2 align="left">二级标题</h2>
<h3 align="center">三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
样式展示:
2.<p>段落标签
<p>创建一个便签</p>
样式展示
一个段落便签内容需要换行在内容中加入<br>
<p>创建一<br />个便签</p>
样式展示
3.hr便签,在html中显示一条水平线
<hr>
样式
加属性
Color 添加颜色属性 wideth 添加长度属性 size 添加高度属性 align添加位置属性
<hr color="red" size="30px" width="100px" align="center">
样式展示
4. <img >图片标签(为单标签)
<img src="47.jpg" alt="wegame" width="300px" height="300px" title="wegame图片">
Src属性为图片路径 alt 当图片无法显示时显示文字,width为图片宽度,height图片高度
Title为鼠标停在图片上是提示文字
样式展示
5.<a href=’’></a> 超文本连接
<a href="https://www.baidu.com/">点击跳转百度</a>
样式展示(点击文字跳转百度)
未点击前,显示蓝色
点击后,显示紫色
鼠标是点击时,显示红色
文本标签
- <em> 定义着重文字
- <b> 定义粗体文本
- <i> 定义倾斜字
- <strong> 定义加重语气
- <span> 元素没有特殊含义
- <def> 定义删除字(有一条横线,把字划掉)
代码演示
<em>em字体</em>
<b>b字体</b>
<i>i字体</i>
<strong>strang字体</strong>
<span>span字体</span>
<del>del字体</del>
样式展示
列表标签
1.有序标签 <ol> <li> </li> <li> </li> </ol>
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>荔枝</li>
</ol>
样式展示
<ol type=’’> <ol > 中的type标签决定排序的序号
- 1表示项目用数字
- a 表示项目用小写字母
- A 表示项目用大写字母
- i 表示项目中用小写罗马数字
- I 表示项目用大写罗马数字标号
代码展示
<ol type="1">
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
</ol>
<ol type="A">
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
</ol>
<ol type="a">
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
</ol>
<ol type="I">
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
</ol>
<ol type="i">
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
</ol>
样式展示
2.无序列表<ul> <li> </li> </ul>
加入type属性改变项目的形状
disc 实心圆
circle 空心圆
square 实心正方形
None 什么都没有
代码展示
<ul type="disc">
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
</ul>
<ul type="circle">
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
</ul>
<ul type="square">
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
</ul>
<ul type="none">
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
</ul>
样式展示
标签表格
-
table 表格标签
-
tr 表格行
-
td 表格列
代码展示
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
样式展示
表格属性
- broder 增加表格边框
- width 改变表格宽度
- Height 改变表格高度
代码展示
<table border="1" width="300px" height="200px">
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
样式展示
合并单元格操作
- 水平合并cosspan
- 垂直合并rowspan
如图
- 合并单元格1,单元格2。
- 合并单元格4,单元格8。
- 合并单元格5,单元格6,单元格9,单元格10。
代码展示:
<table border="1" width="300px" height="200px">
<tr>
<td colspan="2">单元格1,2 </td>
<td>单元格3 </td>
<td rowspan="2">单元格4,8 </td>
</tr>
<tr>
<td colspan="2" rowspan="2">单元格5,6,9,10 </td>
<td>单元格7 </td>
</tr>
<tr>
<td>单元格11 </td>
<td>单元格12 </td>
样式展示
form表单
form表单是由容器和控件组成,一个表单一般应该包含用户填写信息的输入框,按钮等,表单就是容器,他能够容纳各种各样的控件
创建表单代码
<form action="index" method="post" name="index">
</form>
表单元素
-
输入文本框
<input type="text">
-
输入密码框
<input type="password">
-
确认按钮2种,input框加submit和button
<input type="submit" value="注册">
<button>提交</button>
样式展示