标签：html   空格   height   cti   submit   匹配   列表   行高   换行   

1. HTML常用标签

1.1 <meta>

META标签是HTML标记HEAD区的一个关键标签，提供文档字符集、使用语言、作者等基本信息，以及对关键词和网页等级的设定等，最大的作用是能够做搜索引擎优化（SEO）。

两个主流网站meta属性

<!-- 淘宝 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="spm-id" content="a21bo">
<meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品，同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务，让你全面安心享受网上购物乐趣！">
<meta name="keyword" content="">

<!-- 斗鱼 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<name="keywords" content="DOTA2,热门游戏直播,游戏直播,高清游戏直播,手机游戏直播,电子竞技直播" />
<meta name="description" content="斗鱼 - 全民直播平台提供高清、快捷、流畅的视频直播和游戏赛事直播服务，包含DOTA2等各类热门游戏赛事直播和各种名家大神游戏直播，内容丰富，推送及时，带给你不一样的视听体验，一切尽在斗鱼 - 全民直播平台。" />

1.2 <h1>-<h6>

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义，因此需要慎重地选择恰当的标签层级来构建文档的结构。而且不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

1.3 <p>

<p>标签定义段落，是插入大段文字的首选方法。

1.4 <ul>及<ol>

<ul>定义无序列表，<ol>定义有序列表，在其中都使用<li>来添加列表项。

1.5 <blockquote>及<q>

这两个标签都是定义引用。<blockquote> 标签定义一个块引用，<q> 标签定义一个短的引用。<blockquote>标签之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。<q> 标签在本质上与<blockquote>是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签。

1.6 <span>

<span>标签被用来组合文档中的行内元素。<span>没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

1.7 <a>

<a> 标签可定义锚。锚 (anchor) 有两种用法：

通过使用 href 属性，创建指向另外一个文档的链接（或超链接）

通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）

<a> 元素最重要的属性是 href 属性，它指定链接的目标。

1.8 <img>

<img>元素可定义一幅图像

1.9 <div>

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

1.10 <form>

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

1.11 input

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

    <input type="text" placeholder="请输入账号" />
    <input type="password" maxlength="6" />
    <input type="button" value="点击我" />
    <input type="reset" value="清空" />
    <input type="submit" value="提交" />
    <button>新的提交按钮</button>

    <label for="male">男</label>
    <input type="radio" name="sex" id="male" />
    <label for="female">女</label>   
    <input type="radio" name="sex" id="female" />

    班长<input type="checkbox" />
    学委<input type="checkbox" checked />
    纪委<input type="checkbox" />

    <select name="" id="">
        <option value="">北京</option>
        <option value="">南京</option>
        <option value="">东京</option>
        <option value="">西京</option>
    </select>

    <textarea name="" id=""></textarea>

2. CSS常用选择器

2.1 CSS基本语法

CSS 语法由三部分构成：选择器、属性和值：

selector {property: value}

选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：

body {color: blue}

上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。

2.2 元素选择器

p{
    property: value;
}

直接使用元素名来选择一类标签

2.3 类选择器

.head{
    property: value;
}

使用"."加类名来选择所有包含这个类的元素

2.4 ID选择器

#username{
　　property: value;
}

使用"#"加ID来选择该ID的元素

2.4 伪类选择器

a:hover{
　　property: value;
}

伪类用于向某些选择器添加特殊的效果。下面是几个伪类的作用：

2.5 伪元素选择器

伪元素选择器暂时只有这4个。

2.6 后代选择器

p ul li{
　　property: value;
}

使用空格来进行对后代元素的选择，而子元素选择器则是特殊的后代选择器，仅能选择该父辈的子辈中的元素。

p>span{           //只能选择属于p子辈的span元素
　　property: value;
}

2.7 并集选择器

p, h1, blockquote{
　　property: value;
}

同时选择多个元素。

3. CSS常用属性

3.1 background属性

background-color        //颜色
background-image        //选择图片
background-repeat       //平铺图片
background-position     //调整位置
background-attachment   //固定背景
background-size         //大小

3.2 font属性

font-size             //大小
font-family           //字体
font-weight           //粗度
font-style            //倾斜
line-height           //行高
text-shadow           //阴影

3.3 text属性

　　text-decoration       //装饰
　　text-align            //对齐方式
　　text-indent           //缩进

3.4 border属性

　　border: 宽度 样式 颜色

还有很多没有提到的会在后面补上。

html及css小结

标签：html   空格   height   cti   submit   匹配   列表   行高   换行   

原文地址：http://www.cnblogs.com/GP-233/p/7105491.html