新葡亰496net 新葡亰编程 使用标题结构化你的文档

使用标题结构化你的文档

原文:(可能是英文)

HTML概述和基本结构

结构化你的文档

HTML是什么?

HTML是 HyperText Mark-up Language
的首字母简写,意思是超文本标记语言,

style=”font-size: 16px”>超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,

style=”font-size: 16px”>用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,

style=”font-size: 16px”>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,

style=”font-size: 16px”>如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

用户为了内容更清楚,对许多页面(尤其是文字,当然也有图像和多媒体)都进行了结构化处理,在
(X)HTML 中可以用标题元素定义不同级的结构。

HTML是由:标签和内容构成

style=”font-size: 16px”><title>这是文档中的标题</title>

用户可以为这种结构化的文档创建一个目录表(许多工具也对结构化的文档创建目录表),或者将页面切成小块,比如传送到一个小的设备。这同样可以用来确定页面的中心意思(一些搜索引擎就是这样做的)。

HTML标签(标记)的语法:

标签是由”<“和”>”括起来

style=”font-size: 16px”>双标签:<标签名>….</标签名>

单标签:<标签名/>

Markup validator 将为 (X)HTML
页面提供一个大纲的形式显示结构,常常使用独特的文字样式标出,即使你的内容使用了一个样式表。如果你的页面有几个规则的文字样式,但是没有标题元素,可能它们是标题,但是并没有标明,而只是用不同的样式来区别。

HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页显示内容
</body>
</html>

html文档规范

style=”font-size: 16px”>xhtml制定了文档的编写规范,html5可部分遵守,也可全部遵守,看开发要求。

1、所有的标签必须小写

2、所有的属性必须用双引号括起来

3、所有标签必须闭合

style=”font-size: 16px”>4、img必须要加alt属性(对图片的描述)

标题标签

html注释:

style=”font-size: 15px”>html文档代码中可以插入注释,注释是对代码的说明和解释,注释的内容不会显示在页面上,html代码中插入注释的方法是:

<!-- 这是一段注释  -->

所有版本的 (X)HTML
都定义了六级标题:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,可以预知在
XHTML 2 中,也将提供一般的标题,其级别由其在文档中的深度决定。

HTML中Head头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页显示内容
</body>
</html>

style=”font-size: 15px”>HEAD标签里面负责对网页进行一些设置以及定义标题,

style=”font-size: 15px”>设置包括定义网页的编码格式,外链css样式文件和javascript文件等,

style=”font-size: 15px”>设置的内容不会显示在网页上,标题的内容会显示在标题栏

设置网页编码:<meta charset="utf-8"/>
关键字:<meta name="Keywords" content="关键字" />
描述:  <meta name="Description" content="简介、描述" />
网页标题:<title>本网页标题</title>
导入CSS文件:<link type="text/css" rel="stylesheet" href="**.css"/>
CSS代码:<style type="text/css">嵌入css样式代码</style>
JS文件或代码: <script >。。。</script>

HTML标题

通过
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。

style=”font-size: 15px”>6种级别的标题表示文档的6级目录层级关系,比如说:
<h1>用作主标题(最重要的),其后是
<h2>(次重要的),

再其次是
<h3>,以此类推。搜索引擎会使用标题将网页的结构和内容编制索引,所以网页上使用标题是很重要的。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

HTML段落,换行,字符实体

html段落

style=”font-size: 15px”><p>标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超
    文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的
    标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方
    式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网
    页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

html换行

style=”font-size: 15px”>代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认这种换行,如果真想换行,可以在代码的段落中插入<br
/>来强制换行,代码如下:

<p>
一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

html字符实体

style=”font-size: 15px”>代码中成段的文字,如果文字间想空多个空格,在代码中空多个空格,

style=”font-size: 15px”>在渲染成网页时只会显示一个空格,如果想显示多个空格,可以使用空格的字符实体,代码如下:

<!--  在段落前想缩进两个文字的空格,使用空格的字符实体:&nbsp;   -->
<p>
    &nbsp;&nbsp;一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
    文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
    渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

在网页上显示 “<” 和 “>”
会误认为是标签,想在网页上显示“<”和“>”可以使用它们的字符实体,比如:

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

HTML块,含样式的标签

html块

  1. div标签
    块元素,表示一块内容,没有具体的语义。
  2. span标签
    行内元素,表示一行中的一小段内容,没有具体的语义。

含样式和语义的标签

  1. em标签
    行内元素,表示语气中的强调词
  2. i标签
    行内元素,原本没有语义,w3c强加了语义,表示专业词汇
  3. b标签
    行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名
  4. strong标签
    行内元素,表示非常重要的内容
  5. del 删除线

语义化的标签

语义化的标签,就是在布局的时候多使用语义化的标签,搜索引擎在爬网的时候能认识这些标签,

理解文档的结构,方便网站的收录。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,

a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。

 

HTML图片

html图片

<img>标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显

示的文字,以及对搜索引擎和盲人读屏软件的支持。

<img src="images/pic.jpg" alt="产品图片" />
标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图