2018-05-10 HTML常用标签简介

2018-05-10 本文已影响3人 EnochQin

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"> 提交按钮，输入完数据 <kbd>Enter</kbd> 即可上传表单数据
==> <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>表格元素

<table>表格标签中只能有<thead>、<tbody>、<tfoot>三种标签。
如果没有<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>]祖先元素提供联系信息。在后一种情况下，它应用于整个文档。

2018-05-10 HTML常用标签简介

HTML常用标签简介

1. 一些简单的常见标签

2. <a>&&<ifram>

3. 表单标签

4. <table>表格元素

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

猜你喜欢

热点阅读