HTML的常用标签和一些重要知识点
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