第四章 HTML语义标签

第32课HTML学习思维导图

一、html结构：

主要包括3部分：doctype、head、body

1）doctype:文档类型,XHTML1.0提供了3中DTD供可供选择

* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2）head:包括meta charser和title,也能包括css。

3）body:各种div及html标签。

二、div布局

1、布局原则：从上到下、从左到右、从大到小

2、盒模型：块状元素div看成盒子。

1）盒子有自己的宽width和高height;

2)盒子与盒子之间的距离称为外边距margin：

margin后面可以跟1~4个值，按照上、右、下、左的顺序为四个方向分配值，没有分配到的取对边的值。

普通元素及父子元素在竖直方向上存在margin重叠现象，即相邻的两个普通元素，上下边距，不是简单的相加，而是取边距较大者的元素的边距值；关系为父子的两个div元素，竖直方向上如果两个元素都设有margin值，则会取margin值较大的元素的边距值。

3）盒子的厚度称为边框border。border的3要素：宽形状颜色。

border的3要素可单独定义，也可以和4个方向按需要结合。

4）盒子与内部内容的距离称为padding：定义方式同margin。

3、普通div无论宽度是多少都独占一行，要实现2个div并排显示，就要用浮动float，如float:left/right;

浮动元素后面再来一个普通元素，那这个元素会跑到浮动元素的下面，所以要使它正常显示，要清除浮动clear，如clear:left/right/both;

三、css效果

1、选择器

常用的有id选择器、类选择器、标签选择器、派生选择器

第一 id选择器 #xxx

第二 class选择器 .xxx

第三标签选择器 div p body 等

第四派生选择器 div p{} .a .b{} 等表示所有空格后面的选择器生效

第五子代选择器 div > p 只有大于号后面的选择器生效不继承下去了

第六群组选择 div,p,a{} 记住是逗号不是小数点，表示div p a标签都生效

第七伪类选择器比如 a:link 让鼠标放上去的时候生效

第八通用选择器比如 p *{} 表示p标签后面的所有标签都生效

第九相邻选择器比如 p+div{} 表示 p后面的第一个div生效后面的都无效

第十属性选择器比如 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性有的话就生效

2、控制效果

1）段落控制： text-indent:首行缩进

text-align:水平文字方向

text-decoration:文本装饰线

letter-spacing:字符间距

text-transform:字母大小写转换

2）文本控制：color:颜色

font-style:字体样式

font-weight:字体粗细

font-size:字体大小

line-height:行高

font-family:字体

3）背景控制：background-color:背景色

background-image:背景图片

background-repeat:背景图重复

background-attachment:背景图粘贴方式

background-position:背景图位置

背景色和背景图同时设置时，优先显示背景图，同时设置为了当背景图被删除或缓冲慢时，设置一个与背景图色调相近的背景色，使网站的视觉效果不会反差太大。

当背景图比元素还大时，就需要调background-positin来实现。

4）css引入方式

①页内style标签即在head部分加入style标签：

div{margin: 0;padding: 0;border:1px red solid;}

</style>

②外部css文件,在head部分加入link：

③行内style标签,直接在页面的标签里加style属性：

④import导入即在head部分加入@import：

@import url(xxx.css);

</style>

5）初始化

因为各浏览器对于元素有默认css参数，而且可能不一致，那么同样一段代码在不同浏览器之间显示效果就不一样。那么就需要统一对常用元素常用css参数手动设定统一效果。

四、html标签

分为2大类：无语义标签和有语义标签。

之前学过的div和span都是无语义标签，div是布局分块的块状元素，span是选择文字用的内联元素。

有语义标签，每个标签的名字就能看出它的作用，有标题h1~h6，段落p,图片img，视频embed，超链接和锚点a，无序列表ul,有序列表ol，表格table。

http://www.zixue.it/data/attachment/forum/201401/21/235003luj5trkebkd2udk5.jpeg

第33课 h标签与p标签

第34课 img标签

src 这里是路径问题。

./ 是相同目录下

../ 是返回上一级目录

<!DOCTYPE html>

<html>

<head>

<title>study34.html</title>

</head>

<body>

</body>

</html>

单闭合标签

注释标签：

严格来讲不算HTML标签的：<!DOCTYPE>文档声明标签

设置页面元信息的：<meta>标签

设置网页所有链接的相对目录(如根目录)的：<base>标签

换行：<br>

水平线：<hr>

图像：<img>

表单元素<input>

在表格table中定义一个或多个列的属性的：<col>标签

