1 标题标签 h1~h6
2 文本样式标签
3 段落标签 p
4 超链接标签 a
5 列表标签 ul ol
6 盒子标签 div
7 图片标签 img
8 span标签
9 表格标签 table
10 表单标签 form
11 表单控件 button textarea select option input label
<!DOCTYPE html>
<html lang="en">
<head>
<title>注册信息</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="icon" href="./1.ico">
</head>
<body>
<!-- 标题标签
h1-h6 不同级别的字体,从大到小。 块状元素-->
<h1>lalallala</h1>
<h2>lalallala</h2>
<h3>lalllaaaa</h3>
<h4>lalallala</h4>
<h5>lalalalla</h5>
<h6>lalallala</h6>
<!-- 文本样式标签
1. `<b></b>`:加粗
2. `<i></i>`:斜体
3. `<u></u>`:下划线
4. `<s></s>`:删除线
5. `<sup></sup>`:上标
6. `<sub></sub>`:下标用于强调一段化话中的某些:
7 `<em></em>`默认会用斜体表示
8 `<strong></strong>`会用粗体来表示
9 `<br>`换行
10 `<hr>`用横线分割
-->
<!-- 可以进行多重嵌套 -->
<h1>
<u><i>lallalala</i></u>
<sup>haha</sup>
</h1>
<!-- 段落标签p
块状元素 -->
<p>lfdslafsajf<br>lhaemkhnjajsd<em>snvsf<hr>dsfdsf</em>hakfj<br>cnsl<strong>sfesf</strong>adfjiesafljasdsljfe</p>
<p><hr>fefewb<hr>scfdvf<hr>dscs<hr>sdsfcsf<hr>dsdsc<hr>sdsdsd<hr>sdsds<hr>dsdswd<hr>dsd<hr>ds<hr>sds<hr>scs<hr>scc</p>
<!-- 超链接标签
a 行内元素 -->
<!-- _bank 在新的网站打开
_self 在当前网站打开 -->
<a href="https://www.baidu.com" target="_bank" title="路飞学城">路飞学城</a>
<a href="https://www.baidu.com" target="_self" title="路飞学城">路飞学城</a>
<!-- 下载包要先存在,邮箱要先登录着 -->
<a href="a.zip">下载包</a>
<a href="mailto:[email protected]">联系我们</a>
<!-- 返回顶部 -->
<a href="#">跳转顶部</a>
<!-- 一般在div中会设置id -->
<a href="#id=1">跳转id=1</a>
<!-- 执行js代码 -->
<a href="javascript:alert()">执行js</a>
<!-- 列表标签
ul 无序 ol 有序 -->
<!-- type:列表标识的类型disc:实心圆(默认值)
circle:空心圆
square:实心矩形
none:不显示标识
-->
<!-- type:列表标识的类型
1:数字
a:小写字母
A:大写字母
i:小写罗马字符
I:大写罗马字符
-->
<ul type="square">
<li>dafsdfd</li>
<li>sdfcsevf</li>
<li>dsafas</li>
</ul>
<ol type="a">
<li>fsfasf</li>
<li>sdfaa</li>
<li>fsfesf</li>
</ol>
<!-- 盒子标签
div 用来进行分区 只低于head和body-->
<div class="lalalla">
fsafafsagdsk
fsegesgsbvg
fesgvsabvbvse
<h1>fwegfawfawf</h1>
<ul type="square">
<li>dafsdfd</li>
<li>sdfcsevf</li>
<li>dsafas</li>
</ul>
</div>
<!-- 图片标签
img 行内块状元素 可同行,可定义长宽 -->
<!-- 1 src设置的图片地址可以是本地的地址也可以是一个网络地址。
2 图片的格式可以是png、jpg和gif。
3 alt属性的值会在图片加载失败时显示在网页上。
4 还可以为图片设置宽度(width)和高度(height),不设置就显示图片默认的宽度和高度
5 浏览器查看效果:行内块元素,与行内元素在一行内显示
-->
<img src="data:image/jpeg;base64,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" alt="谷歌" style="width: 200px;height: 200px">
<img src="./1.png" alt="hahh" style="width: 200px;height: 200px">
<img src="./2.png" alt="hahh" style="width: 200px;height: 200px">
<!-- 其他的一些标签 -->
<!-- span标签
可以单独摘出某块内容,结合css设置相应的样式 -->
<div>
<span>sdfsgvsdfe</span>
sdfsgasdfs
<img src="./2.png" alt="hahh" style="width: 200px;height: 200px">
</div>
<!-- <br>标签
用来将内容换行 -->
<p>fdsfaasf<br>fsfsfsf</p>
<!-- <hr>标签
用来在HTML页面中创建水平分隔线,通常用来分隔内容 -->
<p>fdsfaasf<hr>fsfsfsf</p>
<!-- 特殊符号
HTML代码中的所有连续的空行(换行)也被显示为一个空格 -->
<p>
fsd fsf
ffdsf
</p>
<!-- 表格标签
table -->
<!-- 属性
border=“1” 显示边框
cellspacing=“0” 取消间隙 -->
<!-- 合并
rowspan 合并行(竖着合并) tr套td时
colspan 合并列(横着合并) td套tr时
-->thead表头 tbody表主体 tfoot表尾
tr行 th列(表头) tr行 td列(表主体)
<div class="table">
<table border="1" cellspacing="0">
<!-- 表头 thead-->
<thead>
<!-- 表头行 tr-->
<tr>
<!-- 表头列 th-->
<th></th>
<th>
monday
</th>
<th>
tuseday
</th>
<th>
thursday
</th>
</tr>
</thead>
<!-- 表体 tbody-->
<tbody>
<!-- 表头行 tr-->
<tr>
<!-- 表头列 td-->
<td rowspan="2">am</td>
<td>heheh</td>
<td>lallf</td>
<td>fsfgsdf</td>
</tr>
<tr>
<td>heheh</td>
<td>lallf</td>
<td>fsfgsdf</td>
</tr>
<tr>
<td>pm</td>
<td>heheh</td>
<td>lallf</td>
<td>fsfgsdf</td>
</tr>
</tbody>
<!-- 表尾 tfoot-->
<tfoot>
<tr></tr>
</tfoot>
</table>
</div>
<!-- 表单标签
form-->
<!--
action 定义表单被提交发生的动作,提交给服务器处理程序的地址
method 定义表单提交数据的方式
get 明文提交,提交内容会显示在地址上,安全性低
数据最大为2KB
post 隐式提交
无大小限制
enctype 编码类型
取值:application/x-www-form-urlencoded (默认)允许提交普通字符、特殊字符
multipart/form-data 允许将文件提交给服务器
text/plain 只允许提交普通字符
Note:提交文件,method用post,enctype用multipart/form-data
-->
<!-- 表单控件
button按钮
textarea文本域
允许用户录入多行数据
cols 列数
rows 行数
select和option选项框
select
size 大于1为滚动列表,否则为下拉菜单
multiple 允许多选
option
value 选项的值
selected 预选,默认是第一项
input
type
button
text 明文显示用户输入的数据
password 密文
radio 单选按钮 checkbox复选框 checked设置后默认选中
submit 提交给服务器
file 上传文件
value
控件值,传给服务器的数据
name
控件名称,服务器用
disable
禁用该控件
id
id地址,一般与label关联
placeholder
文本框中默认内容
label
关联文本与表达元素,点击文本如同点击表单元素
for 表示与该label关联的表单控件元素的id值-->
<div class="form">
<form action="http://www.baidu.com" method="get">
<!-- usename -->
<p>
<label for="user">用户名</label>
<input type="text" name="username" id="user" placeholder="请输入用户名">
</p>
<!-- password -->
<p>
<label for="password">密码</label>
<input type="password" name="password" id="password" placeholder="请输入密码">
</p>
<!-- gender -->
<p>
<input type="radio" name="gender" value="男" checked>男
<input type="radio" name="gender" value="女">女
</p>
<!-- hobby -->
<p>
<input type="checkbox" name="hobby" value="111" checked>111
<input type="checkbox" name="hobby" value="222">222
<input type="checkbox" name="hobby" value="333">333
<input type="checkbox" name="hobby" value="444">444
</p>
<!-- put file -->
<p>
<input type="file" name="textfile">
</p>
<!-- textarea -->
<p>
<textarea rows="5" cols="20" name="text" placeholder="请输入自我介绍"></textarea>
</p>
<!-- select and option -->
<p>
<select size="2" name="sel" multiple="">
<option value="北京" selected>北京</option>
<option value="南京">南京</option>
<option value="天津">天津</option>
</select>
</p>
</form>
</div>
</body>
</html>