一、HTML基础

1.1.1 HTML简介

html不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式，如大小，颜色

（简单理解就是学习一大堆用于布局的API）

eg:<I>斜体字</I>

1.1.2 HTML文件的基本结构

<html> //html开始标记

        //头

<head> 
<meta charset="UTF-8"> //元信息
<title>标题</title>

</head>


        //主体

<body>

        ......主体内容
</body>

</html> //html结束标记

基本上所有标记有头有尾 <X>开始 </X>结束中间内容即:<X>内容</X>

1.1.3 认识HTML标记

所有标记成对出现，结束标记总是在开始标记前增加一个/

标记(也叫标签)与标记之间可以嵌套，也可以放置各种属性

源文件中，标记不区分大小写

第二章 HTML基本标签

2.1 HTML头部标记head

一般包括标题，基础信息，元信息（<meta>）

注：元信息即<meta>

百度解释:元信息是关于信息的信息，元信息允许服务器提供所发送数据的信息，如HTTP可以提高所发的对象语言和对象，也可以用元信息来实现有条件请求以及报告事务完成。收到数据的浏览器可以根据元信息确定服务器发来的是什么内容，预料有什么数据，确知是否接收完整的数据，以及过程中是否出错，这样客户就可以知道传输对象的类型。

<head>元素的作用范围是整篇文档。<head>元素中可以有<meta>元信息定义、文档样式表定义和脚本等信息，定义在HTML语言头部的内容往往不会在网页上直接显示

2.2 标题标记title

HTML页面的标题一般是用来说明页面的用途，它显示在浏览器的标题栏

语法: <title>...</title>

2.3元信息标签meta

meta元素提供的信息不显示在页面中，一般用来定义页面信息的说明、关键字、刷新等。

在HTML中，meta标记不需要设置结束标记，在一个尖括号内的就是一个meta内容。在一个html网页中可以有多个meta标签。meta标签的属性有name和http-equiv,其中name属性主要用于描述网页，以便于搜索引擎查找、分类

2.3.1 设置页面关键字

语法: <meta name="keywords" content="具体关键字">

说明:name为属性名称，这里是keywords(提示框里的，不是自己随便定义的字符串),也就是设置网页的关键字属性，而在content中则定义具体的关键字

注: 关键字可以不止一个，最好根据不同的页面，制定不同的关键字组合，这样页面被搜索到的概率将大大增加

2.3.2 设置页面说明

便于搜索引擎查找

语法:<meta name="description" content="设置页面说明">

2.3.3 定义编辑工具·

语法:<meta name="generator" content="设置页面说明">

2.3.4 设置作者信息

语法:<meta name="author" content="作者姓名">

注:description,generator,author 都是html提供的，不是自己随便写的

2.3.5 设置网页文字及语言

可以设置网页的语言编码方式，这样浏览器就可以正确选择语言，而不需要人工选取

语法:<meta http-equiv="content-type" content="text/html; charset=字符集类型" /> #注意结尾多了/

说明: http-equiv用于传送HTTP通信协议的标头，而在content中才是具体的属性值。charset用于设置网页的内码语系，也就是字符集的类型，国内常用的是GB码，charset常常设置为gb2312,即简体中文。现在UTF-8更加流行。英文是ISO-8859-1字符集，此外还有其他的字符集。

2.3.6 设置网页的定时跳转

使用<meta/>标签可以使网页在经过一定时间后自动刷新，这可通过将http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间。

语法: <meta http-equiv="refresh" content="跳转时间;URL=跳转到的地址">

说明:refresh表示网页的刷新，content中设置刷新时间(通常以秒为单位)和刷新后的链接地址，分号隔开

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5;url=index.html" />
<title>网页定时跳转</title>
</head>
<body>
5秒后自动跳转
</body>
</html>

//index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
跳转到这来
</body>

</html>

2.4 网页的主体标记body

网页的主体部分包括要在浏览器中显示处理的所有信息。在网页的主体标记中有很多的属性设置，包括网页的背景设置、文字属性设置和链接设置等。

2.4.1 网页的背景色bgcolor

使用<body>标签的bgcolor属性可以为整个网页定义背景颜色

语法:<body bgcolor="背景颜色">

