HTML

82 阅读4分钟

HTML是什么

1.超文本标记语言(HyperText Mark-up Language )

2.用来设计网页的标记语言,不是编程语言

3.用该语言编写的文件,以 .html或 .htm为后缀

4.由浏览器解释执行

5.不区分大小写,建议小写

HTML标签

1.HTML用于描述功能的符号成为“标签”

2.标签都封装在一对尖括号“<...>”之中,如就是一个标签

3.封闭类型标记(也叫双标记),必须成对出现,如

4.非封闭类型标记,也叫作空标记,或者单标记,如

web浏览器的作用

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容

HTML属性与值

1.属性是用来修饰元素的

属性必须位于开始标签

一个元素的属性可能不止一个,多个属性之间用空格隔开

多个属性之间不区分先后顺序

2.每个属性都有值

属性和属性的值之间用等号链接

属性的值包含在引号当中

属性总是以名称/值对的形式出现

HTML的基本结构

<!DOCTYPE html>     文档类型声明
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>网页标题</title>  文档标题,一个网页只能有一个标题
  </head>
  <body>
      <!--网页内容,可以使用文本、图像等 -->
  </body>
</html>

lang是language的意思,lang=”en” 属性对每张页面中的主要语言进行声明,en代表了英文,只是个声明,声明了它,对搜索引擎和浏览器更友好,并不会更改显示内容。它还有常见的值是zh-CN,代表了中文。(搜索引擎不会判断该站点是中文还是英文,它让搜索引擎知道你的站点是中文站,这些都是html规范,越规范,越容易被收录)

 

META标签用来描述一个HTML网页文档的属性,此处的charset=”utf-8”是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式。国外一般会用gbk、gb2312,国内通常使用utf-8。

什么是DTD文档模型,为什么写在HTML当中

DTD文档模型也称DOCTYPE文档声明,它是Document Type Definition的英文缩写,意思是文档类型定义,在HTML文档中,用来指定页面所使用的HTML(或者XHTML)的版本。要想制作符合标准的页面,一个必不可少的关键组成部分就 是DOCTYPE声明。只有确定了一个正确的DOCTYPE,HTML里的标识和CSS才能正常生效。它一般被定义在页面的第一行,html标签之前。

注: 它不是HTML标签。

DTD文档模型=DOCTYPE=DOCTYPE文档声明

head

标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分:

​​

应该把 标签放在文档的开始处,紧跟在 后面,并处于 标签之前。

文档的头部经常会包含一些 标签,用来告诉浏览器关于文档的附加信息。

meta

元素可提供有关页面的元信息(meta-information),用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。

常见的meta有

Keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么。

 

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

  

author作者 标注网页的作者

 

语义化标签

语义化:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上文章的标题就可以用标题标签 h1-h6,段落用p,地址用address等

好处:

\1. 更容易被搜索引擎收录

\2. 更容易让屏幕阅读器读出网页内容

HTML常用的标签

段落标签 p 标题标签 hn 换行标签br 水平线标签hr 无语义标签span

图片

1.使用元素将图像添加到页面

2.空标记

3.必须属性:src(存储图像的位置)

4.常用属性:width,height,alt,title

 

title定义了鼠标经过图片时显示的内容,搜索引擎抓取图片时,是根据title定义的内容来分析图片是什么的

alt当图片未能正常显示时,用于给用户的提示信息

超链接

1.使用元素创建一个超链接

2.语法:

文本

href属性:链接URL

target属性:目标,可取值 _blank, parent,self, top,framename等

_blank :在新的页面中打开 _self :在当前页面打开 _parent:在父页面打开

name属性:锚点名称

title属性:定义了鼠标经过时的提示文字

\