@web 程序员首页推荐

HTML_常用标签

2016-11-23 本文已影响68人 07120665a058

（一）常用标签

div
span
ul
ol
a
img
form
button
input
table
h1, h2, h3
pre
em, i

（二）用法详解

1、<div>——可定义文档中的分区或节

语法：

<div>
      ...
</div>

NOTE：
如果用 id 或 class 来标记<div>，那么该标签的作用会变得更加有效。
<div> 元素没有特定的含义，属于块级元素

2、<span>——组合文档中的行内元素

语法：

<span> some text </span>

NOTE：
<span> 元素没有特定的含义
<span> 元素是内联元素，可用作文本的容器。

3、<ul>——ul-li是没有前后顺序的信息列表(无序列表)
语法：

<ul> 
     <li>信息</li>
     <li>信息</li>
      ......
</ul>

NOTE：
1、常用属性 type（项目符号的类型）取值：disc(小黑点)、circle(空心圆)、square(实心方块)
2、默认样式为：小黑点
3、ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的
4、ul标签和li标签是一个组合，一般情况下ul标签和li标签都是一起出现, 不会单个出现
5、ul标签中不推荐包含其它标签，但是li标签中还可以继续放其它的标签

4、<ol>—— ol-li是有前后顺序的信息列表(有序列表)
- 语法：

<ol> 
      <li>信息</li>
      <li>信息</li>
      ......
</ol>

NOTE：
1、常用属性type（编号类型）取值：1、a、A、i、
2、默认样式为：从1开始
5、<a>——可实现超链接
使用 <a> 标签的方式：
1、通过使用 href 属性 - 创建指向另一个文档的链接(href：Hypertext Reference的缩写)
2、通过使用 name属性 - 创建文档内的书签(可以使用 id 属性来替代 name 属性，命名锚同样有效）
语法：

<a href="目标网址" title="鼠标滑过显示的文本"> 链接显示的文本 </a>

target属性的值：
- _blank --在新窗口中打开链接
- _parent --在父窗体中打开链接
- _self --在当前窗体打开链接
- _top --在当前窗体打开链接，并替换当前的整个窗体
  默认情况下：在当前浏览器窗口中打开

title属性的作用：
鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

NOTE：
a标签不仅可以让文字可以点击, 还可以让图片也能够被点击

6、<img>——插入图片
- 语法：

  <img src = "myimage.gif" alt = "My Image" title = "My Image" />

NOTE：

* 1、`src`：标识图像的位置
* 2、`alt`：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本
* 3、`title`：提供在图像可见时对图像的描述（鼠标滑过图片时显示的文本）
* 4、图像可以是GIF，PNG，JPEG格式的图像文件
* 5、路径有两种填写方式：绝对路径、相对路径
* 6、相对路径：相对于我们当前 html 文件的位置来写路径
* 7、./表示当前目录，../表示上一级目录
* 8、加载图片是需要时间的，所以建议：慎用图片
* 9、`<img>` 是空标签，意思是说，它只包含属性，并且没有闭合标签

7、<form>——与用户进行交互

语法：

<form method="传送方式" action="服务器文件">

举例：

<form method="post" action="save.php">
      <label for="username">用户名:</label>
         <input type="text" name="username" />
      <label for="pass">密码:</label> 
        <input type="password" name="pass" />
 </form>

NOTE：
- 1、action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
- 2、method ：数据传送的方式（get/post）。
- 3、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签内，否则用户输入的信息提交不到服务器上
- 4、表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据
8、<input>——用于搜集用户信息
语法：

<form>
      <input type="text / password" name="名称" value="文本" /> 
</form>

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等

type属性：
type="text"定义文本输入框
type="password" 定义密码输入框
type="hidden" 定义隐藏输入字段
type="image "定义图像作为提交按钮
type="number "定义带有 spinner 控件的数字字段
type="password" 定义密码字段，字段中的字符会被遮蔽
type="radio "定义单选按钮
type="checkbox" 定义复选框按钮
type="range" 定义带有 slider 控件的数字字段
type="reset" 定义重置按钮。重置按钮会将所有表单字段重置为初始值
type="search" 定义用于搜索的文本字段
type="submit" 定义提交按钮
举例：

<form>
       姓名： <input type="text" name="myName" placeholder="请输入姓名"/> <br/>
       密码： <input type="password" name="pass"/>
 </form>

NOTE:
1、name：为文本框命名，以备后台程序使用。
2、value：为文本输入框设置默认值。(一般起到提示作用)
3、placeholder：提供可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
4、placeholder 属性适用于以下的<input>类型：text, search, url, telephone, email ,password
5、同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用

9、<table>——定义表格

语法：

<table border="1">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
</table>

常用属性
1、border：规定表格边框的宽度
2、cellpadding：单元格中的文本与单元格边框的间距
3、cellspacing：单元格之间的间距
创建表格的四个元素：table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示
3、<tr>…</tr>：表格的行
4、<td>…</td>：表格的列
5、<th>…</th>：表格表头
6、colspan：规定单元格可横跨的列数，rowspan：规定单元格可横跨的行数
NOTE：
1、th标签中的文本默认显示为：粗体且居中
2、表格标签有一个边框属性,，这个属性决定了边框的宽度，默认情况下这个属性的值是 0 ，所以看不到边框可用 css 样式，为表格加入边框

10、<h1>……<h6>——标题标记

语法：

<h1 align = “left | center | right”>标题</h1>

NOTE:
1、属性：align水平对齐方式
2、取值：left、center、right

11、<pre>——预格式化的文本

语法：

<pre>内容</pre>

举例：

<pre>
var message="欢迎";
 for(var i=1;i<=10;i++) {
      alert(message);
 }
</pre>

NOTE：
1、被包围在 pre 元素中的文本通常会保留空格和换行符
2、标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码

参考文章推荐：
HTML需要掌握标签
 HTML中级和进阶
 HTML学习

上一篇下一篇

猜你喜欢

热点阅读