HTML常用标签及其他总结

来源：互联网发布：gre数学知乎编辑：程序博客网时间：2024/05/21 14:32

HTML常用标签及其他总结

HTML5 基本结构
HTML基本语法
HTML常用标记
元素类型

HTML5 基本结构

<!doctype html> //命名文档类型<html> //说明我们写的是标记语言<head> //文件头部<meta charset="utf-8"/> //编码格式<title>html5</title> //文件标题（显示在网页题目上）</head><body>文件主体(所有要写的内容)</body></html>

HTML基本语法

1.常规标记

  <标记  属性=“属性值”   属性=“属性值”></标记>

2.空标记

  <标记 属性=“属性值”  />

说明：

1.标记，标签，元素都是一个东西。

2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。

3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

4.空标签没有结束标签，用“/”代替。

HTML常用标记

1.文本标题 h1-h6

样式<h1>一级标题</h1>样式<h2>二级标题</h2>……

2.文本内容 p 标签

样式<p>文本内容</p>

3.列表

(1)无序列表 (unordered list)

样式：

<ul>     <li></li>     ……</ul>

(2)有序列表 (ordered list)

样式：

<ol>     <li></li>     ……</ol>

属性：: (a)type = “数字/小写字母/大写字母/小写罗马/大写罗马”; 数字顺序的有序列表（默认值）（1, 2, 3, 4）。; a 字母顺序的有序列表，小写（a, b, c, d）。; A 字母顺序的有序列表，大写（A,B,C,D); i 罗马数字，小写（i, ii, iii, iv）。; I 罗马数字，大写（i, ii, iii, iv）。; (b)start = “数字”; 数字表示有序列表的开始点。

(3)自定义列表

样式：

<dl>     <dt>名词</dt>    <dd>解释</dd>     ……</dl>

(4)表格

样式：

<table>    <colgroup>//列分组        <col span="2" style="background-color:red">    </colgroup>    <thead>//表头        <caption>标题内容</caption>    </thead>     <tbody>//表体        <tr>//一行            <th>列标题</th>        </tr>        <tr>//二行            <td>单元格内容</td>            <td>单元格内容</td>        </tr>    </tbody>    <tfoot></tfoot>//表尾</table>//一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。

属性：: 1）width=”表格的宽度”; 2）height=”表格的高度”; 3）border=”表格的边框”; 4）bgcolor=”表格的背景色”; 5）cellspacing=”单元格与单元格之间的间距”; 6）cellpadding=”单元格与内容之间的空隙”; 7）align=”left/center/right” (水平对齐方式); 8）valign=”top/bottom/middle/baseline” (垂直对齐方式); 9）colspan=”所要合并的单元格的列数” (合并列,写在td属性中,合并几个去掉几个td); 10）rowspan=”所要合并单元格的行数” (合并行，写在td属性中,合并几个去掉几个不同tr相同位置的td); 11）rules=”groups/rows/cols/all/none” (添加组分隔线); *rows:位于行之间的线条; *cols:位于列之间的线条; *all：位于行和列之间的线条; *none:没有线条; *groups:位于行组和列组之间的线条

(5)表单

作用：用来收集用户的信息。

样式：

<form name="表单名称" method="post/get"  action="">    <input type="text" value="默认值"/>//文本框    <input type="password" />//密码框    <input type="submit" value="按钮内容" />//提交按钮    <input type="reset" value="按钮内容" />//重置按钮    <input type="button" value="按钮内容"/>//按钮    //单选框/单选按钮    <input type="radio" name="ral"/>    <input type="radio" name="ral" />    //单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。    //复选框    <input type="checkbox" name="like" />    <input type="checkbox" name="like" disabled="disabled" />    //复选按钮里的name属性必须写，同一组复选按钮的name属性值必须一样。    //*(disabled="disabled" :禁用)    //*(checked="checked" :默认选中)    //下拉菜单    <select   name="">         <option>菜单内容</option>         ……    </select>    //多行文本框（文本域）    <textarea name="textareal" cols="字符宽度" rows="行数">        文本内容    </textarea>    //表单字段集    <fieldset>    <legend>标题内容</legend>//字段级标题    //legend元素可以在fieldset对象绘制的方框内插入一个标题。    //legend元素必须是fieldset内的第一个元素。    ……    </fieldset>    //fieldset元素相当于一个方框，在字段集中可以包含文本和其他元素。    //fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。    //fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。    <label for="绑定控件id名"></label>//提示信息标签    //label元素用来定义标签，为页面上的其他元素指定提示信息。    //要将label元素绑定到其他的控件上    //可以将label元素的for属性设置为与该控件的id属性值相同。    <input type="file" />//文件域    <input type="image" src="" width="100" height="100" alt="上传图片" />//图片域</form>

(6)插入图片

样式：

<img   src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />//title:在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了。//HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的。//alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息。//它会直接输出在原本加载图片的地方。

(7)超链接a

样式：

<a   href="目标文件路径及全称/连接地址">链接文本/图片</a><a href="#"></a>//空链接

属性：target:页面打开方式，默认属性值 _ self。( _ self:当前页面打开； _ blank:新页面打开)

(8)div

样式：

<div id="id名"/class="class名"></div>

作用：主要用来布局。

(9)span

样式：

<span></span> //文本结点，用来放一段字

(10)其他组件

样式：

<b>加粗内容</b> //加粗<strong>加粗内容</strong> //加粗<em></em> //倾斜<i></i> //倾斜<br /> //换行<hr /> //水平分割线<del></del> //删除线标签&nbsp; //空格(转义字符)

元素类型

1.元素分类

根据css显示分类，XHTML元素被分为三种类型:

· 块状元素
· 内联元素
· 可变元素

块状元素(block element)

(1)块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等。
(2)默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
(3)块状元素都可以定义自己的宽度和高度。
(4)块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。

内联元素(inline element)(或是行内元素)

(1)常见的内联元素如：a,span,i,em,strong,b,del,等。
(2)内联元素的表现形式是始终以行内逐个进行显示。
(3)内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状。
(4)内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示。

可变元素

需要根据上下文关系确定该元素是块元素或者内联元素。

2.元素类型转化

(1)盒子模型可通过display属性来改变默认的显示类型,display属性包含了18个属性值，包括block/inline/inline-block/none/list-item/table-header-group/table-footer-group….，display属性用于设置或检索对象元素应该生成的盒模型的类型。: 1)Block块状显示：元素会独占一行。当元素设置了float属性后，就相当于给该元素加了display:block;属性。; 2)inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示。; 4)Inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。（只有这一个元素类型支持vertical-align属性）img,input。; 5)none 此元素不会被显示。; 6)list-item:将元素转换成列表。li的默认类型。
(2)补充: 1)大部分块元素display属性值默认为block，其中li默认值为list-item。; 2)大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block。

3.置换元素

一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。
HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

阅读全文

0 0