HTML 基础1

2017-06-13 本文已影响0人陈皮的柚子怪

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	规定是否应该翻译元素内容。

HTML 基础1

Web笔记首页目录

猜你喜欢

热点阅读