笔记仅自用，发文章其实是为了保存和记录（逃）
可以直接打开看代码，也可以用浏览器查看效果
<!DOCTYPE html><!-- 声明使用html语法版本 -->
<html>
<head>
<title>
很好看的标题,html笔记
</title>
<meta http-equiv="Content-Type" content="text/html;charset-utf-8" />
<!-- 常用编码格式： utf-8 gbk gb2312 -->
<body>
hello world;
1,html语法不区分大小写 //小写<br />
2,有开始，必须有结束<br />
3,单个标记<br />
常用标签：<br />
单横线：
<hr />
换行：<br />
标题h：h1 ~ h6，加粗，独占一行
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
段落p：
<p>你说的对，</p>
<p>但是《原神》是由米哈游自主研发的一款全新
开放世界冒险游戏。游戏发生在一个被称作「提瓦特」的幻想
世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。</p>
<p>你将扮演一位名为「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和
他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。</p>
<p>.......................................... </p>
对齐align：left right center justify(对齐文本，容器内两端对齐)
<p style="text-align:center">你说的对，</p>
<p style="text-align:justify">但是《原神》是由米哈游自主研发的一款全新
开放世界冒险游戏。游戏发生在一个被称作「提瓦特」的幻想
世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。你将扮演一位名为「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和
他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。</p>
在一行显示完pre：
<pre>
但是《原神》是由米哈游自主研发的一款全新开放世界冒险游戏。
游戏发生在一个被称作「提瓦特」的幻想世界，
在这里，被神选中的人将被授予「神之眼」，导引元素之力。
你将扮演一位名为「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，
和他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。
</pre>
字体样式front：color颜色 font-size大小 font-family字体
<p>但是<front style="color: red; font-size: 50px; font-family: '幼圆';">《原神》</front>是由米哈游自主研发的一款全新
开放世界冒险游戏。游戏发生在一个被称作「提瓦特」的幻想
世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。</p>
修饰标签：b、strong加粗 i、em倾斜 sub、sup下标
<p>
<b>b《原神》是由米哈游</b>
<strong>strong自主研发的一款全新</strong>
<i>i开放世界冒险</i>
<em>em游戏。游戏发生在一个被称作</em>
<sub>sub「提瓦特」的幻想世界，</sub>
<sup>sup在这里，被神选中的人将被授予「神之眼」，</sup>
(正常)导引元素之力。
</p>
<p>
上下标的正确用法：
2<sup>2</sup> = 4,苏乐达<sup>TM</sup>,
a<sub>1</sub>,a<sub>2</sub>,...,a<sub>n</sub>,引用了很好看的句子<sub>[1]</sub>
</p>
图片显示img：src放图片路径会显示图片 vertical-align按什么对齐（默认button下对齐） alt图片没显示出来的时候就会显示里面的文本<br />
<br />《原神》是由米哈游自主研发的<img src="img/qingqve.png" style="vertical-align: top; width: 20%;" alt="图片显示不出来，拿这个凑合凑合">
开放世界冒险游戏。
<br />相对路径和绝对路径
path =
当前路径./xx.jpg
上一级路径../xx.jpg
上上一级路径../../xx.jpg (相对路径就是从当前路径寻找，当前路径只的是当前htm1所在路径)
下一级路径xx/xx.jpg
path="C:\Users\soukel\Desktop\web01\01.jpg"
一般在项目中都使用相对路径
<br /><br />
列表：无序列表，有序列表
ul无序列表，ol有序列表，li一行数据<br />
type更改1.无序列表每行前面小点的样式 2.有序列表标号样式的类型（会与start关联上） start指示有序列表从第几号开始标号
<ul type="square">
<li>你说的对</li>
<li>但是</li>
<li>《原神》是由米哈游</li>
<li>自主研发的开放世界游戏</li>
</ul>
<ol start="3" type="a">
<li>你说的对</li>
<li>但是</li>
<li>《原神》是由米哈游</li>
<li>自主研发的开放世界游戏</li>
</ol>
<br />
自定义列表：
dl表示自定义列表 dd里写列表内的元素（一行一个） dt表示下面dd的所属分类
<dl>
<dt>游戏</dt>
<dd>开放世界游戏</dd>
<dd>动作游戏</dd>
<dd>galgame</dd>
<dt>游戏账号</dt>
<dd>宝宝巴士</dd>
<dd>爽号</dd>
<dd>老登</dd>
<dd>中登</dd>
<dd>小登</dd>
</dl>
<br />
超链接a：在a标签里加东西-》点击这个东西即可跳转
href
1.进入目标网站
2.进入本地写好的网页（如helloworld.html）
3.下载文件
4.mailto: + 邮箱，会把邮箱设置为收件人发送文件
5.锚点跳转：只写个#后面要接name否则不跳转（空连接）,具体看下面演示~
target 1._blank在新开个页面跳转 2._self在本页面跳转(默认_self)
title 当鼠标放到超链接元素上时你想要显示的文本
<br />点击文本进入百度<a href="https://www.baidu.com/" target="_blank" title="进入百度">进入百度</a><br />
点击图片进入崩铁<a href="https://xz.eoghrt.cn/soft6/bdbh.html" target="_blank" title="进入崩铁"><img
src="img/qingqve.png" style="vertical-align: top; width: 20%;" alt="图片显示不出来，拿这个凑合凑合"> </a>
<br />点击文本或图片进入w3school<a href="https://www.w3school.com.cn/" target="_self" title="进入w3school">进入w3school <img
src="img/light.png" style="vertical-align: top; width: 20%;" alt="图片显示不出来，拿这个凑合凑合"></a><br />
<br /><a href="img/img.zip">下载文件</a>
<br /><a href="mailto:3138218847@qq.com">联系我们</a>
<br />
<a href="#chapter1">第一章</a><a href="#chapter2">第二章</a><a href="#chapter3">第三章</a>
<br /><a href="skip.html#chapter2">跳转到skip页面第二章锚点处</a>
<br /><a href="#" name="chapter1"></a>
<h1>第一章</h1><br />
<p style="text-align:justify">但是《原神》是由米哈游自主研发的一款全新
开放世界冒险游戏。游戏发生在一个被称作「提瓦特」的幻想
世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。你将扮演一位名为「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和
他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。
</p>
<a href="#" name="chapter2"></a>
<h1>第二章</h1><br />
<p style="text-align:justify">但是《原神》是由米哈游自主研发的一款全新
开放世界冒险游戏。游戏发生在一个被称作「提瓦特」的幻想
世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。你将扮演一位名为「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和
他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。
</p>
<a href="#" name="chapter3"></a>
<h1>第三章</h1><br />
<p style="text-align:justify">但是《原神》是由米哈游自主研发的一款全新
开放世界冒险游戏。游戏发生在一个被称作「提瓦特」的幻想
世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。你将扮演一位名为「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和
他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。
</p>
表格table：table里嵌套多个tr行，tr里嵌套多个td列
th表头，能自动把内容加粗居中
caption标题，会显示在表格的正上方并居中
注：table可以内嵌在td里 -》单元格内又有一个表格
border表格边框(默认none)
width表格总宽度（会根据内容多少动态调节）
background-color背景颜色
margin-left: auto; margin-right: auto; 将表格的左右外边距设置为自动
vertical-align垂直方向上表格内容对齐方式（默认center）
text-align字体水平对齐方式
colspan列合并(让这个格子独占几个本行单元格)
rowspan行合并(让这个格子独占几行本列单元格)
<table
style="margin-left: auto; margin-right: auto; border: 2px solid black; width: 500px; height: 600px; background-color: gray;">
<tr style="height: 100px;">
<td style="border: 2px solid red;">
痛苦号
<table style="border: 1px solid greenyellow;">
<tr>
<td style="border: 1px solid greenyellow;">爽号千篇一律</td>
<td>痛苦号千奇百怪</td>
</tr>
<tr>
<td>关爱深渊主播</td>
<td style="border: 1px solid greenyellow;">从小事做起</td>
</tr>
</table>
</td>
<td style="vertical-align: bottom;">爽号</td>
<td style="vertical-align: center; text-align: center">宝宝号</td>
</tr>
<tr>
<td style="text-align: right; vertical-align: top;">老登</td>
<td style="border: 2px solid blue;">中登</td>
<td style="border: 2px solid green;">小登</td>
</tr>
<tr>
<td colspan="2" style="border: 2px solid purple;">内容</td>
<td style="border: 2px solid pink" ;>内容</td>
</tr>
<tr>
<td rowspan="2" style="border: 2px solid darkcyan" ;>内容</td>
<td style="border: 2px solid darkcyan" ;>内容</td>
<td style="border: 2px solid darkcyan" ;>内容</td>
</tr>
<tr>
<td style="border: 2px solid darkcyan" ;>内容</td>
<td style="border: 2px solid darkcyan" ;>内容</td>
</tr>
</table>
<table style="margin-left: auto; margin-right: auto; border: 1px solid black; width: 50%; height: 300px;">
<caption>销售统计表</caption>
<tr>
<td rowspan="2" colspan="2" style="border: 1px solid black; text-align: center;">商品</td>
<td colspan="2" style="border: 1px solid black; text-align: center;">上月</td>
<td colspan="2" style="border: 1px solid black; text-align: center;">本月</td>
</tr>
<tr>
<td style="border: 1px solid black;">销量</td>
<td style="border: 1px solid black;">销售额</td>
<td style="border: 1px solid black;">销量</td>
<td style="border: 1px solid black;">销售额</td>
</tr>
<tr>
<td colspan="2" style="border: 1px solid black; text-align: center;">手机</td>
<td style="border: 1px solid black;">100</td>
<td style="border: 1px solid black;">500</td>
<td style="border: 1px solid black;">200</td>
<td style="border: 1px solid black;">400</td>
</tr>
<tr>
<td colspan="2" style="border: 1px solid black; text-align: center;">笔记本</td>
<td style="border: 1px solid black;">200</td>
<td style="border: 1px solid black;">450</td>
<td style="border: 1px solid black;">45</td>
<td style="border: 1px solid black;">700</td>
</tr>
<tr>
<td colspan="2" style="border: 1px solid black; text-align: center;">合计</td>
<td style="border: 1px solid black;"></td>
<td style="border: 1px solid black;"></td>
<td style="border: 1px solid black;"></td>
<td style="border: 1px solid black;"></td>
</tr>
</table>
<table style="width: 30%; height: 200px;">
<caption>销售统计表</caption>
<tr>
<th style="border: 1px solid black;">销量</th>
<th style="border: 1px solid black;">销售额</th>
<th style="border: 1px solid black;">销量</th>
<th style="border: 1px solid black;">销售额</th>
</tr>
<tr>
<td style="border: 1px solid black; text-align: center;">笔记本</td>
<td style="border: 1px solid black;">200</td>
<td style="border: 1px solid black;">450</td>
<td style="border: 1px solid black;">45</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
表单form：
action提交到指定位置（没写就提交到当前页面）
method提交方式（get,set,put,delete...）
input表示注入内容
type输入内容的类型：
text文本
password密码
radio单选按钮（name相同时，多个按钮中只能选中一个按钮）
checked勾选状态
checkbox多选框
submit提交
file上传文件 multipart/form-data(enctype="multipart/form-data":不对字符编码；要上传文件时一定要加上这个)
image图片提交按钮（图片就是提交键）
reset重置
button按钮
hidden隐藏控件（不会显示，但会提交数据）
textarea长文本 rows行数（高度） cols列数（宽度） name提交时的挂名 placeholder提示信息
select下拉框： option选项：
selected默认选择（默认值） size显示选项行数
multiple多选（按住ctrl单击即可多选）
value提交上去的值
name用来标识提交上去的内容所属元素
value设置默认值 / 上传时会提交的字段
maxlength输入内容最大长度
placeholder灰色提示词（会被value默认值覆盖）
<form action="skip.html" method="post" name="registerform" enctype="multipart/form-data">
<table>
<tr>
<td>
账号：<input type="text" name="username" maxlength="10" placeholder="请输入你的用户名">
</td>
</tr>
<tr>
<td>
密码：<input type="password" name="password" value="123456" placeholder="请输入你的密码">
<br />确认密码：<input type="password" name="check_password" value="123456" placeholder="确认密码">
</td>
</tr>
<td>
男<input type="radio" name="sex" value="man" checked="true">
女<input type="radio" name="sex" value="woman">
兰那罗<input type="radio" name="sex" value="lannaluo">
</td>
</tr>
<tr>
<td>
爱好：
跑步<input type="checkbox" name="hobby" value="1">
zzz<input type="checkbox" name="hobby" value="2" checked>
弹反<input type="checkbox" name="hobby" value="3" checked>
追击<input type="checkbox" name="hobby" value="4">
</td>
</tr>
<tr>
<td>
生日
<select size="3" multiple>
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7" selected>7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
</td>
</tr>
<tr>
<td>星期四宣言<br /><textarea name="message" rows="10" cols="100"
placeholder="请输入您的社死宣言">疯狂疯狂星期四，原味鸡两块九块九~</textarea></td>
</tr>
<tr>
<td>
简历文件上传：<input type="file" name="resume">
</td>
</tr>
<tr>
<td colspan="2" style="align-items: center;">
<input type="reset" name="reset" value="重置重置">
<input type="submit" name="submit" value="注册注册">
<input type="button" name="button" value="普通按钮">
<input type="image" name="img" style="width: 5%;" src="img/light.png">
<input type="hidden" name="id" value="100">
</td>
</tr>
</table>
<br />
<br />
<br />
<br />
</form>
iframe
框架可以把网页分成几个部分，每一个部分去加载一个单独的网页
<iframe src="skip.html"></iframe>
</body>
</head>
</html>
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
