2-HTML基本结构及常用的标签
2016-12-20 本文已影响32人
饥人谷_刘冲
一.网页是什么
-
网页的组成部分
一个网页由Html+CSS+JavaScript三部分构成。
Html: 定义网页元素内容
CSS: 控制网页样式
JavaScript：操作网页内容，实现功能或者效果
-
网页的基本格式
如下面的代码就是一个标准的HTML网页，里面包含Html，CSS，JavaScript三部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选项卡标题</title>
<style>
h1{
color: red;
}
p{
background-color: #ff00ff;
}
</style>
</head>
<body>
<h1>这里是文章标题</h1>
<p>这是一个段落</p>
<script>
alert(1);
</script>
</body>
</html>
二.HTML的基本结构
-
HTML的最简单格式：
一个最基本的HTML页面由文档申明如<!DOCTYPE html>和一个HTML容器组成。而HTML容器里面由<head>部分和<body>两部分组成。所有其他标签都在这两个标签里面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
</body>
</html>
三.HTML基本语法规则
1.所有标签都必须包含在<html></html>容器中。
2.HTML中的标签一般都是成对出现的，一个是开始标签一个是结束标签。如<html></html> <body></body>,但也有单标签，如<meta charset="UTF-8"/>。
3.结束标签必须有“/”，若是单标签则用“/>”来结束开始标签。例如<br /> <hr />.
4.属性的引用必须要有双引号。例如<td rowspan="3">。
5.所有的标签必须合理地嵌套,如<body><p>这是段落</p></body>。
四.HTML的常用标签概览
-
[<!DOCTYPE>]
单独列出说明：[<!DOCTYPE>]是HTML的文档声明，用于定义文档的类型。但是根据W3C官方定义它不是一个HTML标签。
- 基础标签
| 标签 | 描述 |
|---|---|
<html> |
定义 HTML 文档。 |
<title> |
定义文档的标题。 |
<body> |
定义文档的主体。 |
<h1>-<h6>
|
定义 HTML 标题。 |
<p> |
定义段落。 |
<br> |
定义简单的折行。 |
<hr> |
定义水平线。 |
<!--....--> |
定义注释。 |
注：上述标签引用于w3c
- 其它常用标签
| 标签 | 描述 |
|---|---|
<div> |
定义文档中的节，即页面的一个区块。 |
<span> |
定义文档中的节，组合行内元素，以便通过样式来格式化它们 |
<img> |
定义图像 |
<ol> |
定义有序列表 |
<ul> |
定义无序列表 |
<dl> |
定义定义列表 |
<a> |
定义超链接 |
<button> |
定义按钮 |
<table> |
定义表格 |
<form> |
定义输入的HTML表单 |
- HTML全局属性
| 属性 | 描述 |
|---|---|
| accesskey | 规定激活元素的快捷键 |
| class | 规定元素的一个或多个类名（引用样式表中的类） |
| contenteditable | 规定元素内容是否可编辑 |
| data | 自定义属性 |
| dir | 规定元素中内容的文本方向 |
| draggable | 规定元素是否可拖动 |
| id | 规定元素的唯一 id |
| lang | 规定元素内容的语言 |
| spellcheck | 规定是否对元素进行拼写和语法检查 |
| style | 规定元素的行内 CSS 样式 |
| tabindex | 规定元素的 tab 键次序 |
| title | 规定有关元素的额外信息 |
| translate | 规定是否应该翻译元素内容 |
注：以上属性引用于饥人谷课件
