HTML 一些常用方法的总结

栏目: Html · 发布时间: 7年前

内容简介：HTML 一些常用方法的总结

HTML 是一种语言，是用来描述网页的语言，它是一种标记语言，HTML 就是使用标记标签来描述网页。

HTML 算是最容易学习的语言之一，它也是必须掌握的一门语言，之前对 HTML 只是大概了解，并没有开发过前端页面，现在在工作中，会使用前端框架已经成为了一项必备技能，所以花了点时间简单看了一下实验楼-HTML 基础课，稍微再学习一下 HTML 的相关知识，本文记录一下一些常用的 HTML 内容，后期还会对 css 简单总结一下。

HTML 最基本用法

这里先介绍一下 HTML 的最基本用法。

文档

HTML 文档也被称为网页，它包括标签和文本。Web 浏览器的作用就是读取 HTML 文档，并以网页的形式显示出它们，浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

<html>
    <body>
        <h1>First Heading</h1>
         <p>first paragraph</p>
    </body>
</html>

上面是最简单的一个网页，其中：

< html> 与 < /html> 之间的文本描述网页；
< body> 与 < /body> 之间的文本是可见的页面内容；
< h1> 与 < /h1> 之间的文本被显示为标题；
< p> 与 < /p> 之间的文本被显示为段落。

HTML 文本

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。

元素语法

元素语法特点：

HTML 元素以开始标签起始；
HTML 元素以结束标签终止；
元素的内容是开始标签与结束标签之间的内容；
某些 HTML 元素具有空内容（empty content）；
空元素在开始标签中进行关闭（以开始标签的结束而结束）；
大多数 HTML 元素可拥有属性。

空元素

HTML 元素的内容是开始标签与结束标签之间的内容，而某些 HTML 元素具有空内容（empty content），这种元素被叫做 空元素 ，比如说换行符 <br> 。

为了规范起见，换行符最好还是用 <br/> 。

<p> 标签结束以后也后一个换行的动作，那 <p> 标签和 <br/> 标签有什么异同呢？

相同之处是 <br> 和 <p> 都是有换行的属性及作用；
区别 <br/> 是只需一个单独使用，而 <p> 和 </p> 是一对使用；
<br/> 标签是小换行提行（相当于我们平时文本中输入一个回车）， <p> 标签是大换行（分段，相当与两个回车）,隔行作用。

HTML 属性

某些标签要按照开发者的意愿来实现在网页上，就得需要一定信息的补充，这信息就叫属性，HTML 标签可以加上属性的描述，属性提供了有关 HTML 元素的更多的信息。

关于属性有以下语法规则：

是在 HTML 元素的开始标签中定义；
总是以名称和值对应的形式出现，比如： name="value" 。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

举例，下面这个就是 <a> 标签的属性，是对 <a> 标签的补充说明，既指向网页。

<ahref="http://matt33.com">matt</a>

大多数的标签都会有各种各样的属性，没必要记住所有的属性，只需要在实践中多积累，知道哪些属性是常用的，知道如何查资料即可。

HTML 文本格式化

一般我们在网页中能看见有各种各样的字体、文本样式，这就是文本格式化标签的功劳。下面的文本格式化标签是比较常用的：

标签	描述
`<b>`	（bold）粗体
`<big>`	（big）大字体
`<em>`	（emphasized）强调字
`<i>`	（italic）斜体
`<small>`	（small）小字体
`<strong>`	(strong)加重语气

HTML 样式

style 提供了一种改变所有 HTML 元素的样式的通用方法。这里可以将，背景颜色，字体样式，字体尺寸，字体颜色，对齐方式一并定义好。

<html>
<body>
<pstyle="text-align:center;font-family:verdana;color:gray"> verdana and white</p>
<pstyle="font-family:time;color:greeen"> time and green words</p>
</body>
</html>

HTML 超文本

HTML 链接

通过网页中超链接，可以连接到自己感兴趣的地方。

给文字及图片添加超链接

最简单的链接就是将文字添加链接连接到网页和另外的 HTML 文件，给图片添加链接。

<html>
<body>

    <p>let's have an example</p>

    <p>   
        <ahref="http://matt33.com">matt</a>
    </p>

    <p>
        <ahref="matt.html">another html</a>
    </p>

    <p>
         <ahref="http://matt33.com"><imgsrc="touxiang.jpg"/></a>
    </p>

