a lot of html
HTML
MDN网站
<!DOCTYPE html> 文档声明
<meta charset="UTF-8"> 设置编码方式，在head中写
head里面的title是网页签名
<a href="https://www.sb.com">网站名字</a> 超链接
<img src="XXX" width="123px" height="123px" alt="图片描述">将图片命名为favicon.ico放在根目录，用Live Server打开会加载网页logo
快捷键
ctrl + / 注释代码
ctrl+shift+k 快速删除代码，光标任意放
alt+shift+下箭头 向下复制一行
shift+alt+鼠标 选择多行标准结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Docment</title>
</head>
<body>
</body>
</html>元素分为行内元素和块状元素（独占一行）语义感强的标签
<P> </P> 表示段落
<div></div>盒子
<h1 ~~ h6> 标题
<em></em> 强调
<strong></strong> 强调
<span></span> 无语义路径分类
相对路径：./dwa./deag./ddd.jpg 常用
绝对路径：
本地：C:/aaa/vbb/c.png 不常用
网络：https://sssss.jpg 常用常见图片格式
1.jpg 有损压缩，占用空间少，不支持透明背景
2.png 无损压缩，占用空间大，支持透明背景
3.bmp 不压缩，占用空间极大，不支持透明背景
4.gif 仅支持256种颜色，支持简单透明背景，支持动态图
5.webp 具备上述格式的优点，但兼容行不好
6.base64 图片转base64放在src使用，一般小图用base64或者和网页一起加载超链接
href target download name id # 空
<a href="https://bilibili.com" target="_blank">去B站</a>
target表示新标签还是此标签，_self为此标签， _blank为新标签
<a></a>标签内可以插入img等标签，且点击可跳转，但不是嵌套<a></a>标签
<a href="xxx" download="名字"></a> 点击就下载，而不是打开，且下载名字为设定的名字，download可以不附加文字，则下载名为文件名跳转锚点
<!-- 使用锚点，用#加上名字 -->
<a href="#msn">点我跳转美少女</a>
<p>
<img src="./imgs/2a303c7665bec43ceb5cb3e9311f1c98e3cedaf6.jpg" alt="神子" height="500px">
<br>
<img src="./imgs/70c77d9c672707cfd97d51604c227e24355143.jpg" alt="米游姬" height="500px">
<br>
<img src="./imgs/97613771_p0.jpg" alt="凯尔希" height="500px">
<br>
<!-- 设置跳转锚点 -->
<a name="msn"></a>
<img src="./imgs/be0089117703b89de97d240b1665e58a23345906.png" alt="美少女" height="500px">
<br>回到顶部 刷新页面 跳转到其他页面的指定部分
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
<a href="./html页面路径#id or name">点我跳转到其他页面设置好的id或者name</a>唤起指定应用
<a href="tel:10086">打电话</a>
<a href="mailto:123@123.com">发邮件</a>
<a href="sms:10010">发短信</a>列表
有序列表：
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
自定义列表：
<dl>
<dt> 标题</dt>
<dd> 叙述</dd>
</dl>表格
<table>
表示表格
</table>
<caption></caption> 表格标题
<thead></thead> 表格头部
<tbody></tbody> 表格主体
<tfood></tfood> 表格脚注
<tr></tr> 表示行 在任何部位试用
<th></th> 表示列 只能在<thead></thead>中使用
<td></td> 表示列 在除<thead></thead> 之外使用表格常用属性
<table border="1" width="500" height="300" cellsapcing > 控制表格边框，但值只能控制外边框 宽度 高度（不改变头脚高度）单元格间隙
<thead height="300" align="left right center" valign="top middle bottom"> align控制水平对齐方式 valign控制垂直对齐方式
</thead> 如果thead高度和table高度冲突，由thead决定
< tbody align height valign></tbody>
<thead height align valign>
</thead>
<tr height align valign>
</tr>
<th width height align valign>
</th>
<td height align valign>
</td>
gpt修正部分：
<table border="1" width="500" height="300" cellspacing="5">
<thead>
<tr height="300" align="left" valign="top">
<th width="100" height="50" align="center" valign="middle">表头单元格</th>
<!-- 其他表头单元格 -->
</tr>
</thead>
<tbody>
<tr height="100" align="center" valign="middle">
<td align="left" valign="top">数据单元格</td>
<!-- 其他数据单元格 -->
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">表格脚注</td>
</tr>
</tfoot>
</table>跨行和跨列
<tr colspan="6"></tr> 跨6列
<tr rowspan="5"></tr> 跨5行常用标签
<br> 换行
<hr> 分割线
<pre>
按原文显示 保留格式，vscode什么样，网页什么样
</pre>表单基本属性
<form action="https://xxxxxxx" target=_black method="get/post">
<input type="text" name="xxxx" value maxlength>
<button>搜索</button>
<input type="radio" ch>单选框
性别
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="fmale">女
</form>
按钮（button/input的submit）不可以写value
button默认type为 submit（提交）
<input>标签三个常用属性：name,type,value
其他：maxlength,checked
类型：radio，单选框
checkbox，多选框
text，文本框
password，密码框
hidden，隐藏框
reset，重置按钮
submit，提交按钮
禁用：disabled 只能看不能改，一般所有表单都可以加
<form>action，提交的地址
target，_self,_blank
<textarea>
name
rows
cols
disablelable
<label for="xxx">
<input id="xxx"> 这两行可以实现点击文字焦点到输入框
也可以
<label>
<input>
</label>加框子分类
<fieldset>//分组
<legend>主要信息</legend>//标题
表单
</fieldset>iframe
<!-- 利用iframe嵌入网页 -->
<span>frame展示</span><br>
<iframe src="https://www.bilibili.com" frameborder="0" width="800" height="500"></iframe>
<iframe src="https://asuka.vip" frameborder="0" width="800" height="250"></iframe>
<br>
<!-- 利用iframe嵌入其他资源 -->
<iframe width="800px" height="800px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F13%2F20200413182023_vfget.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1694604622&t=d0fb30622ee84a6834878b5f2b87227e.jpg" frameborder="0"></iframe>
<!-- frame与超链接配合使用 -->
<br>
<a href="https://www.taobao.com" target="zz">点我看淘宝</a>
<form action="https://so.toutiao.com/search" target="zz">
<input type="text" name="keyword">
<input type="submit" value="头条搜索">
</form>
<br>
<iframe name="zz" frameborder="0" width="800" height="800"></iframe>字符实体
常用：
//表示空格
< // <
> // >
& // &
不常用：
¥ // ￥
© // ©
× // ×
÷// 除号HTML の 全局属性
id //在head html meta script style title不能用
class
style
dir //ltr rtl，在<bdo>中调整正反顺序，在div调整放左放右
title //鼠标悬停给提示
lang //指定语言meta原信息
<meta charset="UTF-8"> //配置编码
<meta http-equiv="X-UACompatible" content="IE=edge"> //针对IE浏览器的一个兼容性配置
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //针对移动端配置
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语"> //配置网页关键词
<meta name="description" content="80字以内一段话，与网站内容相关"> //配置网页描述信息
<meta name="robos" content="此处可选值见下">
index 允许搜索爬虫索引此页面
noindex 不允许
follow 允许爬虫跟随此页面上的链接
nofollow 不允许
等等等
<meta name="author" content="ly"> //配置网页作者
<meta name="generator" content="Visual Studio Code"> //配置生成工具
<meta name="copyright" content="2003-2025版权所有"> //配置网页版权信息
<meta http-equiv="refresh" content="10;uri=https://www.baidu.com"> //配置网页自动刷新CSS
style="xx;xxx; "
h1{
color:red;
font-size:80px;
}
本文是原创文章，采用 CC BY-NC-ND 4.0 协议，完整转载请注明来自 空祈
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果