复习1-HTML与CSS

最新推荐文章于 2024-11-14 20:19:01 发布

前端哈钟

最新推荐文章于 2024-11-14 20:19:01 发布

阅读量33

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_45826059/article/details/133979935

版权

复习1

1.HTML

HTML 称为超文本标记语言超文本：代表内容，文字，图片，音频等等都可以输入标记 : 标签有着些特殊的用法，如 H1 img input

自结束标签标签一般都成都出现，但是也有一些自结束标签

祖宗标签，父级标签，后（子）代标签前前一个就是祖宗标签，前一个就是父级标签，后一个就子标签，

注释：注释不可以嵌套出现注释是来解释代码说明的，在开发中要养成写注释的习惯（重点！）

2.属性

属性只能在开始标签或在自结束标签设置，不能在结束标签设置，属性和标签名直接要用空格隔开，和其他属性相互用空格隔开属性是一个名值对相当于 x = y 属性是用来设置标签中的内容如果显示

<h1>这是<font color="red">再次</font>写网页</h1>

3.进制、编码

3.1进制

进制分为二进制八进制十进制十六进制

二进制：二进制是代表为了让我们计算机读取，识别二级制满二进一特点：满二进一最近很火的一点电影就用到二进制孤注一掷，张艺兴就用到6 6就表示110

八进制 (很少用)：都是一个意思，满8进1

十进制(我们日常使用)：就是 1 2 3 4 5 6 7 8 9 10 满10进1

十六进制：要是满到 16进1就跟10进制没有区别，所以在16进制增加了 a ,b ,c, d, 所以就变成了这样 0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 13 14 … 19 1a 1b 1c 1d 1e 1f 20…

3.2编码

有编码就有解码，都是字面意思编码：指的是字符串转化成二级制的过程叫做编码解码：指的是二进制转换为字符的过程称为解码

常见的字符集

ASCll （美国版）

ISOBB591 （欧洲版）

GB2312 （中国版）

GBK （中国版升级版）

UTF-8 (万国符 - 现基本使用这个)

常见的问题：从windows 记事本写的代码复制到代码编译器去，却发现乱码，有一些？号这些，这就说明编码不统一

4.实体

在网页中编写多个空格会被浏览器解析成一个空格在HTML中有些时候，我们不能直接书写一些特殊符号比如多个空格，比如字母两侧的两个大于号如果我们需要在网页中书写这些特殊符号，，则需要使用HTML中的实体（转移字符）用法： & nbsp; 空格 &gt；大于 & lt;小于 &copy；版权符号

5.标签

5.1语义化标签（常见）

：可以把相似的标题放在hgroup ：音调强调的文本

：重要的文本短引用

blockquote>可以把一些很长的文章放在这里 --块级标签长引用

header – 表示网页的头部 main --表示一个网页的主题部分（一个页面中只能有一个main）

footer --表示网页的底部 nav --表示网页的中导航

aside – 和主体相关的其他内容（侧边栏） article --表示一个文章表示标签里面是可以写很多段落

section–表示一个独立的区块，上边的标签都不能表示就使用section

5.2 meta标签（元数据）

一般设置在head标签里面， meta主要设置网页中的一些元数据，元数据不会给用户看，是给浏览器或搜索引擎爬虫看的，还有就是设置一些对硬件的，如设置移动端的完美视口目前这个阶段常见的就是，每当搜索网页都会出现此网站的描述和关键字，这也是在meta中属性的

5.3 列表标签

无序列表:使用ul来创建无序列表使用li表示表项

有序列表:使用ol来创建无序列表使用li表示表项还有很多属性，如设置a,b,c来排序

定义列表：使用dl表示创建一个定义列表使用dt表示定义内容使用dd来对dt进行解释说明

5.4 块元素（block element）行级标签（inline element）

知道了那么多标签，现在也该知道，浏览器还会对标签进行不同属性区分

块元素（block element）

-在网页中一般通过块级元素布局可以设置 width height margin padding

行级标签（inline element）

行内元素主要是用来包裹文字的可以设置 margin-left margin-right padding-left padding-righ 宽度就等于现在的大小

注意 p元素中不能放任何元素如果写了就浏览器会帮忙改正的会变成

文字

6.超链接 a标签

a标签：可以让我们从另一个页面跳转到其他页面或者是当前页面的其他位置使用href填写路径，那什么又是跳转当前页面其他位置了，最简单的跳转方式：返回指定位置可以在href属性的属性值#号后面加上相对于的ID 然后设置一个id为刚刚你设置的属性值一样，id就代表唯一值下面是例子

