<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
1.<!-- a(超链接) ""里面加超链接地址 ><中间加内容
超链接的四个状态： 未访问：蓝色 已访问：紫色 悬浮：不一定 按住不动：红色
加title后加文字内容鼠标悬浮时提示文字
加target="_blank"代表是跳转新窗口打开
target:
_self 当前窗口打开
_blank 新窗口打开
_parent 父级窗口打开（在iframe中）
_top 顶级窗口打开（在iframe中）
自定义 在指定的窗口打开（在frameset中）-->
<a href="" title="" target="_blank"></a>
<!-- 返回顶部 -->
<a href="#"></a>
<!-- 空连接(暂时占位,不跳转) -->
<a href="##"></a>
<!--javascript后面的:;中间可以写js代码-->
<a href="javascript:;"></a>
<!-- 拨打电话(移动端使用) -->
<a href="tel:18336396807"></a>
<!-- 发送邮件 -->
<a href="mailto:7860871447@qq.com">发送邮件</a>
<!-- 锚点(创建锚点 链接锚点)
锚点可以实现点击跳转到网页的某个部分 -->
<!-- 创建锚点 name后加锚点名称 -->
<a name=""></a>
<!-- 链接锚点 href后加 #锚点名称 -->
<a href=""></a>
<!-- 同页面锚点链接 直接创建锚点后链接即可-->
<!-- 不同页面锚点链接 首先用href加路径选择要跳转的网址 然后直接在后面加上#锚点名称即可 -->
2.<!-- img(图片) src后加图片地址 alt是图片无法正常显示加载文字
图片常见格式：jpg：正常图片 png：半透明 gif：动图
加title后加文字内容鼠标悬浮时提示文字 调整宽或者高图片会等比例缩放-->
<img src="" alt="" title="" width="" height="">
<!-- 热点地图(点击图片不同位置跳转不同链接)
步骤：首先写出img图片标签 然后使用map进行热点地图的命名 在img标签后加 #热点地图名 -->
<img src="" alt="" title="" usemap="">
<map name="" id="">
<!-- area是面积
shape后加图形形状 coords后加的是每个点的坐标
rect是矩形左上角和右下脚两个点
circle是空心圆 写出圆心和半径
poly是多边形 从任意点开始都可以
href后面加热点地图跳转的地址 -->
<area shape="" coords="" href="" alt="">
</map>
<!--图文并茂 -->
<figure>
<img src="" alt="">
<figcaption>文字内容</figcaption>
</figure>
3.<!-- h1-h6(标题标签) -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
4.<!-- hr(水平线标签)
<hr width="" 长短size="" 粗细 align="" 对齐位置 color="" 颜色 noshade 是否有阴影no是没有 />-->
<hr size="1" color="gray" align="left" width="50px" noshade />
5.<!-- p(段落标签) 独占一行 上下自带间距-->
<p></p>
6.<!-- br(强制换行) -->
<br>
7.<!-- ./(路径) ./同级路径 ../上级路径 /根目录vscode中打开的文件夹就是根目录-->
./ ../ /
8.<!-- div span (无意义标签) -->
<div></div>
<!-- 独占一行 可以直接设置宽高-->
<span></span>
<!-- 在一行显示 不能直接设置宽高-->
9.<!--ul li(无序列表)
默认给的是实心圆
circle 空心圆
square 实心矩形
li里面套ul 一层一层分别默认是实心圆 空心圆 实心矩形-->
<ul type="">
<li></li>
<li></li>
</ul>
10.<!-- ol li(有序列表)
type：a|A|i|I (不同的有序排列样式)
start后面加数字代表从第几个开始-->
<ol type="" start="">
<li></li>
<li></li>
<li></li>
</ol>
11.<!-- dt|dd自定义列表 -->
<dl>
<dt></dt>
<dd></dd>
</dl>
12.<!-- pre预格式标签(原格式输出) -->
<pre></pre>
13.<!--table(表格)
行tr 列td
表名caption：写在table下面
表头th：先写tr th(自动居中且文字加粗)
border 添加边框
cellspacing是表格与表格的间距
cellpadding是表格与文字之间的间距
bgcolor是整体表格的颜色可以加给 table tr td
align是对齐方式(水平方向)left center right
valign对齐方式(垂直方向)top上 middle中 bottom下
合并：只能向下向右合并 rowspan/colspan后要加数字(要合并几个)
rowspan列合并 colspan行合并 合并之后要删除被合并的
若是想在表格中加标签就需要加tr td 然后进行合并后加标签使用-->
<table border="1" cellspacing="0" cellpadding="0" width="400" height="400">
<caption>表名</caption>
<tr>
<th>表头自动</th>
<th>表头自动</th>
<th>表头自动</th>
</tr>
<tr align="center" valign="middle">
<td>123123</td>
<td>123123</td>
<td>213123</td>
</tr>
<tr align="center" valign="middle">
<td>123213</td>
<td>123123</td>
<td>123123</td>
</tr>
<tr align="center" valign="middle">
<td>123132</td>
<td>123123</td>
<td>123123</td>
</tr>
</table>
14.<!-- form(表单)
action： 提交的位置
method： 提交方式，默认是get，通过地址栏进行传递数据 post：通过隐藏的方法传递数据
name： 给整个表单起名字
enctype:是给下面的文件传输功能使用的标签
autocomplete是不再显示历史记录可以加在文本框上-->
<form action="" method="" name="" enctype=""autocomplete="off">
<!--
type：是类型
name：名字 一定要写不能重复
size是框的大小
maxlength 可以输入内容的最大长度
placeholder 占位符，(灰色提示文字)
value 值，是真正的数据，可以被提交，输入的内容其实就是value-->
<!-- text(文本框) input默认是单行文本框
readonly表示只读(禁用) 如果里面有数据依然可以被提交-->
用户名: <input type="text" name="" size="" maxlength="" placeholder="提示文字" readonly>
<!-- password(密码框) -->
<input type="password" name="" size="" maxlength="" placeholder="">
<!-- textarea(多行文本框)
rows：多少列 cols：多少行 -->
<textarea name="" id="" rows="" cols=""></textarea>
<!-- radio(单选框)
name值要一致，name一致代表为一组就是只能选中一个
checked：默认选中
必须要有value值，value里面的内容就是被提交的内容
label的作用是点击文字也可以选中 让for和id内容相等-->
<label for="man">男</label>
<input type="radio" name="sex" id="man" value="男" checked>
<label for="woman">女</label>
<input type="radio" name="sex" id="woman" value="女">
<!--checkbox(多选框复选框)
name 必须添加,并且一致
love[] 当前数据为数组类型 可以避免后者name覆盖前者的问题
value是要传出的数据
若是想通过点击文字实现就让for等于id
disabled表示禁止使用即使默认选中也无法提交-->
<label for=""></label>
文字内容<input type="checkbox" name="love[]" id="" value="" disabled>
文字内容<input type="checkbox" name="love[]" id="" value="">
文字内容<input type="checkbox" name="love[]" id="" value="">
<!--前缀不同是select size(下拉菜单)
size是用户直接可以看见的文字大小 -->
<select name="" id="" size="1">
<!-- 下面是多选内容往后都是一样 -->
<option value=""></option>
<option value=""></option>
<!-- 多选框内容分类：optgroup label -->
<optgroup label="分类1">
<option value="">多选内容1</option>
<option value="">多选内容2</option>
</optgroup>
<optgroup label="分类2">
<option value="">多选内容1</option>
<option value="">多选内容2</option>
<option value="">多选内容3</option>
</optgroup>
</select>
<!--file (文件上传)
如果有文件上传
那么method必须为post(隐藏的方法传递数据)
必须吧enctype修改为multipart/form-data
否则数据无法提交
上面修改的form表单的-->
上传: <input type="file" name="">
<!-- hidden(隐藏域) 即就是看不见的传输 -->
<input type="hidden" name="" id=""
value="传输内容">
<!-- fieldset(边框包裹文字一半) 不常用 -->
<fieldset>
<legend>输入相关信息</legend>
username: <input type="text" />
password: <input type="password" />
</fieldset>
</form>
15.<!-- 按钮
提交按钮：直接提交数据
重置按钮：清空表单数据
普通按钮：没有任何效果，反而用的最多
submit：提交按钮
reset：重置按钮
button:是普通按钮
value是按钮文字
image是图片按钮默认是提交按钮-->
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<input type= "image" src="" name="" value="图片按钮(默认是提交按钮)"/>
16.<!-- frameset(框架集)
分割几份就写几个数值中间用，隔开
rows 横向分割
cols 纵向分割
* 剩余的全部
跳转：如果想要在某个指定的窗口跳转【只能在frameset框架集中使用】
1. 给窗口添加name属性，name不能重复
2. 跳转到指定的name窗口
<a target="name名称">百度</a>
noframes 是检测如果浏览器不支持框架集则会出现body内文字
frameborder 0/1 规定是否显示框架边框
border 设置边框粗细
scrolling yes/no/auto 规定框架是否出现滚动条
noresize 规定无法调整框架的大小
在写分割的页面时超链接跳转加target="name名字"就是跳转到哪一块
{下面的整块区域不能写在body}
-->
<frameset rows="10%,*">
<noframes>
<body>
你的浏览器不持支框架
</body>
</noframes>
<!-- 下面是被分割的第一部分 -->
<frame src="" frameborder="0" scrolling="no" noresize="noresize" name=""></frame>
<!-- 下面是被分割的第二部分第二部分又被纵向分割两份 -->
<frameset cols="10%,*">
<frame src="跳转name" frameborder="0" scrolling="no" noresize="noresize" name=""></frame>
<frame src="跳转name" frameborder="0" scrolling="no" noresize="noresize" name=""></frame>
</frameset>
</frameset>
<!-- iframe(内联框架) -->
<iframe src="加引入html地址" frameborder="0" width="" height="" scrolling="no|auto|yes"></iframe>
17.<!-- details(隐藏内容展开) -->
<details>
<summary>点击查看更多</summary>
<a href="#">我是一段被隐藏的内容</a>
</details>
</body>
</html>
8522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