说明:bgcolor的值可以是一个已命名的颜色，也可以是一个十六进制的颜色值

eg:

<html>
<head>
<meta charset="UTF-8">
<title>背景色</title>

</head>
<body bgcolor="red">
红红的网页
</body>
</html>

运行效果

2.4.2 网页背景图片 background

以图片作为网页背景，入csdn. 可以设置背景图片的平铺方式，显示方式等

语法: <body background="图片的地址">

说明: 图片地址可以是相对地址，也可以是绝对地址。默认情况下，用户可以省略此属性，这时图片会按照水平和垂直的方向不断重复出现，直到铺满整个页面。

eg:

<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
</head>
<body background="image/pal4.bmp">
仙剑奇侠传四
</body>

</html>

运行结果:

2.4.3 文字颜色 text

可以通过text属性来设置文字的颜色。在没有对文字的颜色进行单独定义时，这一属性可以对页面中所有文字起作用

语法: <body text="文字颜色">

eg:

<html>
<head>
<meta charset="UTF-8">
<title>页面所有文字颜色</title>

</head>
<body text="blue">
<p>仙剑奇侠传四仙剑奇侠传四仙剑奇侠传四仙剑奇侠传四仙剑奇侠传四仙剑奇侠传四仙剑奇侠传四仙剑奇侠传四</p>
<p>仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五</p>
<p>仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五</p>
<p>仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五</p>
<p>仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五</p>
<p>仙剑奇侠传五仙剑奇侠传五仙剑奇侠传五</p>
<p>仙剑奇侠传五仙剑奇侠传五</p>
<p>仙剑奇侠传五</p>
</body>

</html>

运行结果:

2.4.4 链接文字属性link

超链接是网页中最重要、最根本的元素之一。网站中的一个个网页是通过超链接的形式关联在一起的，正是因为有了网页之间的链接才形成了这纷繁复杂的网络世界。超链接中以文字链接最多，在默认情况下，浏览器以蓝色作为超链接文字的颜色，访问过的文字则颜色变为暗红色。可以通过link参数改变链接文字的颜色。

语法: <body link="颜色">

说明: 这一属性的设置与前面几个设置颜色的参数类似，都是与body标签放置在一起，表明它对网页所有未单独设置的元素起作用。

eg:

<html>
<head>
<meta charset="UTF-8">
<title>超链接文字颜色</title>

</head>
<body link="#993300">
<center>
<a href="http://www.baidu.com">百度一下</a>
</center>
</body>

</html>

注: <center>本内容居中显示</center>

<a href="链接网址">超链接文本</a>

运行结果:

点击百度一下后:

使用alink可以设置正在访问的文字颜色

使用vlink可以设置访问后链接文字的颜色

eg:

<html>
<head>
<meta charset="UTF-8">
<title>超链接文字颜色</title>

</head>
<body link="red" alink="blue" vlink="black">
<center>
<a href="#">转到当前页面</a>
</center>
</body>

</html>

注：#表示跳转到当前页面

刚开始:

单击时:鼠标按住还没放时:

单击后：页面跳转后

2.4.5 边距margin

在网页中可以设置页面与浏览器边框之间的距离,包括上边距和左边距

语法: <body topmargin=上边距的值 leftmargin=左边距的值>

说明: 默认情况下,边距的值以像素为单位

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>margin</title>
	
</head>
<body topmargin="100" leftmargin="100">
	<p>设置页面上边距</p>
	<p>设置页面左边距</p>
</body>
</html>

运行结果:

2.5 页面注释标记

和其他语言一样,必不可少的注释

语法:

eg:

<html>
<head>
	<meta charset="UTF-8">
	<title>margin</title>
	
</head>
<body>
	<!--页面注释-->
	<center>
		页面注释内容
	</center>
</body>
</html>

前端基础 HTML 第一章HTML基础第二章HTML基本标签----暑假学习第一天

一、HTML基础

第二章 HTML基本标签

猜你喜欢

前端基础 HTML 第一章HTML基础 第二章HTML基本标签----暑假学习第一天

一、HTML基础

第二章 HTML基本标签

猜你喜欢

前端基础 HTML 第一章HTML基础第二章HTML基本标签----暑假学习第一天