</body>
</html>

超链接的打开方式

打开方式分为在本页打开和在新的浏览器窗口打开，超级链接标签提供了 target 属性进行设置，取值分别为 _self （在本页打开，默认）、 _blank （创建新窗口打开新）。

<html>
<body>

    <p>let's have an example</p>

    <p>   
        <ahref="http://matt33.com"target="_blank">matt</a>
    </p>

</body>
</html>

超链接添加提示文字

有些时候超链接文字不足以说明点击以后所要链接的内容，所以这个时候我们就需要给超链接添加提示文字，加以描述下一个链接的内容，当光标停留在超链接上时，提示语言就会显现，会让页面显现的很简介。

<html>
<body>

    <p>let's have an example</p>

    <p>   
        <ahref="http://matt33.com"title="this word will link to the wed of matt's blog.">matt</a>
    </p>

</body>
</html>

超链接实现书签

在阅读小说时，会发现当在点击相应章节的题目时，可以跳转到相应的章节，想实现这种效果，就必须要了解什么是锚（anchor），实际上就是锚用于在单个网页内不同位置的跳转，锚也叫做书签。

涉及到的标签还是 <a> 标签，超级链接标签的 name 属性用于定义锚的名称；
一个页面可以定义多个锚，通过超级链接的 href 属性可以根据 name 跳转到对应的锚。

<html>
    <head>
        <title>HTML</title>  
    </head>  
    <bodystyle="font-size:20px">

        <pstyle="text-align:center">HTML LEARNING</p>

        <p>
            <ahref="#c1">  HTML first</a>
        </p>
        <p>
            <ahref="#c2">HTML second </a>
        </p>
        <p>
            <ahref="#c3">HTML third </a>
        </p>


        <h1><aname="c1"></a>chapter 1 first HTML</h1>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>

        <h1><aname="c2"></a>chapter 2 second HTML</h1>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>

        <h1><aname="c3"></a>chapter 3 chaowenben 1 HTML</h1>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
    </body>
</html>

HTML 表格

表格在 HTML 中是不可缺少的元素，表格主要包括了 table 、 tr 和 td 这几个标签：

表格由 <table> 标签来定义；
每个表格均有若干行（由 <tr> 标签定义）；
每行被分割为若干单元格（由 <td> 标签定义）;
字母 td 指表格数据（table data），即数据单元格的内容。 <th> 标签用来定义表头;
border="1" 定义的是最外面边框粗细，为1，你也可以设置为0，就是不显示边框；
colspan ：控制此单位所占列数；
rowspan ：控制此单位所占行数；

还有一些其他的属性：

标签： <th>表头</th> ：设置表头；
标签： <caption>标题</caption> ：设置表的标题；
属性： cellpadding="..." 设置单元格边距；
属性： bgcolor="..." 设置表格背景颜色；
属性： background="..." 以某张图片作为表格背景。

<html>
    <title>TABLE</title>
    <bodystyle="font-size:30px">
        <pstyle="text-align:center">table practice</p>
        <tablealign="center"border="15">
            <tr>
                 <tdalign="center"colspan="2">first row and first column</td>
             </tr>
             <tr>
                 <tdrowspan="2">second row and first column </td>
                 <td>second row and second column </td>
                 <td>second row and third column</td>
             </tr>
             <tr>
                 <td>third row and first column </td>
                 <td>third row and second column </td>
             </tr>
        </table>   
    </body>
</html>

HTML 图像

对于 HTML 图像，一般涉及到的就是以下几类：

将图片作为背景；
插入图片
将图片作为链接。

图片作为背景

在 body 属性中添加 background 属性来添加背景图片。

<bodybackground="./qwe.gif">
</body>

插入一张图片

通过 img 标签给网页插入一张图片。

<imgsrc="图片的路径">

在 <img> 标签中加入 align 属性，来对其进行调整，可以进行调整的参数有：

可以上下调整的参数有： bottom 、 middle 、 top ，默认是 bottom ；
可以左右调整的参数有： right 和 left ，默认为 right ；
尺寸的调整： width 和 height 两个属性。

