1.15 style元素与HTML样式基础
1.外部样式表：通过 link元素引入外部样式表；
< link rel="stylesheet" type="text/css" href="" >这个是css主要内容，放在<head>部位，这个两个属性的意思是：rel="stylesheet" type="text/css"告诉浏览器这是css样式表；href=”样式地址”
2.内部样式表：
<style type="text/css"></style>
如果有很多标签的样式都是一样，就用内部样式表，type=”text/css”这个属性的意思是告诉浏览器这个css样式，如果用内联的话那么每个p标签都要写样式，很麻烦。
通常放在 <head>
<style type=”text/css”>
p{color:red}
caption{font-size:30px;color:blue} font-size指字体大小//元素名称{属性名称：属性值}
</style>
</head>
<p style="color:red"> </p>
<body bgcolor=”red”></body>与<body style=”background: #F0F8FF”></body>字体居中；字体颜色是蓝色；这个标签的背景蓝色；属性名称:值与里一个属性名称:值用分号隔开，最后一个属性也要分号。所有的属性名称和值都放在style的引号里面
style="font-size:50px;text-align:center;color:blue"
区别：内联样式不但可以设定背景颜色还能讲图片设为背景
1.16 内联框架
iframe内联框架
1).iframe元素用来在文档中添加一个内联框架。
2).iframe为body元素的子元素，必须放置在body中使用
3). 主要属性:src; name/id; width;height
src、width、heigth属性：
<iframe src=”地址” width=”500px” height=”700px”></iframe>
<iframe src=”地址” width=”50%” height=”700px”></iframe> width=50% 表示相对于body的50%宽，height=”50%”是不行的，因为页面的height会随着内容增加而变高，height设置百分比会出错，除非在body设置样式<body style=”height:100px”>下面iframe height才可以用百分比
name属性：
<a href=”http://www.baidu.com” target=”myiframe”><img src=”1.png” alt=”” title=”1”></a>
<iframe src=”http://www.hao123” width=”200px” height=”400px” name=”myiframe”></iframe>
4).对HTML5中已经删除的属性不再进行讲解, frameborder=”1”表示边框宽度，html5删了，后面用css设计更好效果
<iframe src=”地址” frameborder=”1”></iframe>
1.17 table布局
关于table布局
1).table布局是传统的网页布局方式：早期网页由于内容较少，布局简单，都是使用table布局
2).优点:比较简单，容易理解
3).缺点：对于复杂的布局，表格嵌套太多，比较繁琐；后期维护和修改很不方便.......
4).table布局思路：用表格把屏幕分成几块--不同的单元格存放不同的内容
1.18 div元素与布局
1.元素的分类
块元素:主要特征是会产生换行效果，自动与其他元素分离成两行；通常可以作为容器在内部添加其他元素。已经学过的块元素有：
h1~h6;hr;ul;ol;p;table.........
内联元素:不会产生换行效果，会和其他元素并联排列；已经学过的内联元素有：
b;i;br;img;.........
2.div元素和布局div元素是通用的块元素，内部可以包含其他各种元素包括其他div元素；并且可以通过CSS设置样式来完成复杂的页面的布局。div+css
<!DOCTYPE html>
<html lang="en">
<head>
<title>div元素</title>
<meta charset="utf-8">
<style type="text/css">
body{background:#F0F8FF;padding:0;margin:0;}
</style>
</head>
<body>
<div style="width:100%;height:708px;">
<div style="background:blue;width:100%;height:10%;">我是标题头部</div>
<div style="background:#7FFFD4;width:20%;height:80%;float:left;">我是导航栏</div>
<div style="background:#6495ED;width:80%;height:80%;float:left;">我是iframe内联框架</div>
<div style="background:red;width:100%;height:10%;clear:left;">我是尾部</div>
</div>
</body>
</html>
1.19通用属性
1.通用属性（所有标签都能用这些属性）通用属性（全局属性）可以用于任何的HTML5元素；通用属性有十几种；
1）id
id属性用于指定元素的识别名称，相当于一个人的身份证，是唯一的，同一个文档中不能有重复的id；
一般配合CSS和JavaScript来选择元素。引用是“#id值”。
用法1：用去区分相同标签，给每个标签起个唯一的别名，采用内部样式表时可以区别相同标签，使代码简洁
<head> 相同的标签通过id值设置不同内部样式表
<style type=”text/css”>
#p1{background:white;color:red;font-size:20px}
#p2{color:red;font-size:25px}
</style>
</head>
<body>
<p id=”p1”> 段落1</p>
<p id=”p2”>段落2</p2>
</body>
class属性用于指定元素的类别名称，可以使用class元素给同一个文档中的多个元素进行归类，CSS就可以通过class个同一类元素设置统一的样式。
class是用点“.class值”引用的。
用法1：用于把多个标签的属性用一个属性代替
<head> 不同的标签通过class属性归为一类内部样式设置相同的属性
<style type=”text/css”>
.class1{background:white;color:red;font-size:20px}
</style>
</head>
<body>
<p class=”class1”> 段落1</p>
<h2 class=”class1”>标题</h2> 这样子这两个属性就完完全全相同了
</body>
3) style属性
stlyle属性用于给元素设定样式（内联样式或内部样式表）.
4) title属性
title属性用于显示省略的内容（或补充/提示说明的内容）：当光标移动到元素内容上时显示title里的内容.
5) dir属性
dir属性用于设定元素标签内容的文字方向.在讲文本样式的 bdo元素时候用过。
6) lang属性
lang属性用于指定语言，比如中文还是英文：zh-cn/en;除了在html标签中设置，它还可以在特定元素中使用，改变该元素使用的语言.
2.其他通用属性:其他通用元素还有：
accesskey:元素快捷键
tabindex：元素移动顺序
draggable：元素拖动
contenteditable:元素是否允许编辑
hidden:隐藏元素
spellchcheck：元素检查
contextmenu:元素快捷菜单
data-yourvalue：自定义属性
关于属性值的几点补充：
name和id属性：属性值必须是大小写英文字母开头；
其余部分可以包含字母、数字、下划线、点等符号；
属性值是区分大小写的
属性值为数值时，必须输入正整数，不可为0
<body style=”margin:0;padding:0”></body>
width,height是属性值：如果设置为正整数时，单位默认为px（像素），不需要要加上单位；但是在style中必须注明单位，否则会出错
1.20 小结与若干点补充
学习要点：1.第一章HTML5基础知识做一个小结
2.对本章课程中部分内容做几点补充
1.基本格式
关于基本格式大家学到这里应该已经比较熟悉了，这里需要补充一点关于meta 元素的知识点：
1）. meta 是个单标签，它没有结束标签；meta元素也可以成为空元素。
2）. meta元素为head元素的子元素，且只能放在head标签中使用。
3）. meta元素重要用来附加文档的额外信息，除了使用我们熟悉的 charset="utf-8"声明字符编码外，它还有几个常用的功能
通过name与content属性为文件加入作者(author)描述信息（description）关键词(kewords)编码工具（generator）等信息
通过属性http-equiv将指定的信息以HTTP表头信息的方式送到客户端：
例子：
<head>
<title></title> 定义HTML文档的题目
<meta charset="utf-8"> 声明字符是utf-8，没有这个中文会乱码
<meta name="author" content="author_name"> 声明HTML作者
<meta name="keywords" content="html5,js,java"> 声明HTML关键字，便于搜索工具搜到
<meta http-equiv="refresh" content="3;1_19.html"> 刷新网页3s后跳到设置的网页
</head>元素指的是从开始标签到结束标签的所有代码。这一节所讲的三个常用元素 h1~h6，p, hr大家都比较熟悉，不在多说
3.元素的属性
属性的作用就是就为元素提供更多的信息，大多数元素都可以拥有属性。属性只可以添加到开始标签中，并对该元素内容起作用
补充知识点：bgcolor属性与style中的background的区别；CSSz中的background可以设置复杂的背景，比如将图片设置为背景。
<body background="picture/1.png"> background可以设置颜色也可以设置图片为背景，这个背景就是设置的图片了
<body bgcolor=”blue”> bgcolor只能设置颜色
4.文本元素
只需掌握常用的即可，其他部分用到的时候查询一下手册或其他资料。
pre元素：保持原始格式（其实主要是保持空格和换行）
5.超链接
CSS中可以为 a 元素设置跟多的样式；同时它还有一些我们暂时没有讲到的属性，后边章节会涉及到......
6.img图片
有一些属性没有讲到，比如usemap（设置图片的热区），放到后边章节再讲。
7.列表
本章对列表的使用过程中用到了后边章节学习的几个知识点，大家能掌握最好，如果没有理解，后边章节中还会讲解。
补充知识点，就是列表的嵌套：有序列表和无序列表之间可以相互嵌套.
8.表格
本章对列表的使用过程中用到了后边章节学习的几个知识点，大家能掌握最好，如果没有理解，后边章节中还会讲解。
补充知识点1：表格的嵌套
补充知识点2：了解两个HTML5中已经删除的属性：cellpadding;cellspacing。注;这些属性在CSS中设置可以达到相同甚至更好的效果。
cellpadding设置单元格内字体到表格变宽的距离；cellspacing设置表格变框线粗，如设置为实线或双线。。。
<body background="white">
<table border="1" cellpadding=10px" cellspacing="0">
<caption>标题标题</caption>
<thead>
<tr><th colspan="3">小标题</th></tr>
</thead>
<tbody>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</tbody>
<tfoot>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</tfoot>
</table>
<style type="text/css"> 通过css内部样式也能实现
#body1{border-collapse:collapse}
td{padding:10px;}
</style>关于iframe和div更多的用法
8828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
