文章目录

  • 一、HTML简介
  • 二、基本标签
  • 1.文档结构
  • 2. 标题元素
  • 3.段落
  • 4.换行与分隔线
  • 5. 注释
  • 6.文字标签
  • 7.字符实体
  • 8.图片标记
  • 9.超链接
  • 10.列表
  • 11.表格
  • 12. 表单
  • 13.框架
  • 三、结语


一、HTML简介

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)。HTML并不是一种编程语言,而是一种标记语言 (markup language),标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页。

二、基本标签

标记分为单标记双标记两种
单标记可以独自使用,例如<br> <hr>
双标记则由首标记和尾标记构成,例如:<b></b>

1.文档结构

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. 
This text is bold
</body>
</html>

在HTML文档中,第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是,这个标签告诉浏览器这是HTML文档的终止。
在和标签之间文本的是头信息。在浏览器窗口中,头信息是不被显示的。
在和标签之间的文本是正文,会被显示在浏览器中

body属性的常用标签

  • <bgcolor> :设置背景颜色
  • <text> :设置文本颜色

定时刷新或跳转:

表示一秒钟刷新一次页面
<meta http-equiv="refresh" content="1"/>
页面3秒后自动跳转到百度页面
<meta http-equiv="refresh" content="3;url=http:www.baidu.com"/>

2. 标题元素

标题元素由标签<h1>到<h6>定义。<h1>定义最大的标题元素,<h6>定义最小的。

常用属性:

<align>:设置对齐方式。

例如,

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

显示效果:


This is a heading
This is a heading
This is a heading
This is a heading
This is a heading
This is a heading

3.段落

段落是用

标签定义的。

常用属性:
<align>:设置对齐方式。

<p>This is another paragraph</p>

显示效果


This is another paragraph


HTML自动在一个段落前后各添加一个空行。

4.换行与分隔线

1.换行
当需要结束一行,并且不想开始新段落时,使<br>标签。<br>标签不管放在什么位置,都能够强制换行。

<p>This <br> is a para<br>graph with line breaks</p>

显示效果:


This
is a para
graph with line breaks


<br>标签是一个空标签,它没有结束标记。

2.分隔线

分隔线用<hr>来表示

常用属性:

  • size:控制直线的粗细
  • color:控制直线的颜色
  • align:对齐方式
  • width:控制直线的宽度(占页面的多少)

例如:

<hr color="blue" size="5px" align="center" width="50%">

5. 注释

注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。

<!-- This is a comment -->

注意:需要在左括号“<”后面跟一个感叹号,右括号不用。

6.文字标签

标签

功能

<b></b>

加粗文字

<strong></strong>

加粗+斜体文字

<font></font>

字体标记

其中<font>中有许多属性来控制字体样式,例如:

  • color:设置字体颜色(取值颜色名字或颜色的对应16进制)
  • size:设置字体大小(取值1-7)
  • face:设置字体字形(宋体、楷体等)

注意: <font>标签现在并不常用,目前的主流是用css来控制文本格式,后面会学到。

7.字符实体

在HTML中,有些字符拥有特殊含义,比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话,必须在HTML代码中插入字符实体。

一个字符实体拥有三个部分:

  • 一个and符号(&)
  • 一个实体名或者一个实体号
  • 最后是一个分号(;)

想要在HTML文档中显示一个小于号,必须这样写:&lt;或者&#60;
使用名字相对于使用数字的优点是容易记忆,缺点是并非所有的浏览器都支持最新的实体名,但是几乎所有的浏览器都能很好地支持实体号。

注意: 实体名是大小写敏感的。

在HTML中,最常见的字符实体就是不可拆分空格。
通常,HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格,其中9个会被去掉。想要在HTML中插入空格,可以使用实体:&nbsp;

常用的字符实体

显示结果

描述

实体名

实体号

不可拆分的空格

&nbsp;

&#160;

<

小于

&lt;

<

>

大于

&gt;

&#62;

&

and符号

&amp;

&#38;

"

引号

&quot;

&#34;


单引号

&#39;

¢


&cent;

&#162;

£

英镑

&pound;

&#163;

¥

人民币元

&yen;

&#165;

§

章节

&sect;

&#167;

©

版权

&copy;

&#169;

®

注册

&reg;

&#174;

×

乘号

&times;

&#215;

÷

除号

&divide;

&#247;

8.图片标记

格式:
<img src=“url” alt="" height="" width="" >

属性:

  • src :src”属性的值是所要显示图像的URL。URL指向图像存储的地址。
  • alt:用来给图像显示一个“交互文本”,值是由用户定义的。
  • width:控制图片的宽度
  • height:控制图片的高度

