1.html最常用的标签

1)<div></div>标签
定义:它是一个块级标签。
特点:独占一行,行前行后默认都有一个换行符,表示一个块区域,主要是用来页面的布局。
例如:<div>div1</div>

2)<p></p>标签
定义:它是一个行级标签,用来定义段落
3)<span></span>标签
定义:被用来组合文档中的行内元素

2.快捷键的使用(注:以下n代表正整数)

1)创建多个同级div 方法:div*n Tab键

 div*5  Tab键, 得到的效果如下:


        <div></div>

<div></div>

<div></div>

<div></div>

<div></div>

2)创建多个带标签内容的div 方法:div{div$}*n Tab键

div{div$}*5 Tab键, 得到的效果如下:

div>div1</div>

<div>div2</div>

<div>div3</div>

<div>div4</div>

<div>div5</div>

3) 创建嵌套标签 方法:div>div*n Tab键

div>div*3 Tab键, 得到的效果如下:

      <div>

 <div></div>

 <div></div>

 <div></div>

div>

4)创建两种不同类型的标签 方法:div{标签内容}+p{标签内容} Tab键

div{标签内容}+p{标签内容} Tab键, 得到的效果如下:

div>标签内容</div>

p>标签内容</p>

5)创建带有id属性的标签 方法:div#div1 Tab键

#div1 Tab键,得到的效果如下:

 <div id="div1"></div>

其中#表示id,div1表示id属性的名字

6)创建带有class属性的标签 方法:div.div1 Tab键

.div1 Tab键,得到的效果如下:

 <div class="div1"></div>

其中“.”表示class,div1表示class属性的名字

3.样式的引入

样式的引入指的是提供一种改变所有HTML元素样式的通用方法;

1)内嵌样式

语法:在标签里面写一个style的属性,例如<div style=“具体的样式”></div>;

优点:在代码读取时优先级最高;

缺点:不容易修改,维护困难,代码量大,存在代码冗余(代码冗余指的是编程时不必要的代码段);

例如:

<div style="width: 300px;height: 200px;background: red;">
我是div2
</div>

其中:width表示宽度,height表示高度,background表示背景

2)内部样式

写法:在head标签写一个style标签,在style标签里通过选择器来选择相应的标签,来控制标签的样式。

优点:不需要加载服务器,加载速度非常快;

缺点:不利于代码扩展和重用

例如:

<style type="text/css">
.p{width: 300px;height: 300px;background: red;}
p{width: 100px;height: 100px;background: blue;}
</style>

3)外部样式

写法:1.新建一个外部css文件

           2.在css文件里通过选择器来控制样式

           3.在head标签里通过link来关联这个css外部样式文件

<link rel="stylesheet" type="text/css" href="css文件路径"/>

优点:1.重用性强,有利于扩展

缺点:需要服务器的加载

例如:

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head>