HTML的常用标签和一些重要知识点

2019-01-02  本文已影响0人  祈念念念

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

特别的使用方法

  1. 锚点

        <a href="#top">link</a>
    
     只有锚点不发送get请求。"#top"即点击回到页面顶部。
    
  2. 下载

        <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 则不会。
    
  3. 伪协议

    <a href="javascript:;">link</a>  满足需求:点击但不进行任何操作。
    <a href="javascript:alert(1)">link</a>   点击运行此JS。
    
  4. 查询请求

    <a href="?name=xxx">link</a> 
    
     自动把?name=xxx加进地址栏,发起get请求。
    
  5. 文件路径

    <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

使用注意事项

  1. 如果一个form里只有一个按钮

    <button>提交</button> 则浏览器会默认为type = "submit",是一个普通的按钮
    <button type= "button" >提交</button> 不会提交,是一个普通的按钮
    <input type= "submit" value="提交"> 是一个提交按钮
    <input value="提交"> 不会提交,是一个普通的按钮
    
  2. 实现点击文字勾上复选框

    <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包住,也能实现点击文字勾上复选框。
    
  3. 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其他常见标签

文本标签

语义化标签

格式化标签

img 标签 图片


HTML 元素类别

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的同行特性。


补充和总结

  1. a标签的一些特别用法,见上文。
  2. input和button的一些使用注意,见上文。
  3. 表单提交时,发送请求会带有表单中的数据,name属性必须写,具体见上文form部分。
  4. Contenteditable属性可使元素内容可编辑。
  5. colgroup标签可调整表格各栏的宽度,很方便。

参考博客
https://blog.csdn.net/hierarch_lee/article/details/54236380

上一篇下一篇

猜你喜欢

热点阅读