说明:

当浏览器在文档中遇到img标签时,就放置一个图像。如果把img标签放在两个段落之间,就会先显示一个段落,然后是这个图像,最后是另外一个段落。

alt属性在浏览器装载图像失败的时候告诉用户所丢失的信息,此时,浏览器显示这个交互文本来代替图像。

实例:

插入本地图像

<img src="image.gif" width="144" height="50">

插入非本地图像

<img src="http://www.baidu.com/images/ie.gif" width="73" height="68">

9.超链接

HTML使用超级链接来连接到网络上的其他页面。

格式:
<a href=“url”>超链接名称或图片</a>

例如:
以文字作为超链接

<a href="https://www.baidu.com/">百度</a>

以图片作为超链接

<a href="lastpage.htm"><img border="0" src=".\images\next.gif"></a>

target属性
在框架子窗口中如果含有超链接,当点击超链接时,目标网页显示的位置由target指定,默认是在子窗口打开。

<a href="目标网页地址" target="显示目标网页的子窗口名称">超链接文字</a>

10.列表

列表标签分为两类:有序标签无序标签

1.有序列表

格式:

<ol type="序号类型">
	<li></li>
	<li></li>
</ol>

其中type属性指定列表项前的项目编号的样式,取值

  • 1:阿拉伯数字(默认)
  • a:小写英文
  • A:大写英文
  • i:小写罗马数字
  • I:大写罗马数字

2.无序列表

格式

<ul type="序号类型">
	<li></li>
	<li></li>
</ul>

type属性的取值:

  • disc:实心圆点
  • circle:空心圆点
  • square:实心方块

例如

有序列表

<h4>Numbered list:</h4>
<ol>
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
<li>Oranges</li>
</ol>

效果展示:


Numbered list:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
Letters list:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
Lowercase letters list:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
Roman numbers list:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
Lowercase Roman numbers list:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

无序列表:

<h4>Disc bullets list:</h4>
<ul type="disc">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
	<li>Apples</li>
	<li>Bananas</li>
	<li>Lemons</li>
	<li>Oranges</li>
</ul>

11.表格

表格是用<table>标签定义的。表格被划分为行(使用<tr>标签),每行又被划分为数据单元格(使用<td>标签),表格头使用<th>标签指定。数据单元格可以包含文本,图像,列表,段落,表单,水平线,表格等等。可以控制页面布局。

基本语法:

<table>
	<caption>表格标题</caption>
		<tr>
			<th>列名1</th>
			<th>列名2</th>
		</tr>
		<tr>
			<td>数据一</td>
			<td>数据二</td>
		</tr>
	......
</table>

table标签属性:

  • width:表格宽度
  • height:表格高度
  • align:表格水平对齐方式
  • border:表格边框厚度
  • cellpadding:边距
  • cellspacing:间距
  • bgcolor:表格背景颜色
  • background:表格背景图像

tr标签属性:

  • align:单元格水平对齐方式
  • valign:单元格中内容的垂直对齐方式
  • bgcolor:背景颜色

td th的属性:

  • align:水平对齐方式
  • valign:垂直对齐方式
  • background:背景图像
  • bgcolor:背景颜色
  • colspan:横向合并单元格
  • rowspan:纵向和平单元格
  • height:高度
  • width:宽度

实例

1.单元格跨行(列)的表格:

<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
	<th>Name</th>
	<th colspan="2">Telephone</th>
</tr>
<tr>
	<td>Bill Gates</td>
	<td>555 77 854</td>
	<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
	<th>First Name:</th>
	<td>Bill Gates</td>
</tr>
<tr>
	<th rowspan="2">Telephone:</th>
	<td>555 77 854</td>
</tr>
<tr>
	<td>555 77 855</td>
</tr>
</table>

显示效果:


Cell that spans two columns:

Name

Telephone

Bill Gates

555 77 854

555 77 855

Cell that spans two rows:

First Name:

Bill Gates

Telephone:

555 77 854

555 77 855


2.有标题的表格:

<h4>
This table has a caption,and a thick border:
</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
	<td>100</td>
	<td>200</td>
	<td>300</td>
</tr>
<tr>
	<td>400</td>
	<td>500</td>
	<td>600</td>
</tr>
</table>

显示效果:


This table has a caption,and a thick border:

My Caption

100

200

300

400

500

600


12. 表单

表单是一个能够包含表单元素的区域。表单元素能够让用户在表单中输入信息的元素(比如文本框,密码框,下拉菜单,单选框,复选框等等)。

表单是用<form>元素定义的。

格式:

<form>
	<input>
	<input>
	<select></select>
	<textarea></textarea>
	......
</form>

