HTML入门介绍(上)
2016-08-04 本文已影响67人
朱益达
16/07/14
HTML的介绍
- HTML指的是超文本标记语言（Hyper Text Markup Language）
- HTML不是一种编程语言，而是一种标记语言（markup language）
- 标记语言是一套标记标签（markup tag）
- HTML使用标记标签来描述网页
HTML文档
- HTML文档包含HTML标签和纯文本，HTML文档也被称为网页
- 浏览器的作用就是读取HTML文档，并以网页的形式显示出他们
HTML常用标签
-
示例
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
例子解释
- <html> 与</html> 之间的文本描述网页
- <body> 与</body> 之间的文本是可见的页面内容
- <h1> 与</h1> 之间的文本被显示为标题
- <p> 与</p> 之间的文本被显示为段落
最常用的HTML标签
-
HTML标题：<h1> - <h6>(请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替)
-
HTML段落：<p>标签
-
HTML链接：<a>标签（在href属性中指定链接的地址）
 -
HTML水平线：
标签用于在HTML页面中创建水平线 -
HTML注释：``
-
HTML折行：
标签（在希望不产生一个新段落的情况下进行换行）
<p>This is<br />a para<br />graph with line breaks</p>
4.HTML图片：<img>标签
HTML元素
- HTML元素指的是从开始标签到结束标签的所有代码
- HTML元素的内容是开始标签与结束标签之间的内容
<html>
<body>
<p>My first paragraph.</p>
</body>
</html>
例如在以上代码中，HTML元素内容是另一个HTML元素（body元素），而body元素内容为另一个HTML元素（p元素），p元素内容为 my first paragraph.
HTML属性
-
属性总是以名称/值对的形式出现，比如：name = “value”
-
属性总是在HTML元素的开始标签中规定
<a href="http://www.w3school.com.cn">This is a link</a>
HTML样式
1.外部样式
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。(需要在内部创建一个.css后缀的文件，里面写入要给元素设置的样式eg:body{backgorund-color:yellow})
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
2.内部样式
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style>
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3.行内样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
4.CSS遵循的规律
- 就近原则（按照最近css设置的样式为准）
- 叠加原则（如果以前没有添加过的样式，按照新添加的样式为准）