<p> align top<imgsrc="./julizi.png"align="top"width="10%"height="100"></p>

将图片作为链接

将图片做链接，一般情况下，触发链接的方式就是点击图片的任何地方都可以链接到跳转地址，但有时需要实现，点击图片的不同地方跳转到不同的地方，也就是，一张图片可以创建带有可供点击区域的图像地图，其中每个区域就是一个超链接。

涉及到的标签就是 <map> 标签，用来指定图片， <area> 用来指定超链接区域。

在 <area> 标签中我们会涉及到 shape ， coords ， href 属性，分别用来指定超链接区域形状，超链接区域坐标，还有超链接跳转地。

<html>
<head>
    <title>image test</title>
    </head>
    <body background="./qwe.gif">

    <p>tap the li zi </p>
    <img src="./julizi.png" usemap="#lizi"/>

    <map name="lizi">
     <area shape="rect" coords="50,10,100,60" href="img.html" target="_blank"
    </map>  

    </body>
</html>

其中

shape 属性的取值可以是： rect (矩形)、 circle (圆形)、 poly (多边形)和 default (整个图像区域)，这里采用的是矩形。
coords 属性对于矩形而言， coords 有4个值，分别用逗号隔开，表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标，这里获取坐标的方式，就用截图工具帮忙就好。

HTML 列表

有序列表

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

在有序列表中我们还能定义其他的排序方式，上面是默认的数字排序，下面我们再加上字母排序和罗马数字排序

通过添加 type 属性来设置排序方式， a 表示以小写字母来排序， A 就是使用大写字母来排序， i 就是以小写罗马数字来排序， I 就是以大写罗马数字来排序；
还可以添加 start 属性，决定起始的序号。

<html>
    <head>
        <title>test</title>
    </head>
        <bodystyle="font-size:20px;background-color:gray">

        <olstart="2">
            <li>hadoop</li>
            <li>linux</li>
            <li>c </li>
        </ol>

        <oltype="a">
            <li>hadoop</li>
            <li>linux</li>
            <li>c </li>
        </ol>       
    </body>
</html>

无序列表

无序列表始于 <ul> 标签，每个列表项始于 <li> 。

无需列表排序的时候就是给每个列表项加各种小符号其中分为 Disc （默认）实心黑点， Circle 小圈， square 方点，与有序列表的属性都是用的一样的。

<ultype="circle">
    <li>hadoop</li>
    <li>linux</li>
    <li>c</li>
</ul>

定义性列表

定义列表通常用于术语的定义和解释。定义列表由 <dl> 开始，术语由 <dt> 开始，解释说明由 <dd> 开始， <dd>....</dd> 里的文字缩进显示。

<dl>
    <dt>hadoop</dt>
    <dd>it's useful!</dd>
    <dt>linux</dt>
    <dd>ti's nice!</dd>
</dl>

HTML 块

HTML元素被定义为块级元素或内联元素。

块级元素(block)特性：
1. 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；
2. 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制，就像以前用到的 <h1> , <p> , <ul> , <table> 标签。
内联元素(inline)特性：
1. 和相邻的内联元素在同一行；
2. 宽度(width)、高度(height)、内边距的 top / bottom ( padding-top / padding-bottom )和外边距的 top / bottom ( margin-top / margin-bottom )都不可改变，就是里面文字或图片的大小，就像以前用到的 <b> , <td> , <a> , <img> 标签。

在这里我们先介绍两个标签 <div> 标签和 <span> 标签。

<div> 用来定义文档中的分区或节（division/section），没有特定的含义，它是可用于组合其他 HTML 元素的容器；
<span> 用来组合文档中的行内元素，也没有特定的含义.

<divstyle="color:white">
    <h3>This is a header.</h3>
    <p>This is a paragrph.</p>
</div>

HTML 布局

大多的网页布局是需要配合 css 来完成，后面会总结一篇关于 css 基本用法的文章，这里先不涉及太多。

这里通过一个示例，它是使用 <table> 元素和 <div> 元素实现的。

