body中的标签

标题标签

当出现错误时不同的浏览器翻译出来的页面不同

image.png

image.png

换行标签

浏览器翻译 html过程是从上到下从左到右

段落标签

实现自然段效果

横线

(标题与文章内容的分割线)

加粗与斜体

image.png

图像标签

超链接标签

卖女孩的小火柴
属性
href : 链接地址
target：目标当前页跳转 target="_self" / 新打开一个页面 target="_blank"

字符实体 &标签帮我们进行转义

比如空格

body 设置背景颜色使用bgcolor 属性

CSS 层叠样式表

html-body 相当于赤身裸体的人
CSS 相当于衣服
用法 head标签中写一个　　　　　　
标记选择器.class1
　　
标记选择器.class2
　　
标记选择器.class3
　　
标记选择器.class4
　　
标记选择器.class5
　　
使用于别的标记
　　　　

image.png

并集选择器

image.png

Title 　　　　　　　　集体声明h1 　　集体声明h2 　　集体声明h3 　　集体声明h4 　　集体声明h5 　　集体声明p1 　　集体声明p2 　　集体声明p3 　　　　

image.png

css 外部样式引入两种方法

1. 导入外部样式表 @import

common.css

@charset "gb2312"; /* CSS Document */ #first{font-size:16px; color: green;} #second{font-size:24px;color: red;}

导入外部样式表北京欢迎你北京欢迎你，有梦想谁都了不起！有勇气就会有奇迹。北京欢迎你，为你开天辟地流动中的魅力充满朝气。

显示结果

2。链接外部样式表 link

链接外部样式表北京欢迎你北京欢迎你，有梦想谁都了不起！有勇气就会有奇迹。北京欢迎你，为你开天辟地流动中的魅力充满朝气。

行内样式在标签内使用style属性（特殊情况才使用）

Title hello css 标签选择器标签选择器

优先级顺序对比

link外链与 style 看上下位置下面的覆盖上面的在style里面普通选择器都是下面的覆盖上面的 @import url("css/common1.css"); 无论在上还是在下优先级最低行内引用 sytle 优先级最高标签选择器 <类选择器 < id选择器

image.png

image.png

css 中的继承关系修饰父类时子类会继承父类中的特点

链接外部样式表撒旦发生的北京欢迎你北京欢迎你，有梦想谁都了不起！有勇气就会有奇迹。北京欢迎你，为你开天辟地流动中的魅力充满朝气。

继承关系上下一片红

css 修饰字体
font-family:字体
font-size: 大小
font-style:字体风格
font-wight:字体粗细
font ：可以只是所有的属性

image.png

p {font:oblique bold 20px "楷体";}

text 文本修饰
text-align: 文本位置
text-decoration: 文本修饰横线

.p1 { text-decoration: none; } .p2{ text-decoration: underline; } .p3{ text-decoration: overline; } .p4{ text-decoration: line-through; } .p5{ text-decoration: blink; }

image.png

伪类：

Title 你好啊产业融入教育

背景颜色 background-color

列表去掉圆点 list-style

li{ list-style: none; }

引用外部漂亮的字体
http://www.fontawesome.com.cn/

image.png

div+css 盒式布局

image.png

width ：是 content 的宽度
height: 是 content 的高度

border :边框
padding ：内边距
margin ：外边距

而以页面中 div实际宽度或者高度计算
realwidth=width+2border +2padding
realheight=height+2border+2padding

image.png

div 测试 div+css 布局你好1 你好2 你好3

边界实际宽度计算

设置
border -width：边框宽度
border-color ：边框颜色（上右下左）

div 测试 div+css 布局你好4 border-color

image.png

div 测试 div+css 布局你好4 border-color

image.png

border-color 结论为：
一个颜色：上下左右一致
两个颜色：上下(第一个颜色)左右（第二个颜色）
三个颜色：上 (第一个颜色) 下(第二个颜色) 左右(第三个颜色)
四个颜色：上右下左

内外边框

参考系的问题
如果以a6 为参考系 a6与a5的距离是 a6的外边距在a6 当中设置margin
如果以a5 为参考系 a5 与a5 的距离是 a5的内边距在a5 当中设置 padding

div 测试 div+css 布局

image.png

页面居中对齐 margin 0 auto

Title 我要水平居中对齐

元素默认值

body标签：默认margin=8px
p标签：默认 margin- top/bottom=16px
h1标签：默认 margin- top/bottom=21.440px
ul标签：默认 margin- top/bottom=16px ,padding left=40px

通过F12 使用开发者工具查看 h1标签属性

元素分类

行级元素

1.inline内嵌元素
,,,
内嵌元素的特性你好啊啊实打实的阿发士大夫你好啊啊实打实的阿发士大夫你好啊啊实打实的阿发士大夫

