核心提示：html的常用标签补充!DOCTYPE htmlhtmlhead lang=enmeta charset=UTF-8titledemo01/titlestyle#nav{position: fixed...
html的常用标签补充
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo01</title>
<style>
#nav{
position: fixed;
top: 0;
right: 10px;
width: 50px;
height: 120px;
background-color: orange;
}
</style>
</head>
<body>
<!--快捷键-->
<!--1：ctrl +/ ctrl+shift+/ 快速加注释-->
<!--2：tab 代码的自动补全-->
<!--3：ctrl +d 快速删除 -->
<!--4：alt+上下方向键 定位上下行-->
<!--5：ctrl+alt+下方向键 快速复制代码-->
<!--6：h2*5 tab h2复制五遍 -->
<!--
块级标签：独占一行 <p>烟台大学</p>
行级标签：占用的空间和内容等宽 <span>烟台大学，烟台大学</span>
-->
<span id="top"></span>
<p>清华大学</p>
<p>清华大学</p>
<span>清华大学，清华大学</span>
<span>清华大学，清华大学</span>
<!--标题标签-->
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<!--水平线标签-->
<hr color="green" size="10" align="center" width="50%"/>
<!--段落标签-->
<p>
asasa sas
<br/>
asasa
<br/>
</p>
<!--预格式-->
<pre>
清华大学
计算机学院
计科
</pre>
<!--无序列表-->
<ul>
<li>北京大学</li>
<li>清华大学</li>
</ul>
<!--有序列表 有序列表与无序列表之间可以相互嵌套-->
<ol>
<li>北京大学</li>
<li>清华大学</li>
</ol>
<!--分区标签-->
<p style="height: 100px;background: red">
</p>
<p style="height: 100px;background: green">
</p>
<!---->
<!--
span 文本 img 图片 em 强调
strong 强调 q 短引用 a 超链接 i 倾斜 b 加粗
-->
<p>商品价格：<span style="color: red;font-size: 50px">10</span>元起</p>
<img src="../img/log.jpg" alt="图片加载成功"/>
<br/>
<img src="../img/log1.jpg" alt="图片加载失败"/>
<br/>
<!--
1：超链接
外部资源的链接
内部资源的链接
2：锚点链接
-->
<a href="https://www.baidu.com">我要跳转到百度(默认的target的属性值是_self)</a>
<br/>
<a href="https://www.baidu.com"target="_blank">我要跳转到百度</a>
<br/>
<a href="../index.html">回到首页</a>
<br/>
<p style="height: 2000px;background-color: green";></p>
<a href="#top">返回顶部</a>
<h1 id="part1">第一章</h1>
<p style="background-color: red;height: 300px"></p>
<h1 id="part2">第二章</h1>
<p style="background-color: green;height: 300px"></p>
<h1 id="part3">第三章</h1>
<p style="background-color: black;height: 300px"></p>
<h1 id="part4">第四章</h1>
<p style="background-color: orange;height: 300px"></p>
<p id="nav">
<a href="#part1">第一章</a>
<a href="#part2">第二章</a>
<a href="#part3">第三章</a>
<a href="#part4">第四章</a>
</p>
<!--强调标签-->
<em>版权所有，侵权必究！（em的作用是强调，比i着重渲染）</em><br/>
<i>版权所有，侵权必究！</i>
<strong>版权所有，侵权必究！（strong的作用是强调，比b着重渲染）</strong><br/>
<b>版权所有，侵权必究！</b>
<br/>
<!--短引用标签-->
<q>谦虚使人进步（自动加引号）</q>
<!--长引用标签-->
<br/>
<blockquote cite="https://www.xiaomi.com">站在风口上........(前面有缩进)</blockquote>
<br/>
<!--变小标签（比相邻的字体小一号）-->
<p>版权所有，<small>侵权</small>必究。</p>
<br/>
<!--
©
<table>
属性:border-表格边框
width:表格的宽度
align：表格的对齐方式
bgcolor:背景颜色
<tr>代表行
<td>代表单元格
属性：colspan列合并
rowspan行合并
<td rowspan="2">
<td colspan="2">
<caption>表格的标题
表格的作用：简单的实现一个表格样式；进行布局
-->
<table border="1" width="50%" align="center">
<caption>成绩表</caption>
<tr align="center">
<td></td>
<td></td>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<th></th>
</tr>
</table>
<p>
<table width="100%" bgcolor="green">
<tr align="right">
<td>
<input type="text"/>
<input type="button" value="搜索"/>
</td>
</tr>
</table>
</p>
<!--
表单标签：form标签
属性：name-表单名称
action-提交的路径地址
method-提交方式 没写是默认get提交，
get和post提交的区别：
get提交是将数据加在地址栏的后边，以？开始&连接，而post提交将数据封装在请求体中
get提交相对不安全，post提交相对安全
get提交有大小限制，限制浏览器不同而不同；post不限制大小
input标签
属性: type的值不同会显示不同功能表单项
text 普通的文本输入框
value 是他的默认值
password 密码输入框，显示掩码
radio 单选按钮 注意：如果想让一组单选按钮互斥，必须name属性相同
checked:默认被选中
checkbox:复选框 注意：如果想让一组单选按钮互斥，必须name属性相同
checked:默认被选中
file:上传文件
button:普通按钮 没有任何内置的功能
submit:提交按钮 点击表单按照action地址进行提交
reset:重置按钮 点击会将表单清空
image:图片按钮 点击表单按照action地址进行提交
属性：src:图片的地址
alt:图片的文字信息
hidden:隐藏表单 作用：服务器需要的数据，但是不需要用户看到
select标签
name:表单项的名称
option标签 代表一个选择项
属性：value
selected:默认被选中的项
textarea标签
cols:列数
rows:行数
注意：默认文本值在标签体当中
-->
<form action="#" name="myform">
<table>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" value="zhangsan"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" value=""/>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" value="male" checked="checked"/>男
<input type="radio" name="sex" value="female"/>女
</td>
</tr>
<tr>
<td>
爱好
</td>
<td>
<input type="checkbox" name="hobby" value="basketball" checked="checked"/>篮球
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="volleyball"/>排球
</td>
</tr>
<tr>
<td>
地址
</td>
<td>
<select name="city" id="">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj" selected="selected">天津</option>
</select>
<select name="area" >
<option value="hd">海淀</option>
<option value="cy">朝阳</option>
<option value="cp">昌平</option>
</select>
</td>
</tr>
<tr>
<td>
邮箱
</td>
<td>
<input type="text" name="email" value=""/>
</td>
</tr>
<tr>
<td>
上传头像
</td>
<td>
<input type="file" name="file" />
</td>
</tr>
<tr>
<td>
文本域
</td>
<td>
<textarea name="ta" cols="30" rows="10">this is my page</textarea>
</td>
</tr>
<tr>
<td>
<input type="button" value="button"/>
<input type="submit" value="submit"/>
<input type="reset" value="reset"/>
</td>
</tr>
<tr>
<td>
<input type="image" src="../img/log.jpg" alt="图片提示的文字"/>
<input type="hidden" name="hide" value="xxx"/>
</td>
</tr>
</table>
</form>
</body>
</html>
