title: HTML的常用标签和一些重要知识点
date: 2018-09-13 12:22:38
tags: [HTML]
categories: HTML
HTML标签的一些知识点
a 标签 超链接
跳转页面（HTTP GET 请求）
属性见 MDN：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
- href：指定链接地址
- target：规定“href”属性中指定的网页或文件以何种方式行进跳转或打开，其值包括：_blank、_self、_parent、_top以及iframe的name属性的值
特别的使用方法
-
锚点
<a href="#top">link</a>只有锚点不发送get请求。"#top"即点击回到页面顶部。 -
下载
<a href="https://qq.com" download>下 载</a>1. 加上“download”属性，可下载文件:下载.html。 若不加https:或http: 会变成file协议。 2. 那么如果不加download能下载吗？ 若目标http响应写了Content-type: application/octet-stream 浏览器也会以下载的形式接受请求。 若Content-type: text/html 则不会。 -
伪协议
<a href="javascript:;">link</a> 满足需求:点击但不进行任何操作。 <a href="javascript:alert(1)">link</a> 点击运行此JS。 -
查询请求
<a href="?name=xxx">link</a>自动把?name=xxx加进地址栏，发起get请求。 -
文件路径
<a href="xxx.html" download>QQ</a>相对路径，点击可打开同目录下的xxx.html
form 标签 表单
跳转页面（HTTP POST 请求）
属性见 MDN：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
<form action="users" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
使用注意事项
如果form里没提交按钮就不能提交。
向users路径发送post请求。
若输入xxx和yyy并提交，发送post请求的第四部分数据为username=xxx&password=yyy
若输入的是中文并提交，发送post请求的数据 xxx和yyy 会转义为utf-8字符。
name 必须 要写，不写的话提交的时候不会带上你的数据。
input / button 输入 / 按钮
区别：是否为「空标签」
input 的属性见：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
button 的属性见：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button
使用注意事项
-
如果一个form里只有一个按钮
<button>提交</button> 则浏览器会默认为type = "submit"，是一个普通的按钮 <button type= "button" >提交</button> 不会提交，是一个普通的按钮 <input type= "submit" value="提交"> 是一个提交按钮 <input value="提交"> 不会提交，是一个普通的按钮 -
实现点击文字勾上复选框
<input type=”checkbox” id=”XXX”><label for=”XXX”>你好</label>点击"你好"，复选框也一起勾选了<label>用户名<input type=”text” name=”username”></label> <label>密码<input type=”password” name=”password”></label> <label><input type=”checkbox” name=”agree”>同意</label>用label把input包住，也能实现点击文字勾上复选框。 -
name一定要写的一样，才能复选 / 单选，并在发送请求时提交到服务器。
<label><input type=”checkBox” name=”fruit” value="yes">香蕉</label>
<label><input type=”checkBox” name=”fruit” value="no">橘子</label>
<label><input type=”radio” name=”YorN” value="yes">Yes</label>
<label><input type=”radio” name=”YorN” value="no">No</label>
table 标签 表格
用于展示数据
属性见：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
相关概念
thead：表头（表格标题及头部信息不等）
tbody：表中（表格显示的内容部分）
tfoot：表尾（表格说明与备注部分）
tr：行
th：单元格，作为行或列的标题呈现
td：单元格，作为内容单元格呈现
caption：表格主标题，位于表格之外
表格常用属性
width/height：设置宽度/高度
border：设置边框
align：设置表格对齐方式（left/center/right）
cellspacing：设置单元格与单元格之间的间距
cellpadding：设置单元格与内容之间的间距
bgcolor：设置表格背景颜色
background：设置背景图片
colspan：跨列 ‘<td colspan="2"></td>’
rowspan：跨行 ‘<td rowspan="2"></td>’
HTML其他常见标签
文本标签
- 标题：h1~h6
- 文本：span
- 段落：p
- 强调：em
- 粗体：b
- 斜体：i
- 删除线：s
- 上标：sup
- 下标：sub
语义化标签
- 头部：header
- 尾部：footer
- 导航：nav
- 文章：article
- 章节：section
- 侧栏：aside
- 地址：address
- 时间：time
- 标记：mark
- 布局：div
- 引用：blockquote
- 文档主要内容：main （块级标签）
- 详细信息：details，一般与 summary 标签一起使用，summary 作为details的第一个子标签使用
格式化标签
- 换行：br
- 水平分割线：hr
img 标签 图片
- src：指定图片链接地址（必须）
- width/height：设置宽度/高度
- title：设置图片标题，鼠标悬浮在图片上时显示
- alt：设置提示，当图片加载失败时会显示
HTML 元素类别
- 块级元素（block）
- 行内元素（inline）
- 行内块元素（inline-block）。
display：block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素的宽度。block元素可以设置width、height属性。块级元素及时设置了宽度，仍然会独占一行。block元素可以设置margin、padding属性。
display：inline
inline元素不会独占一行，多个相邻的行内元素会排在同一行里，直到一行排列不下，才会新换行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padidng-top、padding-bottom、margin-top以及margin-bottom不会产生边距效果。
display：inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其具有block的宽度高度特性又具有inline的同行特性。
补充和总结
- a标签的一些特别用法，见上文。
- input和button的一些使用注意，见上文。
- 表单提交时，发送请求会带有表单中的数据，name属性必须写，具体见上文form部分。
- Contenteditable属性可使元素内容可编辑。
- colgroup标签可调整表格各栏的宽度，很方便。
参考博客
https://blog.csdn.net/hierarch_lee/article/details/54236380
网友评论