通俗重制系列--HTML常用标签
系列介绍
本文章是我毕业工作，入职闲暇之余重新整理我学过的HTML标签基础知识，丰富以前写过的博客，再借鉴码崽 的博客，我加上代码示例，对于我这种刚刚入职的同学刚刚好，方便理解可以直接上手修改。
基本
<html>…</html> 定义 HTML 文档 <head>…</head> 文档的信息 <meta> HTML 文档的元信息 <title>…</title> 文档的标题 <link> 文档与外部资源的关系 <style>…</style> 文档的样式信息 <body>…</body> 可见的页面内容 <!--…--> 注释
文本
<h1>...</h1> 标题字大小（h1~h6） <b>...</b> 粗体字 <strong>...</strong> 粗体字(强调) <i>...</i> 斜体字 <em>...</em> 斜体字(强调) <center>…</center> 居中文本 <ul>…</ul> 无序列表 <ol>…</ol> 有序列表 <li>…</li> 列表项目 <a href=”…”>…</a> 超链接 <font> 定义文本字体尺寸、颜色、大小 <sub> 下标 <sup> 上标 <br> 换行 <p> 段落
a标签属性
- href --链接到某个网页
- target --在哪个窗口打开超链接
- download --下载网页（理论上有用，实际咩用）
- real=noopener -- 跳转到XXX标签
a的href取值
网址
- google.com
- //google.com
路径
- /a/b/c以及a/b/c
- index.html以及 ./index.html
伪协议
- javascript:代码;
- mailto:邮箱
- tel:手机号
ID
- href=#xxx
<a href="//google.com">google</a> <a href="/a/b/c.html">C.html</a> <a href="/index.html">index.html</a> <a href="javascript:alert(1)">JavaScript伪协议</a> <a href="javascript:;">查看</a> <a href="mailto:t2785970361@163.com">发邮件给我</a> <a href="tel:13012365684">打电话给我</a> <a href="#xxx">查看xxx</a>
表格table
表格格式
- table
- thead --头
- tbody --中
- tfoot --底
- th --表头
- tr --行
- td --数据
<table> //定义一个表格 <tr> //行标签 <th>列标题</th> //文字自动加粗并居中 </tr> <tr> //定义行 <td>单元格标签（列）</td> //定义列 </tr> </table>
table标签属性：
(1) border:设置表格边框的宽度
(2) cellpadding: 单元内容和边框线之间的空白距离
(3) cellspacing：单元格之间的距离
(4) frame：外侧边框的哪个部分是可见的
(5) rules：内侧边框的哪个部分是可见的
(6) summary：表格的摘要
(7) width：表格宽度
(8) height：表格高度
(9) bordercolor：设置表格边框颜色
相关样式
1.table-layount： [auto：个性] [fixed：平均] 2.border-collapse： 控制是否合并 3.border-spacing： 控制border间距
常用设置
table-layout: auto; border-spacing: 0; border-collapse: collapse;
行标签属性：
(1)align：水平对齐方式
(2)bgcolor：行的背景色
语义标签（读代码时便于区分代码的头部和主体，对表格的显示不起作用）
<thead></thead> //表示表格的头部 <tbody></tbody> //表示表格的主体 <tfoot></tfoot> //表示页脚
合并单元格：
(1)单元格跨列：colspan=“列数”
(2)单元格跨行：rowspan=“行数”
<table border="1" width="400" height="400"> <caption><h3>优秀学生信息表格</h3></caption> <!-- 头部 --> <thead> <tr> <th>年级</th> <th>姓名</th> <th>学号</th> <th>班级</th> </tr> </thead> <!-- 主体 --> <tbody> <tr> <td rowspan="2">高三</td> <td>张三</td> <td>100</td> <td>三年七班</td> </tr> <tr> <td>赵四</td> <td>120</td> <td>三年七班</td> </tr> </tbody> <!-- 底部 --> <tfoot> <tr> <td>评语</td> <td colspan="3">都很优秀</td> </tr> </tfoot> </table>
table{ table-layout: auto; border-spacing: 0; border-collapse: collapse; }
img标签
作用：发出get请求，展示一张图片
属性
- alt 图片加载失败，显示文字提示用户
- height 高
- width 宽
- src 图片地址
事件
- onload 加载成功
- onerror 加载失败
检测图片加载是否成功，从而进行挽救
代码示例
<img id="xxx" src="1.jpg" alt="美照"> <script> xxx.onload = function() { console.log('图片加载成功') } xxx.onerror = function() { console.log('图片加载失败') xxx.src = "404.jpg" } </script>
响应式
max-width：100% 使图片变成响应式，根据设备大小自行更改，不会固定大小
form标签 表单
作用：发get或post请求，然后刷新页面
属性
<form action="URL" method="get/post" name="表单名"> 内容 </form> // action：提交表单时向何处发送表单数据 // method:发送form-data的HTTP方法
- action 控制请求哪个页面
- autocomplete 是否自动填充
- method 控制是get还是post
- target 要提交到XX页面，XX页面需要刷新
target="_self"当前页面target="_blank"空白页面target="_top"顶层页面target="_parent"父类页面
type属性常用取值
<input type="text">普通文本<input type="password">密码<input type="button">按钮<input type="color">选择颜色- 单选框，name需一样
<input name="xxx" type="radio">男 <input name="xxx" type="radio">女
- 多选框，name一样为一组
<input name="yyy" type="checkbox">唱 <input name="yyy" type="checkbox">跳 <input name="yyy" type="checkbox">rap <input name="yyy" type="checkbox">篮球
<input type="file">文件
<input type="file" multiple>文件多选<input type="hidden">隐藏，看不见的
事件
- onsubmit
要触发，表单必须有input或者button的type="submit"
onchange用户改变了内容onfocus鼠标聚焦onblur鼠标失去聚焦required必填，否则无法提交
多行文本
<textarea></textarea> 多行文本输入框
<textarea style="resize: none"></textarea> 不允许更改大小
例子
姓名：<input type="text" placeholder="请输入您的姓名"> 密码：<input type="password" placeholder="请输入您的密码"> 年龄：<input type="number" max="120" min="1"> //规定年龄范围 生日：<input type="data"> 颜色：<input type="color"> 照片：<input type="file"> 所在城市： <select> <option>请选择</option> <option>上海</option> <option>北京</option> <option>广州</option> <option>深圳</option> </select> 性别：<input type="radio" name="sex" checked>男 //性别默认男 <input type="radio" name="sex">女 喜欢的类型：<input type="checkbox">可爱 <input type="checkbox" checked>性感 <input type="checkbox" checked>御姐 <input type="checkbox">萝莉 个人介绍: <textarea name="" id="" cols="60" rows="10"></textarea> <input type="submit" value="免费注册"> <input type="reset">
textarea{ bottom:0px; }
注意
不要双击打开HTML，要用http server -c-1(hs -c-1)卓和parcel XXX。
input 标签
作用：用户输入内容
属性
常见标签 ：checkbox , file , password , radio , reset , submit , button
1、input标签默认type属性为文本标签text；
2、checkbox、radio 第一个为多选按钮，第二个为单选按钮；
3、password用于密码输入框；
4、file标签文件上传，默认为单文件上传，设置multiple后则可批量文件上传；
file标签代码语法 ： <input type="file" multiple>
file标签展示效果 ：
<form > <input type="file" multiple> </form>
注意事项
- 一般不监听input的click事件
- form里面的input要有name
- form表单必须要有一个
type="submit"
如果不写，默认为submit
如果type="button"就不能提交表单 - input和button提交区别
<input type="submit" value="提交"> <button type="submit">提交</button>
