HTML常用标签简介

MDN中所列出的html标签列表

1. 一些简单的常见标签

  • <h1>- <h6> 标题元素
  • <p> 段落元素
  • <ul> 无序列表
  • <ol> 有序列表
  • <small> 不重要的文字
  • <strongv 重要的文字
  • <kbd> 键盘输入元素
  • <video> 视频元素 audio> 音频元素
  • <svg> 可缩放矢量图形
  • <div> 区块元素
  • <span> 短语内容

2. <a>标签 &&<ifram>标签

  • <a> 锚点,在http中进行get请求,有以下常用属性
    (1)href 属性:必需属性,为锚定义一个超文本链接来源
    ==> href="qq.com" 会当成文件打开(因未设定打开协议)
    ==> href="//qq.com" 无协议绝对地址,当前时什么协议就以什么协议打开
    ==> href="index.html" 相对路径,以ftp协议
    ==> href="#XX" 定义当前页面的锚点
    ==> href="?xx=yy" 查询参数
    ==> href="javascript:alert('1')" JavaScript伪协议
    ==> href="javascript:;" 为达到点击链接不做跳转的效果
    (2)target 属性:该属性指定在何处显示链接的资源,可以与<iframe>标签连用,指向iframe的name
    ==> target=_blank 在新的页面打开
    ==> target=_self 在自身打开
    ==> target=_top 若在iframe中,在其最外层打开
    ==> target=_parent 若在iframe中,在其上一层iframe打开
    (3)download 属性:当网页的响应Content-Type设置为“application/octet-stream”时,可以不用download
    当Content-Type设置为“text/html”时,若想下载如<a href="index.html" download>link</a>必须用download
  • <iframe> 内联框架元素,有以下常用属性
    ==> src 属性 iframe指向的路径
    ==> name 属性 与<a>标签配合使用,用于<a>标签的指向链接
    ==> frameborder 属性 iframe标签外边框,一般设置为0

3. 表单标签

注:表单元素若要正常提交至服务器,需有name属性

  • <form> 在http中一般进行post请求
    ==> action 属性 用于制定表单提交的目标
    ==> method 属性 用于表示表单以何种方式发至目标
    ==> target 属性 同<a>标签的target
  • <input type="submit">&&<input type="button">&&<button>
    PS:一个表单中,必须得有提交按钮,否则表单数据无法提交
    ==> <input type="submit"> 提交按钮,输入完数据 Enter 即可上传表单数据
    ==> <button> 一个表单中若没有提交按钮,仅有button标签,该标签会自动升级为submit
    ==> <input type="button"> 这么写就仅仅是一个普通的按钮,即使表单没有提交按钮也不会自动升级
  • <input typt="checkbox>"&&<label>
    ==> <input type="checkbox"> 复选框
    ==> 达到点击文字就可以选中复选框时可以和<label>连用,如:
          <input type="checkbox" id="btn"> <label for="btn">apple</label>
          不过常用下面这种写法:
          <label>apple<input type="checkbox"></label>
  • <input type="radio"> 单选框,也可以同复选框一样与<label>标签连用
          若达到几个单选框只能选择一个的效果,要设置一样的name属性
  • <select> 下拉表单,常用的有name属性,multiple(可多选)属性
  • <option> 下拉表单中的选项,有以下常用属性
    ==> <optgroup> 为多个option标签划分一个组,用label属性设置组名,如:
 <optgroup label="x1">
      <option value="1">10</option>
      <option value="2">12</option>
 </optgroup>

==> <option>标签的常用属性有value,设置选项上传至服务器的值:
      disabled 属性,设置选型不可选;
      selected属性,设置该选项默认选中;

  • <textarea> 多行文本域
    ==> 虽然该标签有cols属性和rows属性分别控制列数和行数,但都不是很准确,所以一般<texrtarea>标签的大小用css的height和width来控制
    ==> 在css中,还可以设置其resize=none;用来控制该多行文本域不可被用户拉动,防止影响网页布局

4. <table>表格元素

  • 表格标签中只能有``、``、``三种标签。
  • 如果没有<thead><tfoot>标签,所有的内容默认添加在<tbody>标签中,如果没有<tbody>标签,浏览器会自动添加。
  • 在设置了<thead><tbody><tfoot>三种标签后,三种标签在代码中的顺序将不会影响网页渲染的效果,永远以<thead><tbody><tfoot>顺序进行展示。
  • <td> 表示表的数据、<th>表示表头(默认样式包括加粗和居中),<tr>表示每一行
  • 所有的<td> <th>标签都要在<tr>标签里面
  • <colgroup>(有闭合标签)、<col>(空标签)
    代码实例参上,以观标签效果
<table border=1>
    <colgroup>
      <col width=100> <!-- 控制第一列的宽度-->
      <col width=100 bgcolor="blue"><!-- 控制第二列的宽度和背景颜色-->
      <col width=100>
      <col width=100>
    </colgroup>
    <thead>
      <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
        <th>h4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
    </tbody>
    <tfoot>
      <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
      </tr>
    </tfoot>
  </table>
  • css中,设置标签的边框合并
table{
     border-collapse:collapse;
   }

5. 常用的内容分区语义化标签

  • <article> 表示文档、页面、应用或网站中的独立结构
  • <aside> 其通常表现为侧边栏或者嵌入内容
  • <footer> 表示最近一个章节内容或者根节点元素的页脚
  • <header> 表示一组引导性的帮助,可能包含标题元素
  • <nav>导航栏,描绘一个含有多个超链接的区域
  • <section> 表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题
  • <dl><dt><dd>
    ==> <dl> 是一个包含术语定义以及描述的列表
    ==> <dt> 用于在一个定义列表中声明一个术语
    ==> <dd> 用来指明一个描述列表<dl>元素中一个术语的描述
  • <main> 表示文档的主体内容,由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
  • <address> 可以让作者为它最近的<article>或者<body>]祖先元素提供联系信息。在后一种情况下,它应用于整个文档。
posted on 2018-05-11 18:53  EnochQin  阅读(124)  评论(0编辑  收藏  举报