HTML标记语言

1、HTML标记语言

HTML的全称是 Hyper Text Markup Language,即超文本标记语言。HTML是一种在互联网上常见的网页制作标记性语言,HTML用于描述超文本中内容的显示方式。使用 HTML 可以实现在网页中定义一个标题、文本或者表格等。严格的说,HTML 并不能算作是一种程序设计语言,因为它缺少了程序设计语言所应有的特征。HTML是通过浏览器的翻译,将网页中的内容呈现给用户的。

1.1 创建第一个HTML文件

编写HTML文件可以通过两种方式:一种是手工编写HTML代码,另一种是借助一些开发软件。在 Windows 操作系统中,最简单的文本编辑软件就是记事本。

示例:使用记事本创建一个HTML文件。

(1)创建一个记事本文件。

(2)打开记事本文件,输入以下HTML代码:

<html>
<head>
    <title>创建第一个HTML文件</title>
</head>
<body>
    <b>您好!欢迎访问 pan_junbiao的博客</b><br>
    <b>博客地址:https://blog.csdn.net/pan_junbiao</b><br>
    <b>这是使用记事本编写的HTML文件</b>
</body>
</html>

(3)修改记事本文件名称,将文件的后缀名修改为 .html,如:01.html。

(4)运行文件,执行结果如下:

1.2 HTML文档结构

HTML 文档由4个主要标记组成,这4个标记是<html>、<head>、<title>和<body>。它们构成了HTML页面最基本的元素。

标记说明
<html>标记<html>标记是 HTML 文件的开头。所有HTML文件都是以<html>标记开头,以</html>标记结束。HTML 页面的所有标记都要放置在<html>与</html>标记中,<html>标记并没有实质性的功能,但却是HTML文件不可缺少的内容。
<head>标记<head>标记是 HTML 文件的头标记,作用是放置HTML文件的信息。如定义 CSS 样式代码可放置在<head>与</head>标记中。
<title>标记<title>标记文标题标记。可将网页的标题定义在<title>与</title>标记中。
<body>标记<body>标记是 HTML 页面的主体标记。页面中的所有内容都定义在<body>标记中。<body>标记也是成对使用的,以<body>标记开头,以</body>标记结束。<body>标记本身也具有控制页面的一些特性,例如控制页面的背景图片和颜色等。

说明:HTML标记是不区分大小写的。

1.3 <meta>标记

<meta>标记可提供有关网页的信息(meta-information),<meta>标记出现在网页的标题部分。<meta>标记提供的信息包括作者姓名、公司名称和联系信息等。许多搜索引擎都要使用此信息。META标签使用属性/值的组合。

1.3.1 设置网站的作者(author)

示例:在页面中将“pan_junbiao的博客”指定为作者。

<meta name="author" content="pan_junbiao的博客">

1.3.2 设置网站的关键字(keywords)

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。

示例:设置网站的关键字。

<meta name="keywords" content="Java,C#,Oracle,MySQL">

1.3.3 网页过期(expires)

示例:设置网页过期。

<meta http-equiv="expires"  content="Wed, 26 Feb 2019 08:21:57 GMT">

1.3.4 自动刷新(refresh)

示例:设置网页自动刷新。

<meta http-equiv="refresh" content="30">代表每隔30秒自动刷新本页面
<meta http-equiv="refresh" content="5; url=https://blog.csdn.net/pan_junbiao">代表过5秒自动跳转到新的url网址

1.3.5 解决页面中文乱码

<meta charset="UTF-8">

 

2、HTML常用标记

HTML中提供了很多标记,可以用来设计页面中的文字、图片,定义超链接等。这些标记的使用可以使页面更加的生动,下面为大家介绍HTML中的常用标记。

2.1 换行标记

在HTML语言中,换行标记为<br>。与前面介绍的HTML标记不同,换行标记是一个单独标记,不是成对出现的。

示例:创建HTML页面,在页面中使用换行标记。

<html>
<head>
    <title>应用换行标记实现页面文字换行</title>
</head>
<body>
    <b>您好!欢迎访问 pan_junbiao的博客</b><br>
    <b>博客地址:https://blog.csdn.net/pan_junbiao</b><br>
    所有的努力都不会完全白费,你付出多少时间和精力,都是在对未来的积累。<br>
    世界上什么都不公平,唯独时间最公平,你是懒惰还是努力,时间都会给出结果。
</body>
</html>

执行结果:

2.2 段落标记

HTML中的段落标记也是一个很重要的标记,段落标记以<p>标记开头,以</p>标记结束。段落标记在段前和段后各添加一个空行,而定义在段落标记中的内容,不受该标记的影响。

