1.前端基本框架
<html>
<head>
<title>头部信息</title>
</head>
<body>
Hello World!
</body>
</html>运行效果
但是在VSCode里都不需要
2.快捷键
3.标签
3.1 h1-h6
标签里也可加属性 属性=“属性值”，但不推荐使用，后面可用CSS表示出来
<html>
<head>
<title>头部信息</title>
</head>
<body>
Hello World!
<h1 align="center">一级标签</h1>
<h2 align="lift">二级标签</h2>
<h3 align="right">三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>段落标签---我是一个段落</p>
<p>如果一行段落你想用两行表示，用<br>来分段</p>
<p>水平线用hr来表示</p>
<hr align="left" width="50000px" size="8px"color='green'>
</body>
</html>效果
3.2<hr>水平线
3.3<img>图片
<img src="1.jpg" alt="这是一个熊二" width="300px" height="" title="熊二">
//一般情况下只会设置width，不会设置高，防止图片被拉伸
//alt在图片无法显示的情况下提供文本信息
3.4 路径问题
3.4.1绝对路径：
文件储存在电脑上的具体地址（电脑中的路径+名称+格式）
<img src="C:\Users\T.T\Desktop\ming.png">3.4.2 相对路径：
相对：与写的代码路径相比，是同级还是子集
1.同级关系：
（点杠）./ 代表同级关系中哪个文件，也可省略不写
<img src="./1.jpg">
<img src="1.jpg">
//同级关系下，点杠可以省略不写2.子集关系：
（斜杠） / 代表这个文件中的哪个文件，
<img src="./image/动态海报--五四青年节.gif">
3.父级关系：
（点点杠）../ ，点点是返回到上一级，上一级的哪个文件夹
<img src="../图标2-论坛.png"> 
3.4.3 网络路径
比较简单，直接在将网络上图片的地址粘贴就好
4.超链接<a href=""></a>
两个标签之间可以是一个词，也可以是一句话，也可以是一个图片
<a href="https://www.baidu.com/">百度</a> //超链接为词
<a href="https://www.baidu.com/"> <img src="./1.jpg"> </a> //超链接为图片运行效果
文本标签
1.着重文本<em> </em>
斜体加重效果
2.粗体文本<b></b>
3.斜体文本<i></i>
4.加重语气文本<strong>
5.删除字体<del></del>
6.单纯的文本标签 <span></span>
运行效果
列表 list
1.有序列表order list
<ol>
<li>苹果</li> //默认模式
<li>梨</li>
<li>柿子</li>
<li>葡萄</li>
</ol>
<ol type="1">
<li>苹果</li>
<li>梨</li>
<li>柿子</li>
<li>葡萄</li>
</ol>
<ol type="A">
<li>苹果</li>
<li>梨</li>
<li>柿子</li>
<li>葡萄</li>
</ol>
<ol type="a">
<li>苹果</li>
<li>梨</li>
<li>柿子</li>
<li>葡萄</li>
</ol>
<ol type="I">
<li>苹果</li>
<li>梨</li>
<li>柿子</li>
<li>葡萄</li>
</ol>运行效果
列表可以进行嵌套
<ol>
<li>蔬菜类</li>
<ol>
<li>菠菜</li>
<li>空心菜</li>
<li>大白菜</li>
</ol>
<li>水果类</li>
<ol>
<li>苹果</li>
<li>李子</li>
<li>柿子</li>
</ol>
<li>肉类</li>
<ol>
<li>猪肉</li>
<li>牛肉</li>
<li>羊肉</li>
</ol>
</ol>运行效果
2.无序列表unorder list
<ol>
<li>苹果</li>
<li>梨</li>
<li>柿子</li>
<li>葡萄</li>
</ol>
<ul type="disc">
<li>苹果</li>
<li>梨</li>
<li>柿子</li>
<li>葡萄</li>
</ul>
<ul type="circle">
<li>苹果</li>
<li>梨</li>
<li>柿子</li>
<li>葡萄</li>
</ul>
<ul type="square">
<li>苹果</li>
<li>梨</li>
<li>柿子</li>
<li>葡萄</li>
</ul>
<ul type="none">
<li>苹果</li>
<li>梨</li>
<li>柿子</li>
<li>葡萄</li>
</ul>运行效果
无序列表也可进行嵌套
<ul>
<li>蔬菜类</li>
<ul>
<li>菠菜</li>
<li>空心菜</li>
<li>大白菜</li>
</ul>
</ul>运行效果
无序列表运用情况
1.无序列表情况
2.导航标签，后期用CSS在摆成横向列表摆放
快捷键
快速生成ui+li的布局：ul>li*3(数字根据自己需要的li数量进行更改)
表格标签 table -表
<table></table>表格
<tr></tr>行标签
<td></td>列标签
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td> //注意多想一想有几个tr tr下有几个td
</tr>
</table>快捷键
table>tr*3>td(单元格中的信息)
表格属性，但是不推荐使用
border ---边框
width ---宽度
height---高度
<table border="1" width="1000px" heigth="250px">
<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>
运行结果
合并单元格
水平合并--colspan 保留左合并右
垂直合并--rowspan 保留上合并下
<table border="1" width="1000px" heigth="250px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">5 6 </td>
<td>7</td>
<td rowspan="2">8 12 </td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</table>运行结果
合并记得合并一个之后删一个
可以提前将每个单元格进行编号，样式确定之后再将编号替换成单元格内容
<b>水平合并第二行5 6 9 10 ，垂直合并4 8 12</b>
<table border="1" width="1000px" heigth="">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="3">4 8 12</td>
</tr>
<tr>
<td colspan="2" rowspan="2">5 6 9 10 </td>
<td>7</td>
</tr>
<tr>
<td>11</td>
</tr>
</table> 运行结果
表单标签---Form
具有与用户进行交互的功能，用户输入 ，输入框或按钮等
表单属性
action--服务器地址
name--表单名称
method--数据提交方式 （Get、Post）
表单元素
一个完整的表单应有一下三种元素
表单标签、表单域（输入框）、表单按钮（按钮）
<form action="">
<input>
<botton>提交</botton>
</form>
文本框不同类型：
<form action="">
用户名：<input type="text"> //类型为text，可以输入汉字和数字等字符
密码：<input type="password"> //类型为password，文本框里的字符为实心圆点
<input type="submit"> //shubmit为提交，直接生成一个提交按钮
<input type="submit" value="登录"> //value可以将提交按钮里的文字替换
</form>运行效果：
块元素与行内元素（内联元素）
常见的块级元素和行内元素
Div标签--盒子区域
从上到下排列
H5新标签
，只能用于14年之后的浏览器
扫一扫
818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
