HTML 基础1

作者: 陈皮的柚子怪 | 来源:发表于2017-06-13 13:28 被阅读0次

HTML 基础 1
HTML基础（1）
HTML 基础1
HTML基础1
HTML基础（1）
HTML基础 --- 1
HTML基础1
HTML 基础-1
html基础1
HTML基础1

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;  
  注意：实体名称和实体编号 后面要加 分号";"的。

显示结果	描述	实体名称	实体编号
<	小于号	&lt	&#60
>	大于号	&ft	&#62
&	和号	&amp	&#38
"	引号	&quot	&#34
'	撇号	&apos	&#39
©	版权	&copy	&#169
×	乘号	&times	&#215
÷	除号	&divide	&#247
™	商标	&trade	&#8482
®	注册	&reg	&#174

HTML实体符号参考手册

5.HTML 全局属性

属性	描述
accesskey	规定激活元素的快捷键。
class	规定元素的一个或多个类名（引用样式表中的类）。
contenteditable	规定元素内容是否可编辑。
contextmenu	规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-*	用于存储页面或应用程序的私有定制数据。
dir	规定元素中内容的文本方向。
draggable	规定元素是否可拖动。
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden	规定元素仍未或不再相关。
id	规定元素的唯一 id。
lang	规定元素内容的语言。
spellcheck	规定是否对元素进行拼写和语法检查。
style	规定元素的行内 CSS 样式。
tabindex	规定元素的 tab 键次序。
title	规定有关元素的额外信息。
translate	规定是否应该翻译元素内容。