2.3 标题标记

要在HTML页面中创建不同级别的标题,可以使用HTML语言中的标题标记。在HTML标记中,设定了6个标题标记,分别为<h1>至<h6>,其中<h1>代表1级标题,<h2>代表2级标题,<h6>代表6级标题等。数字越小,表示级别越高,文字的字体也就越大。

示例:在HTML页面中使用标题标记。

<html>
<head>
    <title>标题标记</title>
</head>
<body>
    <h1>您好,欢迎访问 pan_junbiao的博客</h1>
    <h2>您好,欢迎访问 pan_junbiao的博客</h2>
    <h3>您好,欢迎访问 pan_junbiao的博客</h3>
    <h4>您好,欢迎访问 pan_junbiao的博客</h4>
    <h5>您好,欢迎访问 pan_junbiao的博客</h5>
    <h6>您好,欢迎访问 pan_junbiao的博客</h6>
</body>
</html>

执行结果:

2.4 文本格式化标记

标签示例
<B>标签<B>该文本将以粗体显示</B>
<I>标签<I>该文本将以斜体显示</I>
<U>标签<U>该文本将显示为带有下划线</U>
<SUB>标签<SUB>该文本的显示高度将低于前后的文本</SUB>
<SUP>标签<SUP>该文本的显示高度将高于周围的文本</SUP>

示例:在HTML页面中使用文本格式化标记。

<html>
<head>
    <title>文本格式化标记</title>
</head>
<body>
<B>您好,欢迎访问 pan_junbiao的博客!</B><br>
<I>您好,欢迎访问 pan_junbiao的博客!</I><br>
<U>您好,欢迎访问 pan_junbiao的博客!</U><br>
<SUB>您好,欢迎访问 pan_junbiao的博客!</SUB>博客地址:https://blog.csdn.net/pan_junbiao<br>
<SUP>您好,欢迎访问 pan_junbiao的博客!</SUP>博客地址:https://blog.csdn.net/pan_junbiao<br>
</body>
</html>

执行结果:

2.5 居中标记

HTML页面中的内容有一定的布局方式,默认的布局方式是从左到右依次排序。如果要想让页面中的内容在页面的居中位置显示,可以使用HTML中的<center>标记。<center>居中标记以<center>标记开头,以</center>标记结尾。标记之中的内容为居中显示。HTML5 不支持 <center> 标签。请用 CSS 代替。

2.6 文字列表标记

HTML语言中提供了文字列表标记,文字列表标记可以将文字以列表的形式依次排列。通过这种形式可以更加的方便网页的访问者。HTML中的列表标记主要有无序的列表和有序的列表两种。

2.6.1 无序列表

无序列表是在每个列表项的前面添加一个圆点符号。通过符号<ul>可以创建一组无序列表,其中每个列表项以<li>表示。

示例:使用无序列表对页面中的文字进行排序。

<html>
<head>
    <title>无序列表标记</title>
</head>
<body>
编程词典有以下几个品种
<p>
<ul>
    <li>Java编程词典</li>
    <li>VB编程词典</li>
    <li>VC编程词典</li>
    <li>.net编程词典</li>
    <li>C#编程词典</li>
</ul>
</body>
</html>

执行结果:

2.6.2 有序列表

有序列表和无序列表的区别是,使用有序列表标记可以将列表项进行排号。有序列表的标记为<ol>,每一个列表项前使用<li>。有序列表中项目项是有一定的顺序的。

示例:使用有序列表对页面中的文字进行排序。

<html>
<head>
    <title>有序列表标记</title>
</head>
<body>
编程词典有以下几个品种
<p>
<ol>
    <li>Java编程词典</li>
    <li>VB编程词典</li>
    <li>VC编程词典</li>
    <li>.net编程词典</li>
    <li>C#编程词典</li>
</ol>
</body>
</html>

执行结果:

2.7 表格标记

表格是网页中十分重要的组成元素。表格用来存储数据,包含标题、表头、行和单元格。在HTML语言中,表格标记使用符号<table>表示。定义表格光使用<table>是不够的,还需要定义表格中的行、列、标题等内容。

标记说明
表格标记<table><table></table>标记表示整个表格。<table>标记中有很多属性,例如 width 属性用来设置表格的宽度,border 属性用来设置表格的边框,align 属性用来设置表格的对其方式,bgcolor 属性用来设置表格的背景色等。
标题标记<caption>标题标记以<caption>开头,以</caption>结束,标题标记也有一些属性,例如:align、valign 等。
表格行标记<tr>一组<tr>标记表示表格中的一行。<tr>标记要嵌套在<table>标记中使用,该标记也具有 algin、background 等属性。
表头标记<th>表头标记以<th>开头,以</th>结束,也可以通过 algin、background、colspan、valign 等属性来设置表头。
单元格标记<td>单元格标记<td>又称为列标记,一个<tr>标记中可以嵌套若干个<td>标记。该标记也具有 algin、background、valign 等属性。

