Html5+CSS3笔记

1、meta标签

1.meta标签作用
-主要用于设置网页中的元数据,元数据是给浏览器看的
2.meta常用属性
-name:指定数据的名称
-charset:指定网页字符集
-content:指定数据的值
-中,keywords表示网站的关键字,可同时使用多个关键字,关键字之间用逗号使用,当使用搜索引擎搜索关键字的时候,利用的就是keywords中的值。
-description,用于指定网站的描述,网站的描述会显示在搜索引擎的搜索结果中。
-titile标签的内容,会作为搜索结果中超链接的文字显示。
-,content中的内容表示三秒后该页面跳转到百度页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
        meta主要用于设置网页中的一些元数据,元数据不是给用户看
            charset 指定网页的字符集
            name 指定的数据的名称
            content 指定的数据的内容

                keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开
                    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
                    <meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
                    
                description 用于指定网站的描述
                    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
                    网站的描述会显示在搜索引擎的搜索的结果中

                title标签的内容会作为搜索结果的超链接上的文字显示    
     -->
     <meta name="keywords" content="HTML5,前端,CSS3">
     <meta name="description" content="这是一个非常不错的网站">
     <!--
          <meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> 
        将页面重定向到另一个网站
    -->
    <!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> -->
    <title>Document</title>

</head>
<body>
    
</body>
</html>

p16、块元素

在网页中HTML专门用来负责网页的结构
所以在使用html标签时,应该关注的是标签的语义,而不是它的样式
标题标签:
h1 ~ h6 一共有六级标题
从h1~h6重要性递减,h1最重要,h6最不重要
h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1h3,h4h6很少用
标题标签都是块元素
在页面中独占一行的元素称为块元素(block element)
hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup
em标签用于表示语音语调的一个加重在页面中不会独占一行的元素称为行内元素(inline element)
strong表示强调,重要内容!
blockquote 表示一个长引用
q表示一个短引用
br标签表示页面中的换行

p17.块和行内

块元素(block element)
- 在网页中一般通过块元素来对页面进行布局
行内元素(inline element)
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正
比如:
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素

p18.语义化标签

header 表示网页的头部
main 表示网页的主体部分(一个页面中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容(侧边栏)
article 表示一个独立的文章
section 表示一个独立的区块,上边的标签都不能表示时使用section
div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
span 行内元素,没有任何的语义,一般用于在网页中选中文字

p19.列表

在html中也可以创建列表,html列表一共有三种:
1、有序列表
2、无序列表
3、定义列表
无序列表,使用ol标签来创建无序列表
使用li表示列表项
无序列表,使用ul标签来创建无序列表
使用li表示列表项
定义列表,使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套

p20.超链接

使用 a 标签来定义超链接
属性:
href 指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以写一个内部页面的地址
超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素

p25.内联框架

内联框架,用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框

p26.音频播放

1)audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时,默认情况下不允许用户自己控制播放停止
属性:
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
2)使用video标签来向网页中引入一个视频
- 使用方式和audio基本上是一样的

p27.css简介

第二种方式(内部样式表)
将样式编写到head中的style标签里
然后通过CSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部应用
内部样式表更加方便对样式进行复用
问题:
我们的内部样式表只能对一个网页起作用,
它里边的样式不能跨页面进行复用

p39.选择器权重

选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级

p44.文档流

文档流(normal flow)
-网页是一个多层的结构,一层摞着一层
-通过CSS可以分别为每一层来设置样式
-作为用户来讲只能看到最顶上一层
-这些层中,最底下的一层称为文档流,文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列
-对于我们来元素主要有两个状态
在文档流中
不在文档流中(脱离文档流)
-元素在文档流中有什么特点:
- 块元素
- 块元素会在页面中独占一行(自上向下垂直排列)
- 默认宽度是父元素的全部(会把父元素撑满)
- 默认高度是被内容撑开(子元素)
- 行内元素
- 行内元素不会独占页面的一行,只占自身的大小
- 行内元素在页面中左向右水平排列,如果一行之中不能容纳下所有的行内元素
则元素会换到第二行继续自左向右排列(书写习惯一致)
- 行内元素的默认宽度和高度都是被内容撑开

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值