去p3< /a>

7.img img格式

img表示图片：使用src来引入资源，以后会有一道经典面试题就是 href和src有什么区别，大家可以去了解一下， img有一个属性，alt 图片描述图片加载不成功的时候显示文字，鼠标移动在图片上会显示，这个属性还是写着比较好，虽说图片如果没有成功会导致样式有问题，还是有优点的

img格式：常见的 JPG 也可以是JPEG 支持的颜色比较丰富，不支持透明的效果，不支持动图：GIF 支持的颜色比较少，支持简单透明的效果，支持动图 PNG：支持的颜色丰富，支持复杂透明的效果，不支持动图 wedp：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式兼容性不好， base64将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引用图片base64还是最好使用几kb的图片转换比较好

8.内联框架 iframe

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

9.audio(音频) video(视频）

很明显了都是字面意思， controls ：表示是否给用户控制播放 autoplay ：表示是否自动播放 loop : 表示自动循环播放最重要的属性 source 可以通过src来指定外部文件的路径以外，还可以通过sourec来指定文件视频也是这些属性，例

《》

7.选择器

这个选择时非常重要的，关系到JS，CSS控制，目前肯定还是以css为主

1.元素选择器，例：div{} 2.id选择器列：#box{} 3.class（类）选择器列：.box{} 5.通配选择器 * 语法：*{}

6.交集选择器选中同时复合多个条件的元素(同时满足) 选择器1选择器2选择器3选择器n{} div.box{} .box.a.b.c{}

并集选择器作用同时选择多个选择器对应的元素 #id,div,.box,div.class{}

8.关系选择器

1.祖先元素：直接或间接包含后代元素的元素叫做祖先元素 2.后代元素：直接或间接被祖先元素包含的元素叫做后代元素

3.父元素：直接包含子元素的元素叫做父元素 4.子元素直接被父元素包含的元素是子元素 5.兄弟元素

<style>
div>span{
         color: red;
     }

     p span{
         color: aqua;
     }
   
     P+span{
         color: blue;
     }
     
     p ~ span{
         color: blueviolet;
     }
     
 </style>

这是p 这是p元素里面的span

     <span>这是div里面的span</span>
     <span>这是div里面的span</span>
     <span>这是div里面的span</span>
     <span>这是div里面的span</span>
     <span>这是div里面的span</span>
 </div>

9.属性选择器

[属性名]选择含有指定属性的元素， [属性名 = 属性值]选择含有指定属性和属性值的元素 [属性名 ^= 属性值]选择属性值已指定开头的元素 [属性名 $= 属性值]选择属性值已指定结尾的元素 [属性名 *= 属性值]选择属性值含有某值的元素的元素

        p[title]{
            color: burlywood;
        }
        p[title = a]{
            color: rgb(105, 104, 102);
        }
        p[title ^= a]{
            color: rgb(40, 208, 238);
        }
        p[title $= a]{
            color: rgb(216, 10, 10);
        }
        p[title *= b]{
            color: rgb(231, 37, 248);
        }
    </style>
    <p title="a">这是一个a属性</p>
    <p title="ab">这是一个ab属性</p>
    <p title="b">这是一个b属性</p>
    <p title="cba">这是一个cba属性</p>

10.伪类选择器

伪类（不存在的类，特殊的类），用来选中特定位置的类，比如选择第一个，最后一个，其他一个，除了第几个，伪类都已问号开头

：first-child 第一个元素 2.：last-child 最后一个元素 3.：nth-child（）表示第n个元素，可以传入 n表示第几个 n的范围0到正无穷 2n或even表示偶数位的元素 2n+1或add表示奇数位的元素

用法
       <style>
      div>p:first-child{
            color: chartreuse;
        }

        div>p:last-child{
            color: cyan;
        }

        div>p:nth-child(2){
            color: darkorchid;
        }
        div>p:nth-child(2n+1){
            color: darkorchid;
        }

        div>p:first-of-type{
                color: gold ;
        }
        div>p:last-of-type{
                color: rgb(18, 187, 136) ;
        }


        div>p:not(:nth-child(3)){
            color: hotpink;
        }
    </style>
    <div>
        <span>这个是span</span>
        <p>这是第一个</p>
        <p>这是第二个</p>
        <p>这是第三个</p>
        <p>这是第四个</p>
        <p>这是第五个</p>
    </div>