<html>
    <bodybgcolor="gray">

        <tablewidth="1000">
            <tr>
                <tdcolspan="2"style="background-color: royalblue">
                    <h1align="center">matt' blog</h1>
                </td>
            </tr>

            <trvalign="top">
                <tdstyle="background-color: darkorange;width:300px">
                  <dl>
                      <dt>list of blogs</dt>
                      <dd>
                          <ol>
                              <li>hadoop</li>
                              <li>java</li>
                              <li>kafka</li>
                          </ol>
                      </dd>
                  </dl>
                </td>
                <tdstyle="background-color: forestgreen;height:500px;width:700px;">
                    <h1style="font-size: 20px;text-align: center">hello world</h1>
                    this is matt's blog
                </td>
            </tr>
            <tr>
                <tdcolspan="2"style="background-color: powderblue;text-align:center;height: 100px">
                    good good study day day up</td>
            </tr>

        </table>
    </body>
</html>

通过表格来设计一个网页如下图所示。

HTML 一些常用方法的总结

上面的示例使用表格来进行表示的一个网页，如果使用 div 元素应该怎么做，下面使用 div 元素来重新设计一下上面的网页。

<html>
    <head>
        <style>
            div#container{width:1000px}
            div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}
            div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}
            div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}
            div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}
        </style>
    </head>
    <body>
        <divid="container">
            <divid="header">
                <h1>matt's blog</h1>
            </div>
            <divid="sidebar">
               <dl>
                   <dt>list of blogs</dt>
                    <dd>
                        <ol>
                            <li>hadoop</li>
                            <li>java</li>
                            <li>kafka</li>
                        </ol>
                    </dd>
               </dl>
            </div>
            <divid="mainbody">
                <h1>hello word</h1>
                <p>this is matt's blog</p>
            </div>
            <divid="footer">good good study day day up</div>
        </div>
    </body>
</html>

HTML 表单

表单标签是什么呢？这个是在网页是很常见的，表单标签就是用于网页中的数据提交，比如我们注册网页，在留言板中留言、评论等可以填写数据，提交处理地方都需要表单标签， form 表单标签内有输入框 input、单选、多选、 select 下拉列表菜单与跳转菜单、提交按钮等标签内容。

<form>
    user：
    <inputtype="text"name="user">
    <br/>
    password：
    <inputtype="password"name="password">
</form>

<form>
    <inputtype="radio"name="sex"value="male"/> Male
    <br/>
    <inputtype="radio"name="sex"value="female"/> Female
</form>

<form>
    <inputtype="checkbox"name="married"/>
    married
    <br/>
    <inputtype="checkbox"name="have a job"/>
    have a job
    <br/>
    <inputtype="checkbox"name="chinese"/>
    chinese
</form>

其中，name 是明文显示，password 是隐藏的， radio 属性是单选， checkbox 属性是双选，上面展示的效果如下图所示。

HTML 一些常用方法的总结

后面还会单独写一篇文章对 css 进行一下总结，html 和 css 的这两篇文章，会不定时更新，以后用到什么比较常用内容或者遇到什么好的方法，会更新到这两篇文章中。

以上所述就是小编给大家介绍的《HTML 一些常用方法的总结》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

程序员的职业素养

Robert C.Martin / 章显洲、余晟 / 人民邮电出版社 / 2012-9-1 / 49.00元

本书是编程大师Bob 大叔40 余年编程生涯的心得体会, 讲解成为真正专业的程序员需要什么样的态度、原则，需要采取什么样的行动。作者以自己以及身边的同事走过的弯路、犯过的错误为例，意在为后来人引路，助其职业生涯迈上更高台阶。本书适合所有程序员，也可供所有想成为具备职业素养的职场人士参考。一起来看看《程序员的职业素养》这本书的介绍吧!

码农工具

CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码

在线图片转Base64编码工具

HTML 一些常用方法的总结

HTML 最基本用法

文档

标签

介绍

常用标签

HTML 文本

HTML 元素

元素语法

空元素

HTML 属性

HTML 文本格式化

HTML 样式

HTML 超文本

HTML 链接

给文字及图片添加超链接

超链接的打开方式

超链接添加提示文字

超链接实现书签

HTML 表格

HTML 图像

图片作为背景

插入一张图片

将图片作为链接

HTML 列表

有序列表

无序列表

定义性列表

HTML 块

HTML 布局

HTML 表单

程序员的职业素养

CSS 压缩/解压工具

图片转BASE64编码