目录
HTML
中文名:超文本标记语句
全称:Hyper Text Markup Language
超文本:以文本展示非文本的内容
标记:有特殊含义的标签
基本格式
方式1:<标签名 属性区> 内容区 </标签区>
方式2:<标签名 属性区/>
方式1可以在其中嵌套标签,方式2不可以嵌套别的标签 多个属性直接使用空格隔开
注释语法：
<!--
时间：2022-11-07
描述：
-->基本结构
<!DOCTYPE html> 作用:表示当前文档类型为html文件
<html> html:网页根标签包含网页中的所有内容
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
这块是给用户看的
</body>
</html>
常用标签
基本标签
文本展示标签:font
图片展示标签:img
音频:audio
视频:video
换行:br
水平分割线:hr
<!--
img标签:支持gif图
src:展示的图片地址
可以是网址
也可以是本地图片地址
alt:当图片加载失败时显示的内容
-->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
<br />
<img src="img/QQ图片20220325160444.jpg" width="300px" height="200px"/>
<br />
<img src="img/QQ图片20220325160444.jpg" width="300px" height="200px" alt="影狐狸" />
<!-- br:换行 -->
<br />
<hr />
<!--
src:资源地址
controls:控制器
loop:循环播放,有兼容问题
autoplay:自动播放,有兼容问题
-->
<audio src="media/horse.mp3" controls autoplay loop></audio>
<video src="media/movie.ogv" controls autoplay loop></video>表单标签
input：输入
type:输入类型
text:文本输入,默认的类型
password:密码输入
radio:单选按钮,注意,name属性值相同则为一组,要求需要value值,
checkbox:多选按钮
button:按钮
submit:提交按钮
reset:重置按钮
file:文件上传
placeholder:提示字,属性值自定义
name:标签名称,属性值自定义
value:值,在类型为按钮时,表示按钮上显示的内容
例如：
<font>简单注册</font>
<br/>
账号：<input type="text" placeholder="账号">
<br/>
密码：<input type="password" placeholder="密码">
<br/>
性别：
<input type="radio" value="男" name="sex" >
<font>男</font>
<input type="radio" value="女" name="sex" >
<font>女</font>
<br/>
<br/>
<font>爱好</font>
<br/>
<input type="checkbox" value="唱" name="like">
<font>唱</font>
<input type="checkbox" value="跳" name="like">
<font>跳</font>
<input type="checkbox" value="RAP" name="like">
<font>RAP</font>
<br/>
<br/>
<br/>
<font>你的国籍:</font>
<br/>
<select>
<option>选择你的国籍</option>
<option selected="selected">中国</option>
<!--
描述：selected表示默认
-->
<option>m78</option>
</select>
<br/>
<br/>
<font>如何评价</font>
<textarea rows="10" cols="10"></textarea>
<br/>
<br/>
<input type="button" value="注册" />
<input type="submit" value="上传" />
<input type="reset" />
<br />
<input type="file" />
<br />
<input type="range" />
<br />
<input type="date" />
<br />
<input type="hidden" value="啦啦"/>
<!-- 这个hidd--> 是隐藏域，用户看不见的
<br />
select:选择器
multiple:设置可以多选（在win系统中需要按住ctrl）
size:展示的子项数量
子项:option
属性: selected:默认选中
<font>你的国籍:</font>
<br/>
<select>
<option>选择你的国籍</option>
<option selected="selected">中国</option>
<!--
描述：selected表示默认
-->
<option>m78</option>
</select>textarea：文本域
rows:行
cols:列 设置一个文本域，可用行列控制大小
<font>如何评价</font>
<textarea rows="10" cols="10"></textarea>
form：
1. enctype：上传类型
application/x-www-form-urlencoded不上传文件就使用该类型,该类型为默认执行
multipart/form-data 上传文件使用该类型
2. method:请求方式
get:显式请求
如:http://127.0.0.1:8080/?username=1234&password=123456 注意:不能超过100个字符 经验:get用于下载
post:隐式请求
注意:上传数据量无限制 经验:post用于上传或密码相关
3.action:接收请求的地址
<body>
<form action="http://127.0.0.1:8000" method="get"enctype="multipart/form-data">
账号<input type="text" placeholder="输入账号" name="username" />
<br/>
密码<input type="password" placeholder="请输入账号" name="password"/>
<br/>
<input type="submit" value="登录"/>
</form>
<br/>
<form action="http://127.0.0.1:8000" method="post"enctype="application/x-www-form-urlencoded">
账号<input type="text" placeholder="输入账号" name="username" />
<br/>
密码<input type="password" placeholder="请输入账号" name="password"/>
<br/>
<input type="submit" value="登录"/>
</form>
显式提交
隐式提交
超链接标签:a
链接网页：语法
<a href="链接">显示的字</a>
<a href="https://www.baidu.com">百度一下</a>
<a href="demo3.html">去demo3</a>
点击即可跳转到该链接
锚点：
<font id="top">最顶</font>
......
<a href="#top">语句</a>
如图点击 语句 就会在同一个页面跳转到 最顶 的位置
例2
<a href="#top01">01</a>
.....
<font id="top01">第一个</font>点击01就会跳到第一个
布局标签
标题标签
h1,h2,h3,h4,h5,h6
<h1 align="middle">A</h1>
<h2>A</h1>
<h3 align="right">A</h1>
<h6 align="left">A</h1>效果
段落标签
<p>
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</p>
<p>
宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
</p>
一个   代表一个空格
列表
ul 无序列表
ol有序列表
<ul>
<li>第一个选项</li>
<li>第二个选项</li>
<li>第三个选项</li>
<li>第四个选项</li>
</ul>
<ol>
<li>第一个选项</li>
<li>第二个选项</li>
<li>第三个选项</li>
<li>第四个选项</li>
</ol>
效果：
表格
align="center"居中
table:表格 tr:行 td:单元格th:特殊单元格
<TH>标签就是Table Heading，意思是表格标题。<TH>标签在使用时，跟<TD>标签没有什么区别，如果非要说有点区别的话，那就是<TH>一般只用在第一个<TR>下。在浏览器中显示时，<TH>标签被显示为加粗的字体，其它的跟普通的<TD>也没有区别。
例：
<table border="1" cellspacing="0" align="center">
<tr>
<td align="center" colspan="4">第一行</td>
</tr>
<tr>
<td>第二行第一个</td>
<td>第二行第二个</td>
<td colspan="2">第二行第三个</td>
</tr>
<tr>
<td>第三行第一个</td>
<td>第三行第二个</td>
<td>第三行第三个</td>
<td>第三行第四个</td>
</tr>
<tr>
<td>第四行第一个</td>
<td>第四行第二个</td>
<td>第四行第三个</td>
<td>第四行第四个</td>
</tr>
<tr>
<td>第五行第一个</td>
<td>第五行第二个</td>
<td colspan="2" rowspan="2">第五行第三个</td>
</tr>
<!--
作者：offline
时间：2022-11-07
描述：rowspan合并列
-->
<tr>
<td>第六行第一个</td>
<td>第六行第二个</td>
</tr>
</table>border="1" 黑框框大小
cellspacing="0" 框框之间的距离
容器标签
<div> <div>
将某个东西包裹起来
例：
<div align="center">
<img src="img/QQ图片20220325160444.jpg"width="30%" height="30%" />
</div>将图片居中
fieldset
例：
<fieldset style="width: 300px;">
<legend>管理员登录</legend>
<input type="text" placeholder="请输入账号" />
<br />
<input type="password" placeholder="请输入密码" />
<br />
<input type="button" value="登录" />
</fieldset>
表现出这种格式
框架标签
frameset
frame
上面两个都过时了，。
iframe
<a hraf="xxx" target="a_frame">链接</a>
<iframe name="a_frame" > </iframe>
也可以
<iframe src = "xxx" > </iframe>iframe标签可以实现html主页面嵌套html子页面，子页面可以是一个功能页面
其他细节
1.所有标签都有id,class属性，一个网页中id属性值不能重复 一个网页中class属性值允许重复
2. 所有标签都有onclick(点击)事件，意味着所有标签都可以当做按钮
2808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
