一、block块级标签：可以设置宽和高的标签

1、div：无意义的盒子

<div style="width:100px;height:100px;background-color:red;"></div>

2、 h1~h6

标题一共有六个，h1～h6，并且依据重要性递减，字体有加粗效果。h1是最高的等级。有默认margin值。

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

我是一级标题

我是二级标题

我是三级标题

我是四级标题

我是五级标题

我是六级标题

3、 p段落

有默认margin值

<p>我是一个段落</p>

4、 列表

（1）有序列表ol

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

1. 列表项1


2. 列表项2

（2）无序列表ul

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

• 列表项1


• 列表项2

ol和ul必须要和li嵌套使用。根据书写规范来说：中间不能添加其他标签，如果要添加其他标签内容的话就在li标签里添加

要注意的是，ul和ol是块级标签，但是li不是块级标签，之所以li可是设置宽和高，是因为li继承了父级的块级属性，li其实属于 display: list-item;

（2）自定义列表

<dl>//自定义列表
    <dt>汉字</dt>//列表标题
    <dd>是用于书写汉语的文字[1]  ，也可被借用于书写日语、朝鲜语（韩语）等语言。</dd>//列表内容
    <dt>洛阳纸贵</dt>
    <dd>称颂杰出的作品风行一时。</dd>
</dl>

汉字

是用于书写汉语的文字[1] ，也可被借用于书写日语、朝鲜语（韩语）等语言。

洛阳纸贵

称颂杰出的作品风行一时。

dl,dt,dd要嵌套配合使用。根据书写规范来说：中间不能添加其他标签，如果要添加其他标签内容的话就在dt和dd标签里添加

5、 form表单:用于为用户输入创建HTML表单

<form action="test.php" method="get"></form>

有属性：

（1）actoin属性 输入的数据被传送到的地址，比如一个PHP页面（test.php）

（2）method属性 数据传送的方式（比较常见：post（保密性较强）、get（保密性差，显示到地址框上）

form标签里嵌套的是input标签

6、hr分割线标签

<p>几号放假？</p>
<hr />
<p>大家好啊！</p> 

几号放假？

大家好啊！

6、blockquote标签：长文本引用。

7、pre标签：预格式化的文本 要插入多行代码时不能使用code标签，如果是多行代码，可以使用pre标签。

<pre>
    var i = 0;
    var j = 0;
</pre>

    var i = 0;
    var j = 0;

8、address标签：为页面加入地址信息，样式为斜体。

<address>上海市</address>

二、inline-blck行块级标签

1、input标签

（1）text文本

<label>姓名：</label><input type="text" name="username" value="请输入姓名" />

<label>荔枝：</label><input type="checkbox" name="" value="荔枝" checked />

    <label>苹果：</label><input type="checkbox" name="" value="苹果" />

<label>香蕉：</label><input type="checkbox" name="" value="香蕉" checked />

荔枝：

苹果：

香蕉：

• value 提交数据到服务器的值（后台程序PHP使用）

• name 为控件命名，以备后台程序ASP、PHP使用

• checked 当设置checked 或 checked=”checked”时，该选项被默认选中

• 注意：同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用

5、button：按钮

<input type="button" name="button" value="按钮" />

6、sumbit：发送

<input type="submit" name="submit" value="发送" />

顾名思义，button就是有按钮点击作用，submit有发送到服务器端的作用

7、textarea文本域标签

<textarea></textarea>

可鼠标拖动改变文本域框的大小，可以设置最多输入多少行，多少列

• cols属性 ：多行输入域的列数

• rows属性 ：多行输入域的行数

8、select标签：下拉列表框。

<select>
    <option>面包</option>
    <option>牛奶</option>
    <option>奶酪</option>
</select>

<select multiple>
    <option>面包</option>
    <option>牛奶</option>
    <option>奶酪</option>
</select>

//按住command键，可实现多选。

• multiple属性 可以实现多选功能，但是样式会发生改变。

• option 下拉选项

三、table标签

1、table表格

（1）table tbody这个标签基本上不怎么用了

（2）tr 表格的一行

（3）th 表格的头部的一个单元格，表格表头

（4）td 表格的一个单元格

（5）caption 表格标题

（6）summary属性 表格的摘要

<table summary="水果价格表">
    <caption>表格标题</caption>
    <tr>
        <th>香蕉</th>
        <th>草莓</th>
        <th>荔枝</th>
    </tr>
    <tr>
        <td>5元/斤</td>
        <td>10元/斤</td>
        <td>10元/斤</td>
    </tr>
</table>

四、inline行级标签

1、em 和 strong

两者都是强调，但是两者在强调语气上有区别：em 表示强调；strong 表示更强烈的强调

我是em

我是strong

