HTML第一篇 - 爱码网

html分为三部分：

1、文档声明：

<!DOCTYPE HTML>

告诉浏览器使用什么样的html或xhtml规范来解析html文档

2、head区域：

是元信息和网站的标题元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息

<title>
<base/>
<link/>（rel、href、type）
<meta/>（http-equiv、name、content）

3、body区域：

是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意

块级标签 <p><h1><table><ol><ul><form><div>

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素

　　2.内联标签 <a><input><img><sub><sup><textarea><span>

　　① 和其他元素都在一行上；
　　② 高，行高及外边距和内边距不可改变；
　　③ 宽度就是它的文字或图片的宽度，不可改变
　　④ 内联元素只能容纳文本或者其他内联元素

基本标签（<h1>~<h6>、<p>、<b> <strong>、<strike>、<u>、<em> <i>、<sup>、<sub>、<br>、<hr>、<div>、<span>）
特殊符号（>、<、 、"、©...）
<a> 超链接标签(锚标签)（href、target、name）
<img> 图形标签（src、title、alt、width、height、align）
列表标签（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）
<table> 表格标签（<table> 、<caption> 、<tr>、<th>、<td>、<thead>、<tbody>、rowspan、colspan）
<from> 表单标签（action、method、enctype、<input>、<textarea>、<select>、<label>、<fieldset>）

HTML三部分的详解：

<head>标签：

1.定义编码格式：

<meta charset="UTF-8">  #定义编码为utf-8

2.刷新跳转：

<meta http-equiv="refresh" content="5">     # 5秒跳转

<metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/mosson/" />   #跳转至新的博客地址

3.关键字

一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中

<meta name="keywords" />

4.描述

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

5.<title>

<title>我是显示在浏览器头的内容</title>

6.<link>:常用的有三个属性：rel、href、type

rel 规定文档与被链接文档之间的关系。

rel="dns-prefetch" 预先解析缓存文档中使用的域名，目的是为了提高网页访问速度。使用场景：在一个网页频繁使用其他域名资源时。
rel="shortcut icon"或rel="icon" 在收藏和标题栏上用于显示的图标。示例：<link rel="icon" href="http://images.cnblogs.com/likecs_com/suoning/845162/o_s.png">。注意：IE浏览器只支持ico格式，为了兼容IE，图片文件采用ico格式
rel="stylesheet" 引用外部样式表
rel="nofollow" 用于指示搜索引擎不要追踪（爬虫抓取），减少垃圾链接。用于<a>标签，使用场景：网页不被信任或是不希望呗搜索引擎录入的网站。

href 资源的路径（相对路径/绝对路径）

type 规定被连接文档的MIME类型，用于明确文件的打开方式。例如：.ico文件 image/x-icon。

7.<style>

　　在当前文件中写Css样式

　　在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

8.<script>

　　在当前文件中写JS

　　在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

<body>标签：

1.body中的常用标签：

<h1>~<h6> 标题标签.

<a> 超链接标签用于跳转到其他的页面

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

　　　　style="text-indent: 2em"可以设置样式为首行缩进两个字符。

　　　　<blockquote></blockquote>可以用来设置整个段落的缩进。

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<u>: 文字下方加下划线.

<em> <i>: 文字变成斜体.

<sup>和<sub>: 上角标和下角标.

<br>:换行.

<hr>:水平线.

<div>

块级标签。块级标签常用于布局，行级标签常用语显示内容。

　　 div的显示通常使用id或class来标识。id为唯一的标签标识，class为标签的类标识。

　　 div的大小是由内容来决定的，默认情况下，高度由内容的高度决定，宽度适应屏幕。

　　可以容纳其他元素，是一个容器。

<span>

2.特殊的符号：

特殊符号    符号码
"    &quot ;
&    &amp ;
<    &lt ;
>    &gt ;
©   &copy ;
®   &reg ;
±   &plusmn ;
×   &times ;
§   &sect ;
¢   &cent ;
¥   &yen ;
·   &middot ;
    &euro ;
£   &pound ;
™   &trade ;

3.<a>标签：常用的属性：href、target、name

　　href:要连接的资源路径格式如下: href="http://www.baidu.com"

　　target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

　　name: 定义一个页面的书签.

<a href="http://www.cnblogs.com/mosson/l"  target="_blank">猛戳这里</a>

4.列表标签：

<ul>: 无序列表

　　<ol>:有序列表

　　 <li>:列表中的每一项.

　　　　　li 的常用属性：type指明项目的类型，属性值有：A，a，I，i，1，disc（实心圆），square（实心正方形），circle（空心圆）。

　　<dl> 定义列表

　　 <dt> 列表标题

　　<dd> 列表项

5.<img>图形标签：重要属性有：src、title、alt、width、height、align。

　　src 图片的路径。

　　title 鼠标悬浮在图片上的文字。

　　alt 图片找不到时要替换的文字。如果图片资源使用的是外网资源，则不会显示要替换的文字。如果使用的是本网站的资源（相对路径给出），则找不到图片时会显示替换的文字，并保留图片设置的宽高结构。

　　align 图片周围文字的垂直对齐情况（过时了）。常用的属性值有：top（与图片的顶部对齐）、middle（与图片的中部对齐）、bottom（默认，与图片的底部对齐）。

　　width 图片的宽

　　height 图片的高 (宽高两个属性只用一个会自动等比缩放.)

<img src="http://www.cnblogs.com/mosson/" alt="图片加载失败。。。" title="The knife girl, kiss"/>

6.<table>表格标签：

　　border: 表格边框.

　　cellpadding: 内边距

　　cellspacing: 外边距.

　　width: 像素百分比.（最好通过css来设置长宽）

　　<tr>: table row 表格的数据行

　　 <th>: table head cell 表格的表头名称，与<td>不同在于文字采用加粗居中的形式显示

　　<td>: table data cell 单元格，用来显示表格内容

　　rowspan: 单元格竖跨多少行

　　colspan: 单元格横跨多少列（即合并单元格）

　　<th>: table header <tbody>(不常用): 为表格进行分区.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>Title</title>
</head>
<body>
<table border="1" >
    <caption>无聊的小婊砸</caption>
    <thead>
            <tr align="center">
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>女神</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <th>1.</th>
                <td>拉克丝</td>
                <td>18</td>
                <td>是男人</td>
            </tr>
            <tr align="center">
                <th>2.</th>
                <td>炮娘</td>
                <td>21</td>
                <td>是男人</td>
            </tr>
        </tbody>
</table>

</body>
</html>

效果图：

HTML第一篇

表格合并单元格

 <table border="" cellspacing="1" cellpadding="1" style="width: 300px;height: 100px;color: #FC0D51;background-color: #9E9C9C;text-align: center">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
        </tr>
        <tr>
            <td colspan="3">1 2 3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td rowspan="2">6 9</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>

        </tr>
    </table>

合并单元格