2.7.1 显示表格边框

方法一:在<table>标记中添加属性:border="1" cellspacing="0",如下:

<table border="1" cellspacing="0">
</table>

说明:

border="1"表示设置表格边框1px;

cellspacing="0"表示设置表格边框间距为0,即无边距。

方法二:使用CSS样式。

table { border-collapse: collapse;}
table,table tr th, table tr td { border:1px solid #000000; }

2.7.2 单元格合并

colspan 是列合并,rowspan是行合并。

示例:在页面中定义学生成绩表,并在表格中显示边框,同时使用单元格合并。

<html>
<head>
    <title>表格标记</title>
    <style>
        table { border-collapse: collapse;}
        table,table tr th, table tr td { border:1px solid #000000; }
    </style>
</head>
<body>
<table  align="center">
    <caption>学生考试成绩单</caption>
    <tr>
        <th align="center" valign="middle">姓名</th>
        <th align="center" valign="middle">语文</th>
        <th align="center" valign="middle">数学</th>
        <th align="center" valign="middle">英语</th>
    </tr>
    <tr>
        <td align="center" valign="middle">张三</td>
        <td align="center" valign="middle">89</td>
        <td align="center" valign="middle">92</td>
        <td align="center" valign="middle">87</td>
    </tr>
    <tr>
        <td align="center" valign="middle">李四</td>
        <td align="center" valign="middle">93</td>
        <td align="center" valign="middle">86</td>
        <td align="center" valign="middle">80</td>
    </tr>
    <tr>
        <td align="center" valign="middle">王五</td>
        <td align="center" valign="middle">85</td>
        <td align="center" valign="middle">86</td>
        <td align="center" valign="middle">90</td>
    </tr>
    <tr>
        <th rowspan="2" align="center" valign="middle">博客信息</th>
        <td colspan="3" align="center" valign="middle">您好,欢迎访问 pan_junbiao的博客</td>
    </tr>
    <tr>
        <td colspan="3" align="center" valign="middle">博客地址:https://blog.csdn.net/pan_junbiao</td>
    </tr>
</table>
</body>

执行结果:

2.8 <hr>标记

<hr>(水平线)标记用于在页面上绘制水平线。

<hr>标签属性:

属性说明
align指定水平线的位置。
width指定水平线的长度。
size指定水平线的宽度,以像素为单位。
 noshade指定水平线以纯色而不是以阴影进行显示。

示例:在页面中显示水平线。

<hr noshade size="5" align="center" width="50%"/>
<hr size="15" align="left" width="80%"/>

2.9 在HTML中使用特殊符字符

字符实体由3部分组成:&号、 实体名称和分号(;)。

如:空格: &nbsp;      版权号:  &copy;

 

3、HTML表单标记

对于经常上网的人来说,对网站中的登录页面肯定不会感到陌生。在登录页面中,网站会提供给用户用户名文本框与密码文本框,以供访客输入信息。这里的用户名文本框与密码文本框就属于HTML中的表单元素。表单在HTML页面中起着非常重要的作用,是用户与网页交互信息的重要手段。

3.1 <form>表单标记

表单标记以<form>标记开头,以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。

<form>标记的语法:

<form action="url" method="get | post" name="formName" οnsubmit="" target="">
</form>

<form>标记的属性:

属性说明
action该属性用来指定处理表单数据程序的URL地址。
method该属性用来指定数据传送到服务器的方式。它有两种属性值,分别为 get 和 post。get 属性值表示将输入的数据追加在 action 指定的地址后面,并传送到服务器。当属性值为 post 时,会将输入的数据按照 HTTP 协议中的 post 传输方式传送到服务器。
name该属性指定表单的名称,程序员可以自定义其值。
onsubmit该属性用于指定当前用户单击提交按钮时触发的事件。
target该属性指定输入数据结果显示在哪个窗口中,其属性值可以设置为_blank、_self、_parent 和 _top。其中,_blank 表示在新窗口中打开目标文件;_self 表示在同一个窗口中打开,该项一般不用设置;_parent 表示在上一级窗口中打开,一般使用框架页时经常使用;_top 表示在浏览器的整个窗口中打开,忽略任何框架。

示例:创建表单,设置表单名称为 myForm,传送方式为 post,当用户提交表单时,提交至 action.html 页面进行处理。

<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
</form>

<form>表单标记的详细使用,请浏览本博客的文章:HTML中Form表单的使用

3.2 <input>表单输入标记

表单输入标记是使用最频繁的表单标记,通过这个标记可以在向页面中添加单行文本、多行文本、按钮等。

<input>标记的语法:

<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit"
readonly="readonly" size="digit" src="uri" usemap="uri" alt="" name="" value="" />

<input>标记的属性:

属性描述
type用于指定添加的是哪种类型的输入字段,共有10个可选值。
disabled用于指定输入字段不可用,即字体变成灰色。其属性值可以为空值,也可以指定为 disabled。
checked用于指定输入字段是否处于被选中状态,用于 type 属性值为 radio 和 checkbox 的情况下。其属性值可以为空值,也可以指定为 checked。
width用于指定输入字段的宽度,用于 type 属性值为 image 的情况下。
height用于指定输入字段的高度,用于 type 属性值为 image 的情况下。
maxlength用于指定输入字段可输入文字的个数,用于 type 属性值为 text 和 password 的情况下,默认没有字数限制。
readonly用于指定输入字段是否为只读。其属性值可以为空值,也可以指定为 readonly。
size用于指定输入字段的宽度,当 type 属性为  text 和 password 时,以文字个数为单位,当 type 属性为其他值时,以像素为单位。
src用于指定图片的来源,只有当 type 属性值 image 时有效。
usemap为图片设置热点地图,只有当 type 属性值 image 时有效。属性值为 URI,URI格式为“#+<map>标记的 name 属性值”。例如,<map>标记的 name 属性为 Map,该URI为 #Map。
alt用于指定当图片无法显示时显示的文字,只有当 type 属性值 image 时有效。
name用于指定输入字段的名称。
value

用于指定输入字段默认的数据值,当 type 属性为 checkbox 和 radio 时,不可省略此属性;为其他值时,可以省略。当 type 属性为 button、reset 和 submit 时,指定的是按钮上的显示文字; 当 type 属性为 checkbox 和 radio 时,指定的是数据项选定的值。

type属性是<input>标记中非常重要的内容,决定了输入数据的类型。

type属性的属性值:

可选值描述可选值描述
text文本框submit提交按钮
password密码域reset重置按钮
file文件域button普通按钮
radio单选按钮hidden隐藏域
checkbox复选框image图像域

示例:在HTML页面中使用各种表单标记。

<html>
<head>
    <title>表单标记</title>
    <style>
        .txtBox{
            padding: 3px;
            width: 300px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<form action="" method="post" name="myform">
    <table align="center">
        <caption>用户注册</caption>
        <tr>
            <th>博客信息:</th>
            <td>
                <input class="txtBox" type="text" id="txtBlogInfo" name="blogInfo" value="您好,欢迎访问 pan_junbiao的博客!" />
            </td>
        </tr>
        <tr>
            <th>博客地址:</th>
            <td>
                <input class="txtBox" type="text" id="txtBlogUrl" name="blogUrl" value="https://blog.csdn.net/pan_junbiao"/>
            </td>
        </tr>
        <tr>
            <th>性别:</th>
            <td>
                <input id="male" name="sex" type="radio" value="1" checked="checked"/>
                <label for="male">男</label>
                <input id="female" name="sex" type="radio" value="2"/>
                <label for="female">女</label>
                <input id="secrecy" name="sex" type="radio" value="3"/>
                <label for="secrecy">保密</label>
            </td>
        </tr>
        <tr>
            <th>兴趣爱好:</th>
            <td>
                <input id="lq" name="hobby" type="checkbox" value="篮球" checked="checked">
                <label for="lq">篮球</label>
                <input id="zq" name="hobby" type="checkbox" value="足球" checked="checked">
                <label for="zq">足球</label>
                <input id="ymq" name="hobby" type="checkbox" value="羽毛球">
                <label for="ymq">羽毛球</label>
                <input id="ppq" name="hobby" type="checkbox" value="乒乓球">
                <label for="ppq">乒乓球</label>
                <input id="yy" name="hobby" type="checkbox" value="游泳">
                <label for="yy">游泳</label>
            </td>
        </tr>
        <!-- 以下是提交、取消按钮 -->
        <tr>
            <td colspan="2" style="text-align: center;">
                <input type="submit" value="提交"/>
                <input type="reset" value="重置" />
            </td>
        </tr>
    </table>
</form>
</body>
</html>

执行结果:

3.3 <select>下拉列表标记

<select>标记可以在页面中创建下拉列表框,此时的下拉列表框是一个空的列表,要使用<option>标记向列表中添加内容。

<select>标记的语法:

<select name="name" size="digit" multiple="multiple" disabled="disabled">
    <option value="" selected>选择项1</option>
    <option value="">选择项2</option>
    <option value="">选择项3</option>
</select>

<select>标记的属性:

属性描述
name用于指定列表框的名称。
size用于指定列表框中显示选项的数量,超出该数量的选项可以通过滚动条查看。
disabled用于指定当前列表框不可使用(变成灰色)。
multiple用于让多行列表框支持多选。

示例:在页面中应用<select>标记和<option>标记添加下拉列表框和多行下拉列表框。

<html>
<head>
    <title>下拉列表标记</title>
</head>
<body>
下拉列表框:
<select name="select1">
    <option>pan_junbiao的博客</option>
    <option>KevinPan</option>
    <option>吖标</option>
</select>
&nbsp;&nbsp;
多行列表框(不可多选):
<select name="select2" size="2">
    <option>pan_junbiao的博客</option>
    <option>KevinPan</option>
    <option>吖标</option>
</select>
&nbsp;&nbsp;
多行列表框(可多选):
<select name="select2" size="3" multiple>
    <option>pan_junbiao的博客</option>
    <option>KevinPan</option>
    <option>吖标</option>
</select>
</body>
</html>

执行结果:

3.4 <textarea>多行文本标记

<textarea>为多行文本标记,与单行文本相比,多行文本可输入更多的内容。

<textarea>标记的语法:

<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">
    文本内容
</textarea>

<select>标记的属性:

属性描述
cols用于指定多行文本框显示的列数(宽度)。
rows用于指定多行文本框显示的行数(高度)。
name用于指定多行文本框的名称,当表单提交后,在服务器端获取表单数据时应用。
disabled用于指定多行文本框不可使用(变成灰色)。
readonly用于指定多行文本框为只读。
wrap用于设置多行文本框中的文字是否自动换行。

wrap属性的可选值:

可选值描述
hard默认值,表示自动换行,如果文字超过 cols 属性所指的列数就自动换行,并且提交到服务器时换行符同时被提交。
soft表示自动换行,如果文字超过 cols 属性所指的列数就自动换行,但提交到服务器时换行符不被提交。
off表示不自动换行,如果想让文字换行,只能按下 Enter 键强制换行。

示例:使用多行文本框,显示文字信息。

<html>
<head>
    <title>多行文本框</title>
</head>
<body>
<textarea name="content" cols="50" rows="5" wrap="hard">
您好,欢迎访问 pan_junbiao的博客!
博客地址:https://blog.csdn.net/pan_junbiao
岁月从来不曾静好,只是有人在替你背负枷锁,含泪前行。也许是父母,也许是朋友,也许是陌生人,无论是谁,请记得常怀感恩之心。
</textarea>
</body>
</html>

执行结果:


4、超链接与图片标记

HTML 语言的标记有很多,本文只介绍一些常用标记。除了上面介绍的常用标记外,还有两个标记需要介绍,即超链接标记和图标标记。

4.1 超链接标记

超链接标记是页面中非常重要的元素,在网站中实现从一个页面跳转到另一个页面,这个功能就是通过超链接标记<a>来完成。

<a>标记的语法:

<a href="uri" title="提示文字"></a>

<a>标记的属性:

属性描述
href用来设置链接到哪个页面中。
title用来设置光标聚焦时显示的提示文字。

<a>标记不显示下划线(只有当光标聚焦时才显示下划线)

a {
    text-decoration: none;
    color: #454545;
    vertical-align: baseline;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
    color: #000;
}

4.2 图标标记

在浏览网站中通常会看到各式各样的漂亮的图片,在页面中添加的图片是通过<img>标记来实现的。

<img>标记的语法:

<img src="uri" width="value" height="value" border="value" alt="提示文字">

<img>标记的属性:

属性描述
src用于指定图片的来源。
width用于指定图片的宽度。
height用于指定图片的高度。
border用于指定图片外边框的宽度,默认值为0。
alt用于指定当图片无法显示时显示的文字。

示例:在页面中添加图片与超链接。

<html>
<head>
    <title>图片与超链接</title>
</head>
<body>
    <img src="images/logo.png" alt="pan_junbiao的博客" /><br>
    <a href="https://blog.csdn.net/pan_junbiao" title="pan_junbiao的博客">您好,欢迎访问 pan_junbiao的博客!</a>
</body>
</html>

执行结果:

 

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

pan_junbiao

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值