HTML、CSS常用技巧

一、HTML

在介绍HTML之前，我们先看一下HTML的文档树结构，主要包括哪些：

HTML、CSS常用技巧

（一）、头部标签

1，Doctype

Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档。

有和无的区别：

BackCompat：标准兼容模式未开启(怪异模式、混杂模式)；
CSS1Compat：标准兼容模式已开启(严格模式)。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat，这也就是恶魔的开始，浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式；

如果你的页面添加了那么就等同于开启了标准模式，浏览器会老老实实按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器显示的就都是一样的了。

有，用什么？

Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档，dtd文件则包含了标记、attributes、properties、约束规则，在这里推荐使用<!DOCTYPE html>。

更多规则请参考：https://hsivonen.fi/doctype/

2、Meta(metadata infomation)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词。

页面编码(告诉浏览器是什么编码)

1 2	`<meta` `http-equiv="content-type"` `content="text/html;charset=utf-8">` `<meta` `charset="utf-8">`

刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

关键词

1	`<` `meta` `name="keywords"` `content="python,java,C++,语言">`

3、Title(页面头部信息)

4、Link

CSS

1 2	`<link` `rel="stylesheet"` `type="text/css"` `href="css/common.css">` `<!--引入外部样式-->`

icon

1 2	`<link` `rel="shortcut icon"` `href="image/test.ico">` `<!--导入图片-->`

5、Style(在页面中写样式)

<style type="text/css">

.hide{

display: none;

}

</style>

6、Script

引进文件

1	`<` `script` `type="text/javascript"` `src="http://www.googletagservices.com/tag/js/gpt.js"> </script` `>`

写JS代码(一般写在body的最底部)

<script type="text/javascript">

.......

</script>

(二)、常用标签

标签一般分为两种：块级标签和行内标签。

块级标签：a标签、span标签、select标签等；
行内标签：div标签、h标签、p标签等。

1、p标签、br标签

p标签：表示段落，默认段落之间是有间隔的；
br标签：换行

1 2	`<p>hello，world!!</p><br/>` `<p>hello，world!!</p>`

2、a标签

target属性，_back表示在新的页面打开；
锚点

<body>

<a href="http://www.baidu.com">本页面直接跳转</a><br/>

<a href="http://www.baidu.com" target="_blank">开启新页面</a><br/>

<a href="#i1" style="color: green";>第一章</a><br/>

<a href="#i2" style="color: fuchsia";>第二章</a><br/>

<div id="i1" style="height: 500px";>第一章内容</div>

<div id="i2" style="height: 500px";>第二章内容</div>

</body>

3、HTML标题

标题(Heading)是通过<h1>--<h6>等标签进行定义的，<h1>定义最大的标题，<h6>定义最小的标题。

<h1>1,br换行为自闭合标签</h1>

<p>asdf<br />ghjkl</p>

<h1>2,a标签</h1>

<h2>属性:</h2>

4、select标签

这里有一个知识点，就是在标签上加默认值：

selected="selected"（下拉框默认值）
checked="checked"（复选框默认值）

<p>城市:

<select>

<option>上海</option>

<option>北京</option>

<option>河北</option>

<option>山东</option>

</select>

<select multiple>

<option>上海</option>

<option>北京</option>

<option>河北</option>

<option>广州</option>

<option>山西</option>

<option>河南</option>

</select>

<select>

<optgroup label="南方">

<option>上海</option>

<option>广州</option>

</optgroup>

<optgroup label="北方">

<option>北京</option>

<option>河北</option>

</optgroup>

</select>

</p>

6、input标签

input标签的类型有：

text
password
redio
checkbox
file
button(普通按钮)
submmit(提交当前表单)
reset(清空内容)

textarea：备注框

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Form</title>

</head>

<form action="http://192.168.11.88:8000/index/" method="get" enctype="multipart/form-data">

<div style="border: 1px solid chartreuse;">

<p>用户名:<input type="text" name="user"/></p>

<p>密码:<input type="password" name="pwd"/></p>

<p>性别(单选框):

<br/>男<input type="radio" name="ee" value="1"/>

<br/>女<input type="radio" name="ee" value="2"/>

</p>

<p>爱好(多选框):

<br/>篮球<input type="checkbox" value="1"/>

<br/>足球<input type="checkbox" value="2"/>

<br/>乒乓球<input type="checkbox" value="3"/>

<br/>橄榄球<input type="checkbox" value="4"/>

</p>

<p>城市:

<select name="city">

<option value="1">上海</option>

<option value="2">北京</option>

<option value="3">河北</option>

<option value="4">山东</option>

</select>

<select multiple>

<option>上海</option>

<option>北京</option>

<option>河北</option>

<option>广州</option>

</select>

<select>

<optgroup label="南方">

<option>上海</option>

<option>广州</option>

</optgroup>

<optgroup label="北方">

<option>北京</option>

<option>河北</option>

</optgroup>

</select>

</p>

<p>上传文件: <input type="file" /></p>

<p>备注: <textarea name="extra"></textarea></p>

<input type="submit" value="提交"/>

<input type="button" value="普通按钮"/>

<input type="reset" value="重新设置"/>

</div>

</form>

</body>

</html>

7、ul ol dl

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

body{

margin: 0;

}

ul{

margin: 0;

list-style-type: none;

}

ul li{

float: left;

padding: 0 8px 0 8px;

color: white;

cursor: pointer;

}

/*当鼠标移动到li标签上时，自动应用以下样式*/

ul li:hover{

background-color: blueviolet;

}

.pg-header{

height: 44px;

background-color: #2459a2;

line-height: 44px;

}

.w{

width: 980px;

margin: 0 auto;

background-color: red;

}

</style>

</head>

<body>

<div class="pg-header">

<div class="w">

<ul>

<li>菜单一</li>

<li>菜单二</li>

<li>菜单三</li>

</ul>

</div>

<div class="pg-body"></div>

<div class="pg-footer"></div>

</body>

</html>

8、table

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Table</title>

</head>

<body>

<table border="5">

<thead>

<tr>

<th colspan="2">ID</th>

<th>姓名</th>

<th>年龄</th>

</tr>

</thead>

<tbody>

<tr>

<td rowspan="2">1</td>

<td>张小凡</td>

<td>18</td>

<td>男</td>

</tr>

<tr>

<td>2</td>

<td>田灵儿</td>

<td>18</td>

<td>女</td>

</tr>

</tbody>

</table>

</body>

</html>

9、fieldset (会在相关表单元素周围绘制边框)

<body>

<form>

<fieldset>

<legend>Personalia:</legend>

Name: <input type="text"><br>

Email: <input type="text"><br>

Date of birth: <input type="text">

</fieldset>

</form>

</body>

</html>

http://www.w3school.com.cn/h.asp

二、CSS样式

CSS是英文Casscading Style Sheets的缩写，称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

在标签中直接使用 style='xxx;'
在页面中嵌入<style type="text/css"></style>块
引入外CSS文件

（一）、CSS选择器

标签选择器
class选择器

id选择器
层级选择器
组合选择器
属性选择器

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>CSS</title>

<style>

div{

/*标签选择器*/

color: chartreuse;

}

#i1{

/*id选择器*/

font-size: 56px;

color: green;

}

.c1{

/*class选择器*/

background-color: green;

}

.c2 div p .c3{

/*层级选择器*/

background-color: red;

}

.c4,.c5,.c6{

/*组合选择器，找到class=c4,class=c5,class=c6的标签*/

background-color: red;

}

</style>

</head>

<body>

<div class="c4">1</div>

<div class="c5">1</div>

<div class="c6">1</div>

<div class="c2">

<div></div>

<div>

<p>

<span>oo</span>

<a class="c3">uu</a>

</p>

</div>

<div class="c3">sdfsdf</div>

<span class="c1">1</span>

<div class="c1">2</div>

<a class="c1">3</a>

<a id="i1">baidu</a>

<div>99</div>

<div>

<div>asdf</div>

</div>

</body>

</html>

属性选择器：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

/*<属性标签/>*/

.c1[jack='a']{

color: red;

}

</style>

</head>

<body>

<input value="123">

<textarea>123</textarea>

<select>

<option>上海</option>

<option selected="selected">广州</option>

<option>北京</option>

</select>

男:<input type="radio" name="g1" value="1"/>

女:<input type="radio" name="g1" checked="checked" value="2"/>

<input type="checkbox" name="c1" value="1" checked="checked"/>

<input type="checkbox" name="c1" value="2"/>

<input type="checkbox" name="c1" value="3" checked="checked"/>

</select>

<div>

<div class="c1" jack="a">1</div>

<div class="c1" jack="a">2</div>

<div class="c1">3</div>

</div>

</body>

</html>

（二）、CSS常用属性

1、background属性：

background-color：设置背景色；

/*背景色定义的三种方式*/

/*background-color: #FF69B4;*/

/*background-color: rgb(25,180,10);*/

/*background-color: red;*/

font-size: 32px;

background-image：设置body元素的背景图像；
color:blue !important：优先级最高；
background-repeat:

no-repeat：background-image不会重复;

repeat-x：只在水平位置会重复背景图像；

repeat-y：只在垂直位置会重复背景图像；

background-position：如何定位background-image；

background-position的属性：

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

2、border属性

#i1 {

border: 2px solid red;

/*边框2像素，实体，红色*/

}

#i2{

border: 2px dotted red;

/*边框2像素，小虚线，红色*/

}

#i3{

border: 2px dashed red;

/*边框2像素，大虚线，红色*/

}

3、margin属性

围绕在元素边框的空白区域是外边距。设置外边距会在元素创建额外的"空白"。设置外边距最简单的方法就是使用margin属性，这个属性接收任何长度单位、百分数甚至负值。

margin属性

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

line-height: 30px;

/*行居中*/

background: #F1F1F1;

margin: 0;

/*没有外边距，直接在页面顶部*/

margin: 0 auto;

/*居中*/

4、padding属性

元素的内边距在边框和内容区之间，控制该区域最简单的属性就是padding属性。CSS padding属性定义元素的内边距，padding属性接受长度值或百分比值，但不允许使用负值。

内边距属性

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

h1 {

padding-top: 10px;

padding-right: 0.25em;

padding-bottom: 2ex;

padding-left: 20%;

}

5、display属性

display属性规定元素应该生成的框的类型。下面主要说我们最常用的几种：

display：none 此元素不会被显示；
display：block 此元素将显示为块级元素，此元素前后会带有换行符；
display：inline 默认，此元素会被显示为内联元素，元素前后没有换行符；
display：inline-block 行内块元素。

6、cursor属性

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

CSS提供的cursor值：

pointer ：小手指；
help：箭头加问号；
wait：转圈圈；
move：移动光标；
crosshair：十字光标。

通过pointer属性我们可以伪造超链接：

1	`<span` `style="cursor:pointer;color:blue;">pointer</span>`

7、float属性

float属性指定一个元素是否应该浮动。

CSS提供的float的属性值：

left：元素向左浮动；
right：元素向右浮动；
none：默认值，元素不浮动，并会显示在其文本中出现的位置；
inherit：规定应该从父元素继承float属性值。

在这我们在补充说明一个属性：

clear属性：指定段落的左侧或右侧不允许浮动的元素。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div style="width: 500px;height: 500px;border: 1px solid red">

<div style="width: 20%;background-color: green;float: left">dadada</div>

<div style="width: 80%;background-color: coral;float: right">tatata</div>

<div style="clear: both;"></div>

</div>

</body>

</html>

8、position定位属性

position属性指定一个元素(静态的、相对的、绝对或固定)的定位方法的类型。

position的属性值：

absolute：生成绝对定位的元素；
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位；
relative：生成相对定位的元素，相对于其正常位置经行定位。
z-index：指定一个元素的堆叠顺序。

两种返回顶部的定义方法，一般absolute和relative一起使用：

第一种：

<div style="height:1000px;background-color: #ddd;"></div>

<div style="position: fixed;right: 200px;bottom: 100px;">返回顶部</div>

第二种：

<div style="height: 500px;width: 500px;border: 2px solid green;position: relative">

<div style="position: absolute;right: 0px;bottom: 0px;color: brown">返回顶部</div>

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

</div>

9、透明度设置

设置图像透明度的两种方式：

opcity:0.6；
background:rgba(0,0,0,.6)；

10、hover选择器

hover在鼠标移动到链接上时添加的特殊样式，hover选择器可用于所有元素，不仅是链接。

提示：link选择器设置了未访问的页面链接样式，:visited选择器设置访问过的页面链接的样式，:active选择器设置当你点击链接时的样式。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>mytest</title>

<style>

a.ex1:hover,a.ex1:active {color:red;}

a.ex2:hover,a.ex2:active {font-size:150%;}

a.ex3:hover,a.ex3:active {background:red;}

a.ex4:hover,a.ex4:active {font-family:monospace;}

a.ex5:visited,a.ex5:link {text-decoration:none;}

a.ex5:hover,a.ex5:active {text-decoration:underline;}

</style>

</head>

<body>

<p>将鼠标移至链接上查看其样式改变.</p>

<p><a class="ex1" href="/css/">This link changes color</a></p>

<p><a class="ex2" href="/css/">This link changes font-size</a></p>

<p><a class="ex3" href="/css/">This link changes background-color</a></p>

<p><a class="ex4" href="/css/">This link changes font-family</a></p>

<p><a class="ex5" href="/css/">This link changes text-decoration</a></p>

</body>

</html>

11、before、after选择器

before：向选定的元素之前插入内容；
after：向选定的元素之后插入内容

12、font字体选择器

font-style：规定字体样式；
font-variant：规定字体异体；
font-weight：规定字体粗细；
font-size/line-height：规定字体尺寸和行高；
font-family：规定字体系列。

三、实例

1、清除浮动

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>清除浮动</title>

<style>

.clearfix:after{

content: '.';

clear: both;

display: block;

visibility: hidden; （元素是否可见，hidden为不可见）

height: 0;

}

.left{

float: left;

}

</style>

</head>

<body>

<div style="background-color: #00CC00" class="clearfix">

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

<div class="left">2</div>

</div>

</body>

</html>

2、使用Font awesome插件渲染出小尖角

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>使用插件</title>

<style>

.icon{

display: inline-block;

border-top:20px solid red;

border-right: 20px solid green;

border-bottom: 20px solid transparent;

border-left:20px solid transparent ;

}

</style>

</head>

<body>

<div class="icon"></div>

<a href="Dy15/plugins/Font-Awesome-master/css/font-awesome.css">

</body>

</html>

插件地址：http://fontawesome.io/

3、常用的两种滚动条

第一种：页面整体滚动

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

body{

margin: 0;

}

.pg-header{

height:48px;

background-color: #012a62;

}

.pg-body .body-menu{

position: absolute;

top: 48px;

left: 0;

bottom: 0;

width: 200px;

/*bottom: 0;*/

background-color: #e67e4a;

}

.pg-body .body-content{

position: absolute;

top: 48px;

left: 220px;

right: 0;

background-color: green;

}

</style>

</head>

<body>

<div class="pg-header"></div>

<div class="pg-body">

<div class="body-menu"></div>

<div class="body-content">

sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>

</div>

</body>

</html>

第二种：页面内部分内容滚动

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

body{

margin: 0;

}

.pg-header{

height:48px;

background-color: #012a62;

}

.pg-body .body-menu{

position: absolute;

top: 48px;

left: 0;

bottom: 0;

width: 200px;

background-color: #e67e4a;

}

.pg-body .body-content{

position: absolute;

top: 48px;

left: 220px;

right: 0;

bottom: 0;

background-color: green;

overflow: auto;

/*<overflow添加滚动条>*/

}

</style>

</head>

<body>

<div class="pg-header"></div>

<div class="pg-body">

<div class="body-menu"></div>

<div class="body-content">

sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>sdfasdfa<br/>

</div>

</body>

</html>

HTML、CSS常用技巧

一、HTML

（一）、头部标签

1，Doctype

2、Meta(metadata infomation)

3、Title(页面头部信息)

4、Link

5、Style(在页面中写样式)

6、Script

(二)、常用标签

1、p标签、br标签

2、a标签

3、HTML标题

4、select标签

6、input标签

7、ul ol dl

8、table

9、fieldset (会在相关表单元素周围绘制边框)

二、CSS样式

（一）、CSS选择器

属性选择器：

（二）、CSS常用属性

2、border属性

3、margin属性

margin属性

4、padding属性

内边距属性

5、display属性

6、cursor属性

7、float属性

8、position定位属性

9、透明度设置

10、hover选择器

11、before、after选择器

12、font字体选择器

三、实例

1、清除浮动

2、使用Font awesome插件渲染出小尖角

3、常用的两种滚动条

相关文章