form标签属性

  • name:表单名称
  • method:提交方法
  • action:处理程序

配合form标签嵌套使用的,有<input> <select> <textarea>标签。下面分别来介绍

<input>标签

最常用的表单标签是<input>标签。<input>是单个标记,必须嵌套在表单内使用,用于定义一个输入项。主要属性有6个,即type name size value maxlength checked,其中name type属性是必选的。

格式:

<form>
	<input name="输入域名称" type="域类型" value="输入域的值">
	......
</form>

type属性的取值共有9种类型:

1. 文本域

<input type="text" name="自定义名称" maxlength="" size="" >
  • size用来限制此区域显示的大小
  • maxlength限制输入的最大字符数

2.密码域

<input type="password" name="自定义名称" maxlength="" size="" >

属性作用同上,密码域与文本域的区别是,当输入密码时区域内会显示*来代替输入的内容。

3.单选按钮

<input type="radio" name="自定义名称" value="值" checked/>

check属性设置该按钮在默认状况下是否被选中。
当需要设置多个互斥的按钮时,设置相同的name值即可。

4.复选框

<input type="checkbox" name="自定义名称" value="值" checked/>

check属性设置该按钮在默认状况下是否被选中。
当需要设置多个复选框时,可设置相同的name值。

5.提交按钮

<input type="submit" name="自定义名称" value="" />

将表单提交到服务器

6.取消按钮

<input type="reset" name="自定义名称" value="" />

将表单内的内容清除

7. 图像按钮

<input type="image" src="url"/>

使用图像代替submit按钮

8.文件域

<input type="file" name="" size="" maxlength="">

9.隐藏域

<input type="hidden" name="" size="" value="">

用户不能输入信息,用来预设某些要传递的信息

<select>标签

在表单中,通过<select>和<option>标记可设计一个下拉式的列表或带滚动条的列表。

<select name="" size="" multiple>
	<option value="" selected>...</option>
	<option value="">...</option>
	...
</select>

select标签常用属性

  • name:设定下拉表名字
  • size:改变下拉框的大小
  • multiple:允许用户选择多项

option标签常用属性

  • selected:在初始时被选中
  • value:需要提交的数据

<textarea>标签

格式

<textarea name="" rows="" cols="" wrap="">
初始值
</textarea>

rows设置输入域的行数,cols设置域的列数,wrap设置是否自动换行。

综合实例:

<h2 align="center">学生信息注册</h2>
<form action="" method="post">
	姓名:<input type="text" name="name"><br>
	性别:<input type="radio" name="sex" value="男">男
	<input type="radio" name="sex" value="女">女<br>
	出生日期:<input type="text" name="birth"><br>
	学校:<input type="text" name="school"><br>
	专业:<select name="zy">
		<option selected="selected">计算机科学与技术</option>
		<option>大数据</option>
		<option>物联网</option>
	</select><br>
	体育特长:<input type="checkbox" name="tiyu" value="篮球">篮球
		<input type="checkbox" name="tiyu" value="排球">排球
		<input type="checkbox" name="tiyu" value="足球">足球
		<input type="checkbox" name="tiyu" value="游泳">游泳<br>
	上传照片:<input type="file"><br>
	密码:<input type="password"><br>
	个人介绍:<textarea name="jieshao" rows="5" cols="30"></textarea><br>
	<input type="submit" value="提交">
	<input type="reset" value="取消">
</form>

13.框架

使用框架,可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面,它们是相互独立的。

frameset标签

<frameset>标签定义了如何将窗口拆分成框架。 每个frameset标签定义了一组行和列。 行/列的值指明了每个行/列在屏幕上所占的大小。 <frame>标签定义了每个框架中放入什么文件。

语法结构:

<frameset rows="高度1,高度2.." 或者 cols="宽度1,宽度2..">
	<frame src="网页1">
	<frame src="网页2">
</frameset>

说明:

  • rows属性是水平分割,cols属性是垂直分割
  • rows是从上往下分割,cols是从左往右分割

frame标签

语法

<frame src="html文件位置" name="子窗口名称" scrolling="">

常用属性

  • name:指定子窗口的名称
  • scrolling:用于控制窗口框架中是否显示滚动条

实例:

垂直分栏:

<frameset cols="25%,50%,25%">
	<frame src="frame_a.htm">
	<frame src="frame_b.htm">
	<frame src="frame_c.htm">
</frameset>

水平分栏:

<frameset rows="25%,50%,25%">
	<frame src="frame_a.htm">
	<frame src="frame_b.htm">
	<frame src="frame_c.htm">
</frameset>

三、结语

如果这篇文章对你有所帮助,动动小手点个赞吧!!