1>HTML的文档结构
html有自己的结构,基本结构如下
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
如下实例
<!DOCTYPE html> 声明为 HTML5 文档
<html> 标签是 HTML 页面的根标签,所有的网页标签都在<html></html>中
<head> 标签包含了文档的元(meta)数据,常见的头部标签有<title>、<script>、<style>、<link>和<meta>等
<title> 标签描述了文档的标题
<body> 标签包含了可见的页面内容,标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等
<h1> 标签定义一个大标题,有h1~h6几类
<p> 标签定义一个段落
2>HTML注释
<!--这里是注释的内容-->
们习惯用注释的标签把HTML代码包裹起来。如:<!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 -->
3>head标签相关
文档的头部描述了文档的各种属性和信息,包括文档的标题、编码方式及URL等信息,
这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端)的等。 以下标签是可以用在head标签中的:
<head lang='en'>
<title>标题信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>
--->title标签:title标签的内容会显示在网页的页签上,可以看成是网页的标题
--->meta标签:meta标签位于文档头部,不包含任何内容,提供的信息是用户不可见的,meta标签共有两个
属性:http-equiv属性和name属性
4>body标签相关
6.1>标题标签 h1~h6
6.2>段落标签 p
跟普通文本一样,可以通过css来设置样式,并且它也属于快级标签,是独占一行的。
6.3>超链接标签 a
a是anchor(锚点)的简写,代表一个连接点
注意点:
返回页面顶部的空链接或具体id值的标签 例如:<a href="#">内容</a>或<a href="#id值">内容</a>
6.4>列表标签 ul,ol
网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟
<li>
标签一起用,每条li表示列表的内容。
<ul>
:unordered lists的缩写 无序列表 <ol>
:ordered listsde的缩写 有序列表。
ol标签的属性:
type:列表标识的类型
- 1:数字
- a:小写字母
- A:大写字母
- i:小写罗马字符
- I:大写罗马字符
列表标识的起始编号
- 默认为1
ul标签的属性:
- disc:实心圆(默认值)
- circle:空心圆
- square:实心矩形
- none:不显示标识
6.5>盒子标签 div
<div>
可定义文档的分区 division的缩写 译:区 <div>
标签可以把文档分割为独立的、不同的部分,
<div id='wrap'>
<div class='para'></div>
<div class='anchor'></div>
<div class='para'></div>
<div class='lists'></div>
</div>
我们将文档放在一个父级的区(div)中,它里面包含四块区(div)域,浏览器查看效果,你会发现每小块
区域都是独占一行的,所以div是块级元素。另外,每块区域表示独立的一块,id属性和class属性其实很简单,
你可以看成给这个区域起个名字。id是唯一的,一个页面中不能有两个重复的id,跟身份证号码一样,class可
以设置同样的属性值,并且可以设置多个,例如class=’para n1‘
6.6>图片标签 img
一个网页除了有文字,还会有图片。我们使用<img/>
标签在网页中插入图片。
语法:<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
6.7>其他标签
换行标签 <br>
分割线 <hr>
特殊符号
6.8>表格标签table
表格由<table>
标签来定义。每个表格均有若干行(由 <tr>
标签定义),每行被分割为若干单元格(由<td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、
列表、段落、表单、水平线、表格等等
基本框架
表格行和列的合并
rowspan 合并行(竖着合并)
colspan 合并列(横着合并)