HTML常见标签详解

Bertha 。 2022-04-24 00:04 220阅读 0赞

### style ###

定义css内部样式表。标签内直接写样式即可。

### iframe ###

1.  说明：将另一个HTML页面嵌入到当前页面中。
2.  常见属性
    
     *  height:以CSS像素格式HTML5，或像素格式HTML 4.01，或百分比格式指定frame的高度。
     *  width:以CSS像素格式HTML5，或像素格式HTML 4.01，或百分比格式指定frame的宽度。
     *  name:嵌入的浏览上下文（框架）的名称。该名称可以用作标签，`<form>`标签的target属性值，或`<input>` 标签和 `<button>`标签的formtaget属性值。
     *  src:嵌套页面的URL地址。使用遵守同源策略的 ‘about:blank’ 来嵌套空白页。
3.  示例

### a ###

1.  说明：可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。a标签是发起get请求的。
2.  常见属性
    
    1.  target:
        
        1.  \_blank:在新页面打开，新浏览器标签;
        2.  \_self:如果有iframe的话，在当前iframe页面打开。如果没有，在当前页面加载;
        3.  \_parent:如果有iframe父页面的话，直接父页面打开。如果没有iframe，其打开方式同\_self;
        4.  \_top:如果有iframe的话，在祖先页面打开，与\_parent的区别在于多层嵌套时，\_parent是在直接父元素打开，\_top是在祖先元素中打开；如果没有iframe，此选项的行为方式相同\_self；
        5.  iframe的名称:直接在iframe打开连接的页面。
    2.  download:此属性仅适用于同源 URL。有此属性，点击a标签就会下载当前页面源文件，文件名为该属性值。  
        注意：是否下载有以下两方面决定：
        
         *  http响应决定：content-type:application/octet-stream，浏览器就会下载形式接收请求
         *  a标签写上download
    3.  href：包含超链接指向的 URL 或 URL 片段。
        
            <a href="qq.com"></a> 不会打开qq.com，因为qq.com是一个相对路径，
            	可以写成:
            	1.http://qq.com 跳转到qq页面
            	2.//qq.com，跳转路径为：当前路径协议://qq.com，没有协议，就会使用当前路径的协议
            	3.写相对路径：xxx.html或者./xxx.html,跳转的路径为：当前路径/xxx.html，只以目录为参考，跟html路径没有关系
            	4.#xxx 锚点，直接加载路径后面
            	5.?name=ffy,请求当前页面，url参数加上name=ffy
            	6.js伪协议：javascript:alert(2)，也是历史遗留问题，
            	    javascript:void;用于点击a标签又不想让它跳转
            	7.#，锚链接，点击滚动条上滚，会跳转到页面最上方

### form ###

表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。

1.  一般用来发起post请求
2.  form表单没有提交button的话，无法提交form，除非用js
3.  form提交表单，其content-type为：application/x-www-form-urlencoded,form-data形如username=ffy&password=222；表单的name会被放到请求的第四部分(请求的第四部分参考 [https://blog.csdn.net/fengfangyuan/article/details/89044920][https_blog.csdn.net_fengfangyuan_article_details_89044920])，作为参数的key。
4.  x-www-form-urlencoded规定，中文参数都会被转成utf-8编码
5.  form 请求方式只有get和post
6.  get默认参数出现在url查询参数中（查询参数）,post默认参数出现在请求第四部分。可以在post的action地址加上&name=ffy，这样post就有查询参数；但是不能让get有第四部分。
7.  也有target,规则与a标签一样  
    属性：
    
     *  action：一个处理这个form信息的程序所在的URL，就是请求路径。
     *  autocomplete：用于指示 input 元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的 autocomplete 属性重载（覆盖）。 可能的值有:  
        off: 在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。  
        on: 浏览器能够根据用户之前在form里输入的值自动补全。  
        method：请求的方式，有get和post
        
         *  post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
         *  get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做（数据暴露在URI里面）没什么副作用，或者表单仅包含ASCII字符时，再使用这种方法吧。

### input / button ###

按钮。

1.  input type=button和input type=submit
    
     *  如果一个form只有一个button没有写type，这个button会自动升级为input type submit
     *  如果一个form只有一个button有写type，这个button不会自动升级为input type submit，type是什么就是什么
     *  如果一个form只有一个input，其type为button，这个input不会自动升级为input type submit，type是什么就是什么
     *  label的for和input type=text的id关联；label的for和input type = checkbox的id关联。但是一般都是用label把input包起来
2.  具体属性参考mdn

### table ###

1.  thead 放表头，不管标签写在哪里，其展示都会放在最前面，浏览器会自动纠正顺序
2.  tbody 放主体
3.  tfoot 放表尾，不管标签写在哪里，其展示都会放在最后，浏览器会自动纠正顺序
4.  th 表头，放表头信息，th不是只能放thead里面，也可以放在tbody里面
5.  td :table data，放数据
6.  tr ：table row,行
7.  colgroup 每列信息,col的父元素
8.  col 每列信息,col-group的子元素,用法如下：
    
        <colgroup>
        	    <col width = 100> 第一列宽度100
        	    <col width = 200> 第二列宽度200
        	</colgroup>
9.  属性  
    \- border-collapse:collapse，把所有边框(table边框、tr边框、td边框)合并成一条。  
    \- align:  
    left，表格将在文档左侧显示；  
    center， 表格将在文档中央显示；  
    right， 表格将在文档右侧显示；  
    \- bgcolor:这个属性定义了表格的背景颜色,如\#ffffff  
    \- border:这个整型元素使用像素，定义了表格边框的大小。 如果设置为0，这意味着frame 属性被设置为空。如果设置为1，表示表格具有1px大小的边框。

### h ###

标题，h1~h6，h1表示大标题，一般一个页面只有一个。h1默认字体最大，h6最小。

### p ###

段落

### br ###

换行，标签不成对,推荐写成`<br>`

### div ###

全称“division(分区)”，用来划分一个区域。div标签内部可以放入所有其他标签，例如p标签、strong标签等。一般用于布局。没有默认样式。

### span ###

与div类似，span一般用于行内的布局，也没有默认样式。

### ol ###

ordered list，有序列表，默认项目符号数字。用type可以修改项目符号类型，如type = “A”,列表会按ABCD排列

### ul ###

ordered list，无序列表，type也可以修改，如type = “disc”，项目符号就是实心圆。

### dl ###

定义列表，即definition list。引入两个概念，dt和dd。  
dt即definition term(定义名词)，用于添加要解释的名词，即标题。  
dd即definition description(定义描述)，用于添加该名词的具体解释，即说明。

<dl>
      <dt>title</dt>
      <dd>des</dd>
    </dl>

### strong ###

强调，语气强烈，字体加粗。与b的区别是，b只是单纯把字体加粗，语气并不强烈，strong语气很强烈，感情色彩重。

### link ###

引入外部css。

### script ###

1.  引入外部js文件
    
        <script src="demo.js"></script>  引入demo.js
2.  直接在标签内写js代码
    
        <script src="demo.js">
        	var a = 1;
        </script>

后续继续完善，记录新发现。。。

[https_blog.csdn.net_fengfangyuan_article_details_89044920]: https://blog.csdn.net/fengfangyuan/article/details/89044920