定义框架的一个窗口的：<frame>标签

定义文档与外部资源的关系的：<link>链接标签

第35课图片是内联还是块状

图片不能设置margin值

可以转化为块状再取消margin值

<!DOCTYPE html>

<html>

<head>

<title>study35.html</title>

img {

width: 300px;

height: 180px;

border: 1px solid blue;

display: block;

}

#test1 {

width: 500px;

height: 300px;

border: 1px solid blue;

}

</style>

</head>

<body>

<div id="test1">图片是内联元素，同时是内联替换元素，替换元素是能设置宽高的</div>

</body>

</html>

搜索除了img还有那些替换元素 w3creplaced element

替换元素：

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

第36课有序列表和无序列表

为了最大程度的兼容不同浏览器，通常把 li 标签设置为list-syle-type：none ，然后通过加载自定义图片来实现。

<!DOCTYPE html>

<html>

<head>

<title>study36.html</title>

ul li {

list-style-type: square;

}

ol li {

list-style-type: upper-roman;

}

</style>

</head>

<body>

<ul>

</ul>

<ol>

<li>aaasda</li>

<li>aadfa</li>

<li>aaadsfa</li>

<li>aafda</li>

</ol>

</body>

</html>

前端HTML、CSS学习完整笔记（中下篇）

-----

小熊列表

<!DOCTYPE html>

<html>

<head>

<title>study36.html</title>

ul li {

/* list-style-type: square; */

list-style-type: none;

background-repeat: no-repeat;

background-size:20px;

background-position: left center;

padding-left: 20px;

}

ol li {

list-style-type: upper-roman;

}

</style>

</head>

<body>

<ul>

</ul>

<ol>

<li>aaasda</li>

<li>aadfa</li>

<li>aaadsfa</li>

<li>aafda</li>

</ol>

</body>

</html>

第37课整齐的表格

<!DOCTYPE html>

<html>

<head>

<title>study37.html</title>

table {

border-collapse: collapse;/* 表格边框融合 */

}

td {

border: 1px solid blue;

}

</style>

</head>

<body>

<table>

<tr>

<td colspan="3">sdfsdf</td>

</tr>

<tr>

<td>sdfsdf</td>

</tr>

<tr>

<td>sdfsdf</td>

</tr>

</table>

</body>

</html>

前端HTML、CSS学习完整笔记（中下篇）

第38课超链接

a标签，内联元素

<!DOCTYPE html>

<html>

<head>

<title>study38.html</title>

</head>

<body>

<a href="webTest.html" target="_blank" title="鼠标放上来">点击(在空白新窗口显示)</a>

</body>

</html>

使用# 来实现标签，转到特定内容下

第39课锚点

<!DOCTYPE html>

<html>

<head>

<title>study39.html</title>

</head>

<body>

<p>1asdfasdf</p>

<br>

<p>2asdfasdf</p>

<br>

<p>3asdfasdf</p>

</body>

</html>

第40课 css伪类

<!DOCTYPE html>

<html>

<head>

<title>study40.html</title>

a:LINK {/* 默认颜色 */

color: gray;

}

a:VISITED { /* 访问过的颜色 */

color: purple;

}

a:HOVER { /* 鼠标放上去的颜色 */

color: orange;

}

a:ACTIVE { /* 鼠标按住不放的颜色 */

color: black;

}

</style>

</head>

<body>

<div>

css允许我们针对a标签的4中状态设置各自的css特性，叫做css的伪类<br>

1：active一般不写

2: 一定要注意，顺序是LVHA

3: a:link可以简写为a

</div>

<div>

</div>

</body>

</html>

前端HTML、CSS学习完整笔记（中下篇）

第41课字符实体

<!DOCTYPE html>

<html>

<head>

<title>study41.html</title>

</head>

<body>

<div>

在html开发中，有一些字符，不适于直接写出，如><<br>

一般的格式：& + 实体名 + ;<br>

实体有很多，记住常用的<br>

><"¥©<br>

</div>

</body>

</html>

第五章公司网页开发实战

第42课公司网站开发之首页布局

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</div>

</div>

</ul>

</div>

</div>

</body>

</html>

第43课首页实战导航制作

css初始化：

@CHARSET "UTF-8";

/*css reset code */

/**** 文字大小初始化,使1em=10px *****/

body {

font-size:62.5%;

} /* for IE/Win */

html>body {

font-size:10px;

} /* for everything else */

/*字体边框等初始化*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

padding: 0;

margin: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

fieldset,img {

border: 0;

}

img {

display:block;

}

address,caption,cite,code,dfn,th,var {

font-weight: normal;

font-style: normal;

}

ol,ul {

list-style: none;

}

caption,th {

text-align: left;

}

h1,h2,h3,h4,h5,h6 {

font-weight: normal;

font-size: 100%;

}

q:before,q:after {

content:'';

}

abbr,acronym { border: 0;

}

a {

text-decoration:none;

}

<!DOCTYPE html>

<html>

<head>

#container {

width: 1002px;

}

#header {

height:128px;

background: gray url("./indexPics/top_bg.jpg");

}

#navi li {

width:90px;

margin-right:1px;

float: left;

}

#navi a {

font-size:16px;

font-family:Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

</style>

</head>

<body>

</ul>

</div>

</div>

</ul>

</div>

</div>

</body>

</html>

前端HTML、CSS学习完整笔记（中下篇）

第44课首页实战之main区开发

css

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid gray;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

font-size:12px;

color: gray;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: gray;

}

.four a:VISITED{

color: gray;

}

.four a:HOVER {

text-decoration: underline;

}

#rside {

height: 600px;

width: 294px;

background-color: green;

float: right;

}

#footer {

height: 120px;

background-color: black;

}

index.html

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

</body>

</html>

前端HTML、CSS学习完整笔记（中下篇）

第45课首页实战之main区(2)

css

@CHARSET "UTF-8";

.clr {

clear: both;

width: 0px;

height: 0px;

}

#container {

width: 1002px;

}

#header {

height: 128px;

background: gray url("../indexPics/top_bg.jpg");

}

#navi li {

width: 90px;

margin-right: 1px;

float: left;

}

#navi a {

font-size: 16px;

font-family: Microsoft YaHei;

color: #363636;

display: block;

width: 90px;

height: 37px;

text-align: center;

}

#navi a:HOVER {

color: white;

}

#main {

}

#lside {

height: 480px;

width: 694px;

border: 1px solid gray;

background-color: white;

float: left;

}

.subtitle {

height: 37px;

}

.subtitle img {

margin:5px 0 0 10px;

float: left;

}

.subtitle h1 {

float: left;

margin-left:10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.subtitle a {

font-size:12px;

color: gray;

float: right;

}

.four {

width: 326px;

height: 200px;

background-color: #eee;

float: left;

margin: 10px;

}

.four h2 {

margin:6px 0 6px 10px;

font-size: 16px;

font-family: Microsoft Yahei, SimHei, sans-serif;

}

.four img {

background-color:white;

float: left;

margin-left: 10px;

padding: 6px;

}

.four ul {

float: left;

margin-left: 10px;

}

.four li {

background-repeat: no-repeat;

padding-left:10px;

height: 20px;

}

.four a {

color: gray;

}

.four a:VISITED{

color: gray;

}

.four a:HOVER {

text-decoration: underline;

}

#rside {

width: 294px;

float: right;

}

#article {

background: #eee;

margin-top: 1px;

padding-top: 10px;

}

#article a {

display: block;

height: 29px;

padding-left:30px;

background-repeat: no-repeat;

}

#article a:HOVER {

}

#contact {

margin-top:1px;

height: 240px;

background-color: #eee;

}

#footer {

height: 120px;

background-color: black;

}

html

<!DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</ul>

</div>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

<h2>电子商务类网站建设</h2>

<ul>

<li><a href="#">方便的订单管理</a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

</div>

</body>

</html>

前端HTML、CSS学习完整笔记（中下篇）

要加行高：

前端HTML、CSS学习完整笔记（中下篇）

前端HTML、CSS学习完整笔记（中下篇）

第四章 HTML语义标签

第32课HTML学习思维导图

第33课 h标签与p标签

第34课 img标签

第35课 图片是内联还是块状

第36课 有序列表和无序列表

第37课 整齐的表格

第38课 超链接

第39课 锚点

第40课 css伪类

第41课 字符实体

第五章 公司网页开发实战

第42课 公司网站开发之首页布局

第43课 首页实战导航制作

第44课 首页实战之main区开发

第45课 首页实战之main区(2)

相关推荐

第35课图片是内联还是块状

第36课有序列表和无序列表

第37课整齐的表格

第38课超链接

第39课锚点

第41课字符实体

第五章公司网页开发实战

第42课公司网站开发之首页布局

第43课首页实战导航制作

第44课首页实战之main区开发

第45课首页实战之main区(2)