HTML入门介绍(上)

16/07/14

HTML的介绍

• HTML指的是超文本标记语言（Hyper Text Markup Language）
• HTML不是一种编程语言，而是一种标记语言（markup language）
• 标记语言是一套标记标签（markup tag）
• HTML使用标记标签来描述网页

HTML文档

• HTML文档包含HTML标签和纯文本，HTML文档也被称为网页
• 浏览器的作用就是读取HTML文档，并以网页的形式显示出他们

HTML常用标签

• 示例

  
  
  My First Heading
  My first paragraph.
  
  
  

例子解释

• 与 之间的文本描述网页
• 与 之间的文本是可见的页面内容

• 与

  之间的文本被显示为标题

• 与

  之间的文本被显示为段落

最常用的HTML标签

1. HTML标题：

   -

   (请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替)

2. HTML段落：

   标签

3. HTML链接：标签（在href属性中指定链接的地址）
   ![](https://www.baidu.com/img/bd_logo1.png)

4. HTML水平线：

   ---

   标签用于在HTML页面中创建水平线

5. HTML注释：``

6. HTML折行：
   标签（在希望不产生一个新段落的情况下进行换行）

This is
a para
graph with line breaks

4.HTML图片：标签

HTML元素

• HTML元素指的是从开始标签到结束标签的所有代码
• HTML元素的内容是开始标签与结束标签之间的内容

  
  
  
My first paragraph.
  
  

例如在以上代码中，HTML元素内容是另一个HTML元素（body元素），而body元素内容为另一个HTML元素（p元素），p元素内容为 my first paragraph.

HTML属性

• 属性总是以名称/值对的形式出现，比如：name = “value”

• 属性总是在HTML元素的开始标签中规定

  This is a link
  

HTML样式

1.外部样式

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。(需要在内部创建一个.css后缀的文件，里面写入要给元素设置的样式eg:body{backgorund-color:yellow})

2.内部样式

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

3.行内样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。

 

 This is a paragraph
 

4.CSS遵循的规律

• 就近原则（按照最近css设置的样式为准）
• 叠加原则（如果以前没有添加过的样式，按照新添加的样式为准）