一 . 前端的基本框架，只要是写HTML5代码必须写的框架。
<!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>1.h1-h6标题标签
<!-- 换行 加粗 字体变化大小 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 浏览器不支持自定义标签 html5没有收纳h7,h8 -->
<h7>七级标题</h7>
<h8>八级标题</h8>2.hr分割线
<!-- 水平分割线 -->
<hr>
<hr>
<hr>3. div 块 4.span分割 5. p段落
<!-- div 块标签 会换行-->
<!-- span 分割 -->
<div>
<h1>这是块的<span>标题</span></h1>
<div>
<!-- 段落 有行距 会换行 -->
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
</div>
</div>6.br 强制换行
<!-- br强制换行 -->
<span>醒醒啦醒醒啦醒醒啦醒醒啦醒醒啦醒醒啦醒醒<br>啦醒醒啦醒醒啦醒醒啦醒醒啦醒醒啦醒醒<br>啦醒醒啦醒醒啦醒醒啦醒醒啦醒醒啦</span>7——14：简单的标签
<i>斜体文字</i>
<em>斜体文字</em>
<b>粗体文本</b>
<strong>粗体文本</strong>
<u>下划线</u>
<del>删除线</del>
<sub>下标</sub>
<sup>上标</sup>15 -20.列表标签
<!--
li 列表项目： 独占一行，类似div
ol 有序列表: 有上下行距 有左侧内补 有数字序号
ul 无序列表： 有上下行距 有左侧内补 有符号
-->
ol>li*3>{HTML$}
<ol>
<li>HTML1</li>
<li>HTML2</li>
<li>HTML3</li>
</ol>
ul>li*3>h1+p
<ul>
<li>
<h1>CSSSS</h1>
<p>CSSSS</p>
</li>
<li>
<h1>CSSSSSSSS</h1>
<p>CSSSSSSSSS</p>
</li>
<li>
<h1>CSSSSSSSSSSSSSS</h1>
<p>CSSSSSSSSSSSSSSS</p>
</li>
</ul>
<!-- 自定义列表标签 -->
<!--
dl 自定义列表框架
dt 自定义列表项目 类似于li
dd 自定义列表项目的秒数 有缩进 可以没有dd
-->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language，用于创建网页的标记语言。</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets，用于定义网页的样式和布局。</dd>
<dt>JavaScript</dt>
<dd>一种用于在网页上添加交互和动态效果的编程语言。</dd>
</dl>
21-24 图片标签
<!-- 使用网络图片 width="100" 绝对单位100像素 100%铺满父容器 -->
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.b49dbddffaa692d75988e0c5882dacca?rik=r6IIYs2muimY7A&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140529%2f1-140529145A4.jpg&ehk=Co9XURYRCjJXUTzFG0Mw6lD7olzDKceEgv3slEC8kvQ%3d&risl=&pid=ImgRaw&r=0" width="500" ath = "">
<img src="./img\R-C.jpg" width="500" ath = "">
<video width="10%" controls scr= "https://vv.baidu.com/videoui/api/videopcads?channel_page=pc_video_haokan_end&vid=12924141579477324486&queryVid=&query=&wd=&eqid="></video>
<video width="40%" controls scr="./video/下载.mp4"></video>
<audio src="./audio/game_music.ogg" controls></audio>
<a href="https://www.baidu.com">baidu</a>
<a href="./2.6个基础标签.html">本地地址</a>
<a href="./2.6个基础标签.html" target="_blank">本地地址，可以打开新窗口</a>25-28.表格标签
<!--
table表格 tr行 th表头 td普通单元格
-->
<!-- border为像素 cellspacing 为每个数据之间的距离 cellpadding是指单元格内文字与边框的距离 -->
<table border="10" cellpadding = "10" cellspacing = "5" bordercolor = purple >
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>马超</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李阿狸</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>镜子</td>
<td colspan="2" rowspan="2">
<table width="100%" border="3">
<tr>
<th width="30%"> 姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>18</td>
</tr>
</table>
<!-- <td>18</td>
<td>女</td> -->
</tr>
</table>29.iframe标签
<!-- 用于嵌入其他网页或文档的标签 -->
<iframe src="https://www.bilibili.com/" frameborder = "0"></iframe>
<iframe src="./1.HelloWorld.html" frameborder="0"> </iframe>
<iframe src="./2.6个基础标签.html" frameborder="0"> </iframe>30.表单标签<form>
<!-- form 表单标签用于服务器交互数据
比如用户登录
表单标签
表单域
表单按钮
-->
<form>
<label for = "username">用户名</label> <input id = "username" type="text">
<br>
<label for = "password">密码</label> <input id = "password" type="password">
<br>
<span>性别</span>
<label for ="man"> 男</label><input checked name = "sex" id ="man" type="radio">
<label for = "woman">女</label><input id = "woman" type="radio">
<br>
<span>爱好</span>
<label for ="football">足球</label><input id ="football" type="checkbox">
<label for ="basketball">篮球</label><input checked name="hobby" id ="basketball" type="checkbox">
<br>
<span>居住地址</span>
<select>
<option >"河南"</option>
<option >"河北"</option>
<option >"山西"</option>
<option selected>山东</option>
</select>
<br>
<span>备注信息</span>
<textarea cols="20" rows = "1"></textarea>
<input type="submit" value="登录"> <input type="reset" value="重置">
</form>这里是常用的前端30个标签！
6979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