2、span：和div差不多无意义，但多是用来包含字符。

3、q：短文本引用 比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么标签是你所需要的。

五、其他标签

1、label标签：为input元素定义标注（标记）

2、br标签：换行

3、a:超链接

• href属性 ：链接目标，必不可少的

• title属性

• target

4、img图片：为网页插入图片

<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTkYnz8GgqSaflPuEsnKbJrxZMGouOYLj0eOjYm25PlEldrBhsGDg" title="可爱小猪" alt="可爱小猪图片" />

把鼠标移动到图片上看看

• src 图像的位置，必不可少的

• title 提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)

• alt 指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

5、code标签 ：在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用code标签了。

<code>
    var i = 0;
    var j = 0;
</code>


var i = 0;
var j = 0;


以上标签都可以通过设置css样式改变标签属性，display:block(块级)|inline（行级）|inline-block（行块级）|table（表格级）|table-cell（表格行级）|table-rows（表格单元级）进行转换

^_^

上节我们回顾到搜索引擎索引方式，这节我们接着往下回顾。。。

（七）页面重定向和刷新

<meta http-equiv="refresh" content="0;url=" />//表示0秒后刷新，如果加url，则会重定向到指定网页。

搜索引擎能够自动检测，也很容易被引擎视为误导而受到惩罚，因此要慎用。

（八）网页作者信息

<meta name="author" content="author name" />

（九）移动设备自适应

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />

说到移动设备自适应，大家应该知道对于想要从事移动端的同学来说“移动设备自适应”是非常重要的，因此同学们要好好掌握。。。

（十）WebApp全屏模式：伪装app，离线应用。

<meta name="apple-mobile-web-app-capable" content="yes" />

（十一）隐藏状态栏/设置状态栏颜色

<meta name="apple-mobile-web-app-status-bar-style"content="black-translucent" />  

1、 content的值为default | black | black-translucent

2、只有在开启WebApp全屏模式时才生效

（十二）添加到主屏后的标题

<meta name="apple-mobile-web-app-title"content="标题">  

content的值为default | black | black-translucent

（十三）忽略数字自动识别为电话号码

<meta content="telephone=no"name="format-detection" />  

（十四）忽略识别邮箱

<meta content="email=no"name="format-detection" />

^_^

“meta”标签对于初学者来说并不是很陌生，一说起”meta”标签在html文档里的作用是什么时，会毫不犹豫的说是表示文档编码格式，这样的说法虽然没什么大错，但是对于学习较深的人来说这无疑是不全面的，因为对于meta标签的使用除了编码格式外，还有很多的用处。就如需要掌握的很重要的知识“响应式布局”、“页面关键词”、“搜索引擎索引方式”等。因此今天就”meta”标签的知识进行回顾总结。

meta标签介绍

在之前”HTML文档标准及注意事项“介绍过什么是单表签和双标签，因此就不过多介绍了。而”meta”标签是一个单标签，虽然”meta”标签在不闭合的情况下不会出现错误，但是”meta”标签在书写时一定要进行闭合。。。

meta标签应用场景

（一）声明编码

<meta charset="utf-8" />//不进行设置的话就会出现在浏览器显示汉字时会成为乱码

其实”meta”申明编码有很多种,就国内的常用编码格式有”utf-8”和”gb2312”两种。

（二）优先使用最新版本的IE和Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
//实现对IE和Chrome浏览器最大兼容性

（三）浏览器内核控制

<meta name="renderer" content="webkit|ie-comp|ie-stand" />

国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择任何种内核渲染。

（四）页面关键字

<meta name="keywords" content="tags," />

页面关键字在生活中随处可见，比如你到商场有目标的买一样东西时，你会根据商场的分类提示更容易的找到你所想要买的东西，就如买水果到水果区，买衣服到服装区。而对于我们来说就是为了当人们想在网上查询一样东西时，爬虫在检索网页时把页面关键词有相关的输入词的给提取出来，让查询者找寻自己想要的东西。因此这个多用于网站优化,使其网站搜索引擎排名在前位。

在使用关键字标签”Keywords”时，要注意以下几点：

1. 不同的关键词之间，应用半角逗号隔开(英文输入状态下)，不要使用“空格”或“|”间隔;

2. 关键字标签中的内容要与网页核心内容相关，确信使用的关键词出现在网页文本中。

3. 使用用户易于通过搜索引擎检索的关键字，过于生僻的词汇不太适合做META标签中的关键词。

4. 不要重复使用关键词，否则可能会被搜索引擎惩罚。

5. 一个网页的关键词标签里最多包含3-5个最重要的关键词，不要超过5个。

6. 每个网页的关键词应该不一样。

