HTML常用标签及其他总结

最新推荐文章于 2025-02-24 09:10:52 发布

原创最新推荐文章于 2025-02-24 09:10:52 发布 · 363 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

☆Web开发同时被 3 个专栏收录

3 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

html5

1 篇文章

订阅专栏

本文介绍了HTML5的基本结构和常用标记，包括文本标题、列表、表格、表单、图片、超链接等，并探讨了块状元素、内联元素及元素类型的转换。

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。