基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是h1</h1>
<h2>我是h2</h2>
我是正常的文本
<p>p标签单独占一行</p>
<br>
<!--br效果：空一行，该行为空-->
<hr>
<!--hr效果：空一行，该行为间隔线-->
<b>b加粗</b>
<i>i斜体</i>
<s>s中间划线</s>
<u>u下划线</u>
</body>
</html>
**
常用标签
**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
<!--一个div占领一行，用于页面布局，一个span自身多大就占多大，用于普通小文本-->
<!--标签分类1-->
<!--
块级标签：h1-h6,p,hr,br
1.块级标签可以嵌套其他块级标签和行内标签。
2.P标签虽然也是块级标签，但是他不能嵌套任何块级标签，只能嵌套行内标签。
-->
<!--
行内标签span,b,u,i,s,a,img
1.行内标签肯定不能嵌套块级标签，只能嵌套行内标签
2.行内标签无法设置长宽
-->
<!--标签分类2-->
<!--双标签<h1></h1>
自闭合标签<img src="" alt="">-->
<a href="https://www.baidu.com/" target="_blank">点我去百度</a>
<!--_blank参数可以设置为新建网页跳转，_self是默认值，当前页跳转-->
<a href="" id="a1">top</a>
<div style="height: 1000px;background-color:#f517ff"></div>
<div style="height: 1000px;background-color: #ff8c00"></div>
<div style="height: 1000px;background-color: red"></div>
<div></div>
<div></div>
<a href="#a1">点我去顶部</a>
<!--a标签可用于超链接,锚点（当前页切换浏览位置）-->
<img src="图片的URL" alt="图片未加载出来的时候，标签信息是什么" title="鼠标放上去显示的文本" width="155">
<!--width height指定一个就可以了，浏览器会自动按等比例缩放-->
</body>
</html>
**
标签嵌套
**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>div1
<div>div2
<div>div3
<p>p
<a href="">a
<i>i</i>
</a>
</p>
</div>
</div>
</div>
</body>
</html>
特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p> p标签</p>
<!-- 的效果相当于一个空格-->
<p>1<2</p>
<p>3>1</p>
<!--<的意思是小于>的意思是大于-->
<p>&</p>
<!--&符号=&-->
<p>©</p>
<!--版权-->
<p>®</p>
<!--注册-->
<p>¥</p>
<!--人民币元-->
</body>
</html>
无序+有序+标题列表+表格标签**
无序+有序+标题列表+表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul type="">
<!--无序列表，type可选参数:none,disc,circle,square-->
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>
<ol>
<!--有序列表，type可选参数:a,A,1,i,I-->
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<!--标题列表-->
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容1</dd>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dd>内容2</dd>
<dd>内容2</dd>
</dl>
<!--表格标签 thead表示表头，tbody表示表内容，tr定义表格中的行，td表示单元格;
border表示边框粗细rowspan表示合并某列的几个行数据,colspan表示合并某行的几个列数据
cellspacing是内边距 cellpadding是内边距 -->
<table border="1" cellpadding="1" cellspacing="1">
<thaead>
<tr>
<th>name</th>
<th>age----</th>
<th>hobby</th>
</tr>
</thaead>
<tbody>
<tr>
<td>ming</td>
<td>23</td>
<td rowspan="2">basketball</td>
</tr>
<tr>
<td colspan="2">Li</td>
</tr>
</tbody>
</table>
</body>
</html>
form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<!--form表单功能：
功能：前后端数据交互，帮你提交任意的数据
input标签，通过type属性来展示不同的需求，获取用户输入的页面效果。
label for +input + type属性总结： 调用；label+input的组合可以使用户点击文字时进入文本输入框
text:纯文本
password:密文文本
date:日期
radio：单选
checkbox：多选
file：文件 获取用户上传文件
submit：提交 注意：form表单中只有input的type属性是submit才能支持提交
serest：重置
button：绑定js代码
select：下拉框
textarea：打断文本
-->
<!--1.form表单中action控制数据往哪里提交，不写默认往当url进行提交。
2.写全路径127.0.0.1:8080/index
3./index
如果要提交文件数据:
method控制数据提交的编码格式，默认是get请求，
如果要上传文件，method必须直指定成post，enctype从默认的urlencoded换成formdata
获取用户输入的input标签或者选择性标签，必须要有name属性。
-->
<form action="" method="post" enctype="multipart/form-data">
<p>
<label for="user_name">
username:<input type="text" id="user_name" name="username">
</label>
</p>
<p> password: <input type="password" name="psw"></p>
<p>birthday:
<input type="date"></p>
<p>sex:
<!--checked=checked，前面属性名和属性值一样，就支持简写。name相同表示这些radio属于同一个组-->
<input type="radio" name="gender" checked>man
<input type="radio" name="gender">woman
</p>
<p>hobby:
<input type="checkbox" >篮球
<input type="checkbox">足球
<input type="checkbox">双色球
</p>
<!--加了multiple是多选，不加是单选-->
<p>province:
<select name="" id="" multiple>
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<p>province2:
<select name="" id="">
<optgroup label="北京">
<option value="">朝阳</option>
<option value="">海淀</option>
<option value="">昌平</option>
</optgroup>
</select>
</p>
<p>
自我评价:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>文件资料：
<input type="file">
</p>
<input type="submit" value="按钮名称">
<input type="reset" >
<input type="button" value="按钮">
</form>
</body>
</html>
小技巧补充
ul>li{$}*6 按tab可以直接生成
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
扫一扫
6835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
