1.HTML 简介
所谓的HTML 就是 HyperText Mark-up Language即超文本标记语言或超文本链接标示语言,它也是一个网页组成的主要语言, HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
它是由一个个标签组成的,可以把它理解成我们语文中的词组,我们用词组组合后写出作文,同样它的一个个标签就组成了一个网页,这个由HTML写出的网页,经过浏览器的解析,就会是一个我们看到的网页.
<html>
<head>
<tittle>Hello</tittle>
<head/>
<body>
<h1>Hello,World!</h1>
</body>
</html>
可以用文本编辑器编写HTML,然后保存为hello.html,双击或者把文件拖到浏览器中,就可以看到效果:
2.HTML 使用
使用HTML就是使用其元素,那么什么是元素呢?并且都有哪些元素我们要弄清楚
元素:开始标签、内容、结束标签。
我是一个<h1>标题<h1>空元素:开始标签与结束标签之间没有内容的元素称之为空元素。
我的右边是一个空元素<code></code>自闭和元素:空元素可以简写成将开始标签和结束标签合二为一。
比如图片标签就是一个自闭和元素 <img/>-
虚元素:只能使用一个标签表示,在其中加内容就是错误的。
比如水平线的标签就是一个自闭和元素
3.HTML 元素属性
-
元素属性:用来配置元素,每个元素都能规定自己的属性,属性分为两种,局部属性(local attribute)和全局属性(global attribute)。
注意: 属性只能用在开始标签或单个标签上,不能用于结束标签 <p color="red" >这是一段红颜色的文字</p> 例如上面的P段落元素就是用了 color这个属性来改变了字体的颜色
-
全局属性:用来配置所有元素的共有行为,全局属性可以用在任意一个元素上。
注意:属性值的话 可以用单引号,也可以用双引号,也可以双引号包含单引号, 一个元素可以应用多个属性,这些属性之间以一个或几个空格分割
-
布尔属性:这个属性不需要设定一个值,只需要将属性名添加到元素中即可
例如:三种表示形式
属性:disabled是是否阻止用户输入的一个属性输入成绩:<imput disabled> 输入成绩:<imput disabled=""> 输入成绩:<imput disabled="disabled">
-
自定义属性:即我们自定定义属性,这种属性必须以data-开头,也叫扩展属性。
例如: 输入成绩:<input disabled="true" data-time="2017.6.13" data-recorder="admin">
4.HTML 文档结构
外层结构:外层结构由两个元素构成 DOCTYPE 和 html元素确定,它告诉浏览器,自此之终到heml结束标签所有元素内容痘印作为HTML处理
元数据:放在head元素内部,部分可以用来表示向浏览器提供的一些文档信息,比如编码,作者.....等。
内容:放在body元素中的,body元素告诉浏览器该显示文档的哪个部分。
-
元素分类:父元素、子元素、后代元素、兄弟元素,一个元素可以有多个子元素,但是只能有一个父元素。
<!DOCTYPE html> <!-- 外层结构 DOCTYPE标签 --> <html> <!-- 外层结构 html标签 --> <head> <!-- 下面的这行是元数据 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>标题</title> </head> <body> <!-- 内容 --> <!-- div是 p和span的父元素 相反他们就是子元素 p1 和 span是兄弟元素 img 是 div的后代元素 --> <div> <P>段落1</P> <span> <img/> </span> </div> </body> </html>
5.HTML实体
实体:比如我们想在一个网页中打出这样的 <hr> 的文字显示,如果直接打的话就会以水平线的方式显示,那么这个时候就需要使用实体(相当于java中的转义符)。
例: <hr&ft;
注意:实体名称和实体编号 后面要加 分号";"的。
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
< | 小于号 | < | < |
> | 大于号 | &ft | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | &apos | ' |
© | 版权 | © | © |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
™ | 商标 | &trade | ™ |
® | 注册 | ® | ® |
5.HTML 全局属性
属性 | 描述 |
---|---|
accesskey | 规定激活元素的快捷键。 |
class | 规定元素的一个或多个类名(引用样式表中的类)。 |
contenteditable | 规定元素内容是否可编辑。 |
contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
data-* | 用于存储页面或应用程序的私有定制数据。 |
dir | 规定元素中内容的文本方向。 |
draggable | 规定元素是否可拖动。 |
dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接。 |
hidden | 规定元素仍未或不再相关。 |
id | 规定元素的唯一 id。 |
lang | 规定元素内容的语言。 |
spellcheck | 规定是否对元素进行拼写和语法检查。 |
style | 规定元素的行内 CSS 样式。 |
tabindex | 规定元素的 tab 键次序。 |
title | 规定有关元素的额外信息。 |
translate | 规定是否应该翻译元素内容。 |