

首页  思维导图  详情



html的基本结构

2016-05-21 12:57:58   27  举报





AI智能生成

html的基本结构

html

前端开发

模版推荐

作者其他创作

大纲/内容

1、html的基本结构

1、<html>内容</html>

解释

HTML文档的文档标记，也称为HTML开始标记

功能

这对标记分别为于网页的最前端和最后端

<html>在最前端表示网页的开始

</html>在最后端表示网页的结束

2、<head>内容</head>

解释

HTML文件头标记，也称为HTML头信息开始标记

功能

用来包含文件的基本信息，比如网页的标题、关键字。在<head></head>内可以放<title></title>、<meta></meta>、<style></style>等等标记

注意

在<head></head>标记内的内容不会再游览器中显示

3、<title>内容</title>

解释

HTML文件标题标记

功能

网页的“主题”，显示在游览器的左上边

注意

网页的标题不能太长，要短小精悍，能具体反映页面的内容，<title></title>标记中不能包含其他标记

html的基本结构

1、<html>内容</html>

解释

HTML文档的文档标记，也称为HTML开始标记

功能

这对标记分别为于网页的最前端和最后端

<html>在最前端表示网页的开始

</html>在最后端表示网页的结束

2、<head>内容</head>

解释

HTML文件头标记，也称为HTML头信息开始标记

功能

用来包含文件的基本信息，比如网页的标题、关键字。在<head></head>内可以放<title></title>、<meta></meta>、<style></style>等等标记

注意

在<head></head>标记内的内容不会再游览器中显示

3、<title>内容</title>

解释

HTML文件标题标记

功能

网页的“主题”，显示在游览器的左上边

注意

网页的标题不能太长，要短小精悍，能具体反映页面的内容，<title></title>标记中不能包含其他标记

解释

HTML文档的主题标记

4、<body>内容</body>

功能

<body>...</body>是网页的主题部分，在此标记之间可以包含<p></p>、<h1></h1>、<br></br>等等标记，正是由这些内容组成了我们看见的内容

body标记的常见属性

1、bgcolor

设置背景颜色

2、text

设置文本颜色

3、link

设置链接颜色

4、vlink

已经访问了的连接颜色

5、alink

正在被点击的链接颜色

5、<meta>内容</meta>

解释

页面的元信息(meta-information)

功能

提供有关页面的元信息(meta-information),比如针对搜索引擎和跟新频度的描述和关键词

必须的属性

content

值:some_text

定义name属性的相关的元信息

常见的属性

1、常用的name属性

1、author

2、keywords

3、description

4、others

注意meta标记必须放在head元素里面

解释

HTML文档的主题标记

4、<body>内容</body>

功能

<body>...</body>是网页的主题部分，在此标记之间可以包含<p></p>、<h1></h1>、<br></br>等等标记，正是由这些内容组成了我们看见的内容

body标记的常见属性

1、bgcolor

设置背景颜色

2、text

设置文本颜色

3、link

设置链接颜色

4、vlink

已经访问了的连接颜色

5、alink

正在被点击的链接颜色

5、<meta>内容</meta>

解释

页面的元信息(meta-information)

功能

提供有关页面的元信息(meta-information),比如针对搜索引擎和跟新频度的描述和关键词

必须的属性

content

值:some_text

定义name属性的相关的元信息

常见的属性

1、常用的name属性

1、author

2、keywords

3、description

4、others

注意meta标记必须放在head元素里面

2、文档设置标记

1、格式标记

1、<br>

强制换行标记

让后面的文字、图片、表格、显示在下一行

2、<p>

换段落标记

3、<center>

居中对齐标记

4、<pre>

预格式化标记

5、<li>

列表项目标记

6、<ul>

无序列表标记

7、<ol>

有序列表标记

可以显示特定的一些顺序

1、格式

</ol>

2、有序列表的type属性

阿拉伯数字1、2、3等等，默认的type属性值

大小字母A、B、C等等

小写字母a、b、c等等

大写罗马数字

小罗马数字

3、value

指定一个新的序列开始起值

4、列表可以进行嵌套

8、<dl><dt><dd>

定义型列表

使用场合

对列表条目进行简短的说明

格式

<dl>

<dt>

<dd>

<dt>

<dd>

</dl>

9、<div>

分区显示标记，也称为值层标记

常用来编排一大段的HTML段落，也可以用于格式化列表，和<p>很相似

10、<hr>

水平分割线标记

2、文本标记

1、hn

标题标记

共有6个级别，n的范围是1-6，不同级别对应显示大小不同的标题，h1最大，h6最小

2、font

字体大小设置

三个常用属性

1、size

取值范围是1-7，默认是3

2、color

3、face

3、b

粗字体标记

4、i

斜字体标记

5、sub

文字下标标记

6、sup

文字上标标记

7、tt

打印机字体标记

8、cite

引用方式的字体，通常是斜体

9、em

表示强调，通常显示为斜体字

10、strong

表示强调，通常显示为粗体字

11、small

小型字体标记

12、big

大写字体标记

13、u

下划线字体标记

3、图像标记

<img>图像标记

1、使用方法

<img src = "路径/文件名.图片格式" width = "属性值" height = “属性值” border = "属性值" alt = "属性值"？

2、注意

1、<img> 为单标记，不需要使用</img>闭合

2、在加载图像文件的时候，文件的路径或者文件名文件格式错误，将无法加载图片

3、<img>标记的属性

1、src属性

作用

指定我们要加载的图片的路径和图片的名称以及图片的格式

2、width属性

作用

指定图片的宽度

单位：px、em、cm、mm

3、height属性

作用

指定图片的高度

单位：px、em、cm、mm

4、border属性

作用

指定图片的边框宽度

单位：px、em、cm、mm

5alt属性

作用1

当网页上的图片被加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字

作用2

如果图像没有下载或者加载失败，会用文字来代替图像显示

作用3

搜索引擎可以通过这个属性的文字来抓取图片

4、超链接的使用

1、基本语法

<a href = "" target = "打开方式" name = "页面锚点名称" > 链接文字或者图片 </a>

2、属性

1、href属性

链接的地址，链接的地址可以是一个网页，也可以是一个视频、图片、音乐等

2、target属性

1、作用

定义链接的打开方式

2、属性值

1、blank

在一个新的窗口中打开链接

2、seif（默认值）

在当前的窗口中打开链接

3、parent

在父窗口中打开页面（框架中使用较多）

4、top

在顶层窗口中打开文件(框架中使用较多)

3、name属性

指定页面的锚点名称

 Collect

Get Started

1.著作权制度的基本问题

 Collect

Get Started

HTML基础

 Collect

Get Started

课程基本理论

 Collect

Get Started

HTML文档的树状结构





0 条评论

下一页