关键字标签”Keywords”，曾经是搜索引擎排名中很重要的因素，但现在已经被很多搜索引擎完全忽略。如果我们加上这个标签对网页的综合表现没有坏处，不过，如果使用不恰当的话，对网页非但没有好处，还有欺诈的嫌疑。

（五）页面描述

<meta name="description" content="120|150 words" />//在120～150字符之间，不超过150字符

（六）搜索引擎索引方式

<meta name="robots" content="index,follow" />//文件将被检索，且页面上的链接可以被查询

all:文件将被检索，且页面上的链接可以被查询；等价于index,follow。

none:文件将不被检索，且页面上的链接不可以被查询；等价于noindex，nofollow。

index:文件将被检索

follow:页面上的链接可以被查询

noindex:文件将不被检索

nofollow:页面上的链接将不可以被查询

例如：

<meta name="robots" content="noindex" />//此网页不被搜索索引进数据库，但搜索引擎可以通过此页面的链接索引其它页面。

<meta name="robots" content="nofollow" />//此网页可以被搜索索引进数据库，但搜索引擎不可以通过此页面的链接索引其它页面。

<meta name="robots" content="none" />//此网页不被搜索索引进数据库，且搜索引擎不可以通过此页面的链接索引其它页面。

针对谷歌使用robots

<meta name="googlebot" content="noindex,nofollow" />//将name的属性只定义为GOOGLEBOT标识为谷歌搜索引擎。 使用元标记拦截或删除网页。

针对百度使用robots

<meta name="baiduspider" content="noarchive" />//将name的属性只定义为baiduspider标识为百度搜索引擎。禁止搜索引擎收录的方法。

^_^

上一篇我分享了一下有关background的，今天我们来一起解析一下border，看看border有哪些样式。。。

对边框进行样式的设置时，你第一想到的可能就是边框颜色是什么色，宽度是多宽，有什么样的边框。那我们就按这样的顺序进行一一的分析。

1、border-color

顾名思义，可以看出是设置边框border的颜色

上一篇写到background-color，你也许会想到border-color是不是也和background-color一样具有三种属性值，bingo，它也具备一样的三种属性值，那来让我们一起去看一下吧！！！

• 主要介绍以下三种边框色属性值

可以为英语代码，例如：

div{
    width:50px;
    height:50px;
    border-style:solid;//边框为实线，在下面我们会了解到
    border-color:red;
}
结果：一个宽和高都为50px的且带有红色的实线边框方块

可以为16进制颜色码，例如：

border-color:#000;

可以为rgb格式：

border-color:rgb(225,182,193);
其中，r代表red红色，g代表green绿色，b代表blue蓝色。

注意:

1、border-color有默认值:

默认颜色值是字体颜色，默认的字体颜色是黑色

2、border-color可以分方向的设置边框色

border-left-color:;//左边框
border-top-color:;//上边框
border-right-color:;//右边框
border-bottom-color:;//下边框

3、border-color也可以有多个属性值

border:red;//边框的四个方向都为red
border:red blue;//上下边框为red，左右边框为blue
border:red green blue;//上边框为red，左右边框为green，下边框为blue
border:red green blue yellow;//上边框为red，右边框为green，下边框为blue，左边框为yellow

2、border-width

在设置border-width时你可能会问：“border-width和border-color一样有多个属性值写法吗？”，这次可能让你失望了，border-width是没有的，它只有数值这一种。。。

• 边框宽度属性值

为数值，例如：

div{
    width:50px;
    height:50px;
    border-style:solid;//边框为实线，在下面我们会了解到
    border-width:2px;//边框的宽度为2像素
}
结果是一个宽和高都为50px，带有2px实线边框的方框

注意:
1、border-width有默认值:

默认值为3px

2、border-width的属性值不能为负数

3、border-width和border-color是一样可以分方向进行设置，而且规则是一样的，在这里就不过多的解释了

3、border-style

我们主要介绍一下比较常见的一些边框样式

常用的：

solid:实线
dotted:点状线
dashed:虚线

不常用：

double:双实线
groove:3D凹槽，有兼容性问题，火狐支持的很好
inset:左上
outset:右下
ridge:3D垄状边框，有兼容性问题，火狐支持的很好

例如：

div{
    width:50px;
    height:50px;
    border-style:solid;
}
结果是一个宽和高都为50px，带有实线边框的方框

注意:
1、border-style没有默认的样式，如果不进行border-style的设置，将不会看到边框

2、border-style和border-color也是一样可以分方向进行设置，而且规则也是一样的，在这里也就不过多的解释了

border和background一样，也是有复合写法的，那让我们一起了解一下border的复合写法吧！！！

4、border的复合写法

border:border-color border-width border-style
没有固定的书写顺序，可以任意排列。

例如：

border: 1px red solid;//宽度为1px，颜色为red的实线边框

^_^

background

1、背景色(background-color)

主要介绍以下三种背景属性值

可以为英语代码，例如：

div{
    width:50px;
    height:50px;
    background-color:red;
}
结果：一个宽和高都为50px的红色方块

可以为16进制颜色码，例如：

background-color:#000;

可以为rgb格式：

background-color:rgb(225,182,193);
其中，r代表red红色，g代表green绿色，b代表blue蓝色。

例如：

div{
        width:40px;
        height:40px;
        background-image:url("img/tu.png");
    }
给div区域加了一个背景图片。

注意:

• url(“图片路径”);可以是本地的图片路径，也可是线上的有效路径。图片不能用数字1. 或是中文.

• 如果图片较小，则会从div的左上角开始

• 如果图片较大，则会充满div，多余的不显示，只显示div里的图片。

例如：

div{
    width:40px;
    height:40px;
    background-image:url("img/tu.png");
    background-position:10px 10px;
}
在div里对图片进行定位，是相对于div进行的定位，分别是沿x轴和沿y轴

注意:

background-position的值可以为正数，也可为负数，也可用百分数,也可以为left center right。

1、background-position:x y;

x:(0px, right, left，center)

y:(0px,top,bottom，center)

2、background-position:0px;

x轴和y轴移动相同的距离

3、backgroun-position:center;

x轴和y轴都在中间

4、background-position:left/right/top/bottom;

x轴和y轴谁能识别谁移动,不能识别的默认为center

例如：

div{
    width:40px;
    height:40px;
    background-repeat:no-repeat;
}

注意:

属性值：

1、no-repeat  不平铺

2、repeat-x 向着x轴平铺

3、repeat-y向着y轴平铺

div{
    width:40px;
    height:40px;
    background-image:url("img/tu.png");
    background-size:20px;
}
对图片的大小进行设置

注意:

• 如果是一个值，对图片进行相对放大或缩小；
• 如果是两个值，第一个值是宽，第二个值是高，会按照这个大小对图片进行改变。

background:background-color background-image background-position background-repeat;(推荐写法)

注意:

• background-position和backgrolund-repeat可以换位置，其他的则不可以。

body里设置background

在body里可以设置背景图片，但是背景图片不会遵从body的width、height的样式设置，因为背景是作用于可视区域的，而body的可视区域是浏览器的窗口。

在设置背景时，必须设置宽和高后才能显示出来，不然背景不会显示。因为背景不会撑开宽和高。

^_^

世界上的一切都必须按照一定的规矩秩序各就各位 ——莱蒙特

一个了解过html和学习过html的同学都知道html的文档标准是多么的重要，不论你是少些了一些标签，或是把标签的顺序写错了，那么你所写的代码就有可能报错或是出现乱码，而且一时半会儿你还找不到这个错误。。。

因此，我今天要分享一下xhtml的文档标准以及需要注意的事项

html文档标准

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />//编码格式
        <title></title>//文档标题
    </head>
    <body>
        //可视区域
    </body>
</html>

1、html表示文档的根目录，它包含head区域和body区域。

2、head区域一定要有title和meta，也就是文档标题和meta标签的charset属性指定文档的编码格式

3、所有可见内容都要放在body里面，body是该页面的可视化区域。

注意事项:

• 在html中有双标签和单标签。双标签是成双成对的出现的，有开始标签和结束标签;单标签的闭合方式不同于双标签,在末尾的地方”>“前面加上”/“,完成闭合.因此doctype不是标签。

双标签，例如：

<html></html>
<head></head>

单标签，例如：

<meta />

不是标签，例如：

<!doctype html>

• 所有的标签 属性 命名都要用小写，属性值用双引号。

例如：

<meta charset="utf-8" />

• 注意缩进，文档的结构才会清晰明了。
• body里面的内容，最好都要有标签嵌套。
• 内容不可写在head和html等地方。

例如：

<!doctype html>
<html>
    <div>我是一个div，是个双标签。没有什么意义，就是一个区域、块</div>
    <head>
        <meta charset="utf-8" />//编码格式
        <title></title>//文档标题
    </head>
    <body>
        //可视区域
    </body>
</html>
这样写是不对的。。。

• 标签顺序不能写错，也不能少写。

例如：

<!doctype html>
<html>
    <head>
        <title>我是标题</title>//文档标题
        <meta charset="utf-8" />//编码格式
    </head>
    <body>
        //可视区域
        你好！！！
    </body>
</html>
这样虽然不会出现汉字不可识别的情况，但这是不正确的书写格式。
如果把<meta charset="utf-8" />去掉会出现汉字不可识别，出现乱码的状况。

^_^

我的第一篇博客

记录

• 星期三

谭于磊的博客

来张喜欢的照片

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment