3 标签

3.1 div

div 标签表示一个区块或者区域，你可以把它看成是一个容器，比如说一个竹篮

作用：用来把网页分块并且里面可以装任意的html元素

<div>这里是一个div容器</div>

3.2 span

span：可以表示一个小区块，比如一些文字，span和div的不同就是 span能够在一行内显示而 div独占一行

<span>一周热门排行榜</span>

3.3 h1-h6

h1 到 h6 这6个标签表示 6级标题，表现出来的效果就是从h1开始文字大小逐渐变小

<h1>创于心，兑于行</h1>

<h2>创于心，兑于行</h2>

<h3>创于心，兑于行</h3>

<h4>创于心，兑于行</h4>

<h5>创于心，兑于行</h5>

<h6>创于心，兑于行</h6>

3.4 p

p标签是段落标签，通常用来装一整段文字,在一篇文章中常用

<p>

新华社北京2月6日电 中共中央总书记、国家主席、中央军委主席、中央全面深化改革领导小组组长2月6日上午主持召开中央全面深化改革领导小组第三十二次会议并发表重要讲话。他强调，党政主要负责同志是抓改革的关键，要把改革放在更加突出位置来抓，不仅亲自抓、带头干，还要勇于挑最重的担子、啃最硬的骨头，做到重要改革亲自部署、重大方案亲自把关、关键环节亲自协调、落实情况亲自督察，扑下身子，狠抓落实。

</p>

3.5 ul li

ul 为无序列表标签 li为里面的每个列表项目,这个标签非常实用，例如：各种菜单、各种新闻排行都可以用无序列表来实现

<h1>奇葩新闻</h1>

<ul>

    <li>三人花20万人民币造出17万假币。</li>

    <li>英国马拉松仅一人完成比赛，第二名带着五千人跑错路。</li>

    <li>在曹操墓发现一具小孩尸骨，砖家说是小时候的曹操!!</li>

    </li>女子为吓男友报警称其是逃犯，警方调查后发现真的是逃犯</li>

</ul>

3.8 i em strong hr br

i、em 标签表示斜体 strong标签表示加粗 hr表示一根水平分割线 br表示换行

<i>床前明月光</i>

<em>床前明月光</em>

<strong>床前明月光</strong>

<hr>

<p>床前明<br>月光</p>

3.9 img

img 标签表示图像可以引入一张图片

<img src='img/1.png' >

相对路径和绝对路径 img标签有个src的属性后面给图片的地址，可以是网络地址也可以是本地地址，如果是本地路径的话，就要区分是相对路径还是绝对路径

绝对路径：在硬盘上的具体位置  例如：E:\www\html\google.png

相对路径： 相对于当前的html文件来说 图片的具体位置 可以分几种情况讨论

1、如果图片在html文件的上级 用  ../ 表示  如果上很多级  就用多少个 ../

2、如果图片在html文件的下一级  就根据文件夹 一层一层的找

 例如： html同级的文件夹img下有google.png的图片 ，写成 ./img/google.png

   ./ 表示同级

3、如果是同级  就用 ./表示    或者直接写 图片名字   如： google.png

<img  src='./google.png' >  同级

<img src='./img/google.png' > 下一级

<img src='../img/google.png' >  上一级

alt 属性和 title属性

<img src='./google.png'  alt='谷歌搜索'>

alt表示当图片没有被正确加载的时候显示的文字

<img src='./google.png'  title='谷歌搜索' >

 title 表示当鼠标移动到图片的时候显示的文字

3.10 a

a标签表示超链接

<a href='http://www.baidu.com'>百度一下</a>

target属性值__blank 如果加上这个属性每次点击的时候会新开一个浏览器标签页来显示链接的内容

<a  href='http://www.baidu.com' target="__blank">百度一下</a>

4 CSS简介

4.1 CSS 是什么，CSS 用来干嘛

CSS（Cascading Style Sheet，可以译为“层叠样式表”或“级联样式表”），是一组格式设置规则，用于控制web页面的外观。

4.2 如何让一个标签具有样式

第一步，必须保证引入方式正确第二步，必须让css和html元素产生关联，也就是说得先找到这个元素第三步，用相应的css属性去修改html元素的样式

4.3 css的3种引入形式

4.3.1 将css内嵌到HTML文件中,这种方式写的CSS又叫内联样式表,例如：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<style type="text/css">

			#box{

				width: 100px;

				height: 100px;

				background: red;

			}

		</style>

	</head>

	<body>

		<div id="box"></div>

	</body>

</html>

4.3.2 将一个外部样式链接到HTML文件中这种方式书写的CSS又叫链接样式表，例如：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<link rel="stylesheet" type="text/css" href="index.css"/>

	</head>

	<body>

		<div id="box"></div>

	</body>

</html>

4.3.3 将样式表加入到HTML文件中，这种方式写入的css样式又叫行内样式表

<h1>css 样式测试</h1>

<div style="width:200px;height:200px;background:red;"></div>

总结：css的基本语法 CSS语法由三个基本部分构成：选择符（Selector）、属性（Properties）和属性的取值（Value）格式：Selector｛Properties:Value｝(选择符｛属性：值｝)

 #box{

    width:100px;

    height:100px;

    border:red solid 1px;

}

螺钉课堂视频课程地址：http://edu.nodeing.com

巴特西

html+css快速入门教程（2）