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>
3.内联样式表:
<p style="color:red"> </p>
<body bgcolor=”red”></body>与<body style=”background: #F0F8FF”></body>
style="text-align:center;color:bule;background:blue;"
字体居中;字体颜色是蓝色;这个标签的背景蓝色;属性名称:值与里一个属性名称:值用分号隔开,最后一个属性也要分号。所有的属性名称和值都放在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>
如果要在
iframe
框架里面打开
a
标签定义的网址,就用到
iframe
的
name
属性,然后在
a
标签中
target=
“
iframe
定义的
name
的属性值就行”
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>
2)class
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>
2.元素的概念
元素指的是从开始标签到结束标签的所有代码。这一节所讲的三个常用元素 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>
9.其他
关于iframe和div更多的用法