image.png

block 块级元素

块元素的特性：
1.默认独占一行显示
2.没有宽度时，默认撑满一排
3.支持所有css命令

~

-

-

-
-

内联块元素—代表元素
img
inline-block的特点：
元素在一行显示
支持宽高
没有宽度的时候内容撑开宽度

既具备 inline 的一行显示多个也具备 block 改变宽高所以img标签很特殊叫做 inline-block

块级元素

inline-block

display 1.显示与隐藏 2块级与行级元素的转变

@charset "utf-8"; /* CSS Document */ body,h1, p, div { margin:0px; padding:0px; } body { font-size:12px; line-height:25px; } #music { width:260px; } #music h1 { font-size:14px; text-align:center; line-height:35px; } #music p { text-align:right; color:#6E6E6E; border-bottom:1px #7F7F7F dashed; line-height:28px; margin-bottom:10px; } #music span { display:block; padding-left:5px; } #show h2{ color:red; } #show:hover div{ display:inline; } #music div { padding-left:5px; } #music .song-2{display:none}

最炫民族风最炫民族风演唱：凤凰传奇苍茫的天涯是我的爱绵绵的青山脚下花正开什么样的节奏是最呀最摇摆什么样的歌声才是最开怀弯弯的河水从天上来流向那万紫千红一片海显示全部火辣辣的歌谣是我们的期待一路边走边唱才是最自在我们要唱就要唱得最痛快

图片背景

背景图像
background-image属性

image.png

背景重复方式 :默认是重复的
background-repeat属性

image.png

背景定位
background-position属性

image.png

image.png

image.png

image.png

Title 摆渡人摆渡人摆渡人摆渡人摆渡人摆渡人摆渡人摆渡人

表格 table

行
普通列
标题列
colspan="2" 占两列
rowspan="2" 占两行

Title Name Telephone 为空 Bill Gates 555 77 854 555 77 855

image.png

关于table 的 css 修饰

考试成绩表姓名语文英语数学小明 80 80 小红 90 90 90 小杰 100 100 100 平均 90 90 90

border-collapse: collapse

如果不设置边框坍塌效果border-collapse: collapse

image.png

image.png

Title 表单请选择您的性别：男女请选择你的爱好：睡觉吃饭足球篮球乒乓球打豆豆请选择您的家乡：请输入您的账户名：请输入您的密码：请输入您的建议和要求：

image.png

position

image.png

相对位置 relative

css文件

@charset "gb2312"; /* CSS Document */ div { width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px; } #father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px; } #first { background-color:#FC9; border:1px #B55A00 dashed; position:relative; top:10px; left:50px; } #second { background-color:#CCF; border:1px #0000A8 dashed; } #third { background-color:#C5DECC; border:1px #395E4F dashed; }

html文件

position属性第一个盒子第二个盒子第三个盒子

image.png

absulote 绝对定位

脱离文档流以最近的父节点来进行定位如果没有祖先节点以浏览器左上角为坐标原点定位。

把父类 position设置为 static时不可以约束其子元素的绝对参考系位置
css

@charset "gb2312"; /* CSS Document */ div { width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px; } #father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px; } #first { background-color:#FC9; border:1px #B55A00 dashed; position: absolute; top:10px; left: 50px; } #second { background-color:#CCF; border:1px #0000A8 dashed; } #third { background-color:#C5DECC; border:1px #395E4F dashed; }

html

position属性第一个盒子第二个盒子第三个盒子

父子关系· 看父类的 position
可以约束位置

@charset "gb2312"; /* CSS Document */ div { width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px; } #father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px; position: relative; /*absolute与relative可以约束 */ } #first { background-color:#FC9; border:1px #B55A00 dashed; position: absolute; top:10px; left: 50px; } #second { background-color:#CCF; border:1px #0000A8 dashed; } #third { background-color:#C5DECC; border:1px #395E4F dashed; }

不可以约束

@charset "gb2312"; /* CSS Document */ div { width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px; } #father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px; position: static; } #first { background-color:#FC9; border:1px #B55A00 dashed; position: absolute; top:10px; left: 50px; } #second { background-color:#CCF; border:1px #0000A8 dashed; } #third { background-color:#C5DECC; border:1px #395E4F dashed; }

垂直布局 z-index

image.png

透明度 opacity

飘移 float

image.png

Title 我是块级元素1，没有设置浮动我是块级元素2，没有设置浮动我是块级元素3，没有设置浮动

image.png

Title 我是块级元素1，没有设置浮动我是块级元素2，没有设置浮动我是块级元素3，没有设置浮动

image.png

image.png

image.png

Title 我是块级元素1，没有设置浮动我是块级元素2，没有设置浮动我是块级元素3，没有设置浮动

image.png

overflow图片视频超出规定范围问题

image.png

css

@charset "gb2312"; /* CSS Document */ body { font-size:12px; line-height:22px; } #content { width:200px; height:150px; border:1px #000 solid; overflow:hidden; }

overflow属性在CSS中使用overflow属性处理盒子中的内容溢出，它规定当内容溢出盒子时发生的事情，例如内容不会被修剪而呈现在盒子之外，或者内容会被修剪，修剪内容隐藏等。

clear :拯救因为飘移造成的父类坍塌问题

image.png

Title aaaaa bbbb cccc dddd 我是一段文本我是一段文本我是一段文本我是一段文本

image.png

h5新标签

header footer 等标签其实就是有意义的div标签（块级元素）

image.png

这是一个header标签首页内页一这是一个section标签导航1 导航2 内页内容... 这是一个footer标签这是一aside标签尾部标签

hgroup 标签为组标签可以通过修改hgroup（父类影响子类）

hgroup 欢迎学习HTML5 教程第二章表单的hgroup

figure figcaption ：特殊流标签一般用于图片视频代码等

image.png

figcaption 北京风景

global 标签

contenteditable :对table 可编辑
spellcheck: 英文拼写检查

创建一个web页面名字: 麦克生日: 1999.01.01 性别: 男职业: 教师国籍: 中国公司: NEUSOFT 这段话在页面中看不到犇ben 我要标注我中大奖了太高兴了，快兑奖去...

spellcheck属性的使用这是可编辑的段落,请检查文字是否有错误。 This paragraph is editable,Please check whether there is an error te xaaat.

video audio 视频音频标签

embed 多媒体嵌入标签

embed

这是一个多媒体文件

重定义标签
老瓶子装新酒

image.png

套餐 99元牛排套餐含牛排350克，西兰花100克双人餐 199元叉烧双拼港式烧鹅，港式叉烧各300克，油菜300克某宝客服售后服务 | 联系我们 | 版权信息 | 声明 | 投诉

form 表单新增属性

用户名：密码：出生年份：

datalist 下拉列表

无标题文档

image.png

detail summery 实现隐藏文档功能

无标题文档 HTML5实战揭秘 HTML5章节第一章HTML5简介 HTML5由来第二章标签新标签的哟功法第三章表单智能表单的应用第四章画布画布的应用

初始访问

隐藏的部分进行展示

input 标签新增加属性

用户名：密码：出生年份：默认值: 邮箱： URL： DATE: TIME： Month： WEEK：数字：滑动条：搜索：颜色：自动填充表单

output:输出表单 ,novalidate表单

输出表单output novalidate表单请输入电子邮件地址：

image.png

CSS3 新特性

选择器

image.png

h1元素这里是span元素 h2元素这里是span元素 h3元素这里是span元素 h4元素这里是span元素 h5之前的h6元素这里是span元素 h5元素这里是span元素 h6元素这里是span元素 h5之后的第二个h6元素这里是span元素 div内的h5 div内的h6

图片结果

image.png

伪类选择器

image.png

设置了css样式的a链接

image.png

disabled和enabled ID 昵称密码选中下面的项试试(单选按钮) 蓝色红色黑色选中下面的项试试(多选按钮) 蓝色红色黑色

image.png

盒子1 盒子2 选项一子选项

结构伪类选择器

image.png

只匹配父类下的第一子节点若匹配这选中，否则不选中

结构性伪类选择符 E:first-child 我是父亲的第1个子元素，可惜我不是p标签，所以无法选中我我是父亲的第2个子元素我是父亲的第3个子元素我是父亲的第4个子元素我是父亲的第5个子元素我是父亲的第1个子元素，并且我是p标签，所以我被选中了我是父亲的第2个子元素我是父亲的第3个子元素我是父亲的第4个子元素我是父亲的第5个子元素

匹配父类下的第一个对应子节点，不论前面多少个其他子节点，当前子节点皆可被选中

结构性伪类选择符 E:first-of-type 我是父亲的第1个子元素我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了我是父亲的第3个子元素我是父亲的第4个子元素我是父亲的第5个子元素我是父亲的第1个子元素，我是父亲的第一个p标签所以我被选中了我是父亲的第2个子元素我是父亲的第3个子元素我是父亲的第4个子元素我是父亲的第5个子元素

属性选择器

image.png

小红小绿毛龟我最喜欢黄色了小兰兰百度一下，你就知道返回首页点此下载高清无码的高洛峰的AVI大片的种子

伪标签选择器

image.png

春晓-孟浩然春眠不觉晓，处处蚊子咬，打上敌敌畏，不至死多少。点此下载听歌听的是腕，戴表戴的是链...