前端1+x考证：上篇

最新推荐文章于 2024-09-15 10:33:02 发布

真爱计划

最新推荐文章于 2024-09-15 10:33:02 发布

阅读量275

点赞数 1

分类专栏： JavaScript 文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_64612659/article/details/125333189

版权

JavaScript 专栏收录该内容

93 篇文章 1 订阅

订阅专栏

1html和标签介绍

www--万维网（环球信息网）简称web

分为web客户端和web服务器程序

www可以让web客户端（常用游览器）访问游览web服务器上的页面

w3c--万维网联盟

文件名的命名规范：

不能数字开头

在项目不可用汉字命名

不能出现特殊字符

html

概念：

1.描述网页的语言

2.超文本标记语言，由一套标签组成

3.不是编程语言

声明：告诉游览器用什么标准解析网页

网页的组成部分：结构层，表示层，行为层

标签：

概念:

1.由<>包围的关键词

2.标签通常成对出现，分为标签开头和标签结尾

3.有部分标签是没有结束标签，称为单标签，单标签必须用 / 结尾

组成：

标签名标签内容标签属性

语义化标签：

概念：根据标签名就能判断出标签内容

作用：

1.网页结构层次更清晰

2.更容易被搜索引擎收录

3.更容易让屏幕阅读器读出网页内容

注：页面中所有的内容，都要放在HTML标签中

标签的内容可以是其他标签

2html元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    标题标签
    <h1 id="main">标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    段落标签
    <p>段落标签</p>
    换行标签
    <br/>
    水平线
    <hr/>
    强调标签
    <em>倾斜</em>
    <i>倾斜</i>
    <strong>加粗</strong>
    <b>加粗</b>
    图片标签
    <img src="" alt="">
    超链接
    <a href=""></a>
    <a href="mailto:a.43@qq.com">邮箱</a>
    列表标签
    <ul>
        <!-- ul和li之间是不能出现别的标签 -->
        <li></li>
    </ul>
    <ol>
        <li></li>
    </ol>
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>
    表格标签
    <table>
        <caption>标题</caption>
        <!-- 一个表格只能有一个caption -->
        <tr>
            <td></td>
            <!-- rowspan行
                colspan列 -->
        </tr>
        表单标签
        <form action="" method="post">
            <!-- get和post的区别 get提交的信息会在游览器上显示 post不会 -->
           <input type="radio" name="sex" value="0">男<input type="radio" name="sex" value="1">女
           <!-- 要想选中一个另一个没有那就要选中单选按钮，同时设置同一个name值 -->
        </form>
    </table>
    无语义标签
    <div>块级元素的代表</div>
    <span>内联元素的代表</span>
    模块划分
        常见的企业站。多由头部区，展示图片区域，主题区域，底部信息区域组成
    考点：
        1.块级元素和内联元素，空元素（块级元素和内联元素的区别之一就是块级元素能设置宽高，而内联元素不行）
        2.alt与title的区别
        3.head标签中的哪个标签不能省略
        4.标签书写正确的是
        5.src与href的区别（src是链接本地资源，href则是链接网络资源）
        6.<!DOCTYPE html>的意义
        7.语义化标签的作用
</body>
</html>

3css语法和选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="3.css"> -->
    <style>
        @import url(3.css);
        div::before{
            /* div前面 */
            content: "";
            /* 这个属性能为空，但不能没有它 */
        }
        div::after{
            content: none;
            /* div后面 */
        }
    </style>
</head>
<body>
    css
        概念：css全称层叠样式表，它主要是用于定义HTML内容在游览器内的显示样式
        引入方式：
            1.外部样式引入
                link
                @import
            2.内部样式
                代码通常放在<style></style>标签内
            3.内联样式
        语法：css样式由选择器和声明组成，而声明又由属性和值组成
            选择符{属性：值}例：p{color:red}
            选择符：又称选择器。指明网页中要应用样式 规则的元素
        选择器：
            标签选择器
            类选择器
            di选择器
            通配符选择器
            后代选择器
            子元素选择器
            群组选择器
            伪类选择器
        背景：
        背景颜色:backgroup-color
        背景图片:backgroup-image
        背景图片位置:backgroup-position
        背景图片重复:backgroup-repeat
        背景图片定位:backgroup-attachment:scroll/fixed
        简写
        backgroup：#fff url(../) no-repeat fixed center
    考点：
        1.link和@import的区别（无样式闪烁问题FOUC）
            @import是css提供的语法规则，只有导入样式表的作用：link是html提供的标签
            不仅可以加载css文件，还可以定义RSS，rel连接属性等。
            加载页面时，link标签引入的css被同时加载：@import引入的css将在页面加载完毕后被加载
            @import是css2.1才有的语法，故只可在IES才能识别；link标签作为HTML元素，不存在兼容性问题
        2.三种引入样式的优先级
        3.选择符的优先级
        通配符 0 标签 1 类/伪类/属性 10 ID 100 行内样式 1000 important(无限大)
        <div>
            <ul>
                <li>
                    <a href=""></a>
                    <div>
                        <p></p>
                    </div>
                </li>
            </ul>
        </div>

</body>
</html>

4css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            cursor:copy;
            /* 鼠标指针 常用的 pointer progress */
        }
        
    </style>
</head>
<body>
    <div class="box">
        </div>
        基本样式:
            宽 高 鼠标样式 可见样式（display：none不占空间;visibility:hidden占空间的；opacity(透明度):0） 溢出隐藏（overflow:scroll 溢出出现滚动条） 透明度 
        字体样式:
            字体 font-family
            字号 font-size
            字的样式:font-style
            字的粗细:font-weight
            字的颜色:color
        文本属性:
        行高:line-height
        文本修饰:text-decoration
        缩进:text-indent
        字符间距:letter-spacing
        空白间距:word-spacing（主要应用于英语文章，中间有个空格）
        英语大小写:text-transform:capitalize/uppercase/lowercase
        文字水平对齐方式:text-align
        文本所在行高垂直对齐方式:vertical-align
</body>
</html>

5css盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    盒模型：
        组成部件：外边距+边框+内边距+内容
    IE盒模型和标准盒模型切换
        box-sizing:border-box;(IE盒模型)
    元素分类
        块级元素
            1.每个块级元素都从新的一行开始，并且其后的元素也另起一行。
            2.元素的高度，宽度，行高以及顶和底边距都可设置。
            3.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
            <div> <p> <h1>-<h6>
                <ol> <ul> <dl>
                <address> <blockquote>
                <form>
        行内元素
            1.和其他元素都在一行上；
            2.元素的高度，宽度，行高及底部边距不可设置；
            3.元素的宽度就是它包含的文字或图片的宽度，不可改变
            <a> <span> <br/> <i>
                <em> <strong> <label>
        行内块状元素
            1.和其他元素都在一行上；
            2.元素的高度，宽度，行高以及顶和底边距都可设置。
            <img> <input> select
            textarea button iframe
    元素分类转换
        display
                block：转换为块级元素
                inline:转换为行级元素
                inline-block:转换为行内块级元素
                none:将元素隐藏
        样式初始化的原因：由于游览器内核的不同，对标签默认样式的解析不同，导致页面呈现的样式不同
        样式初始化
        *{
            magin:0;
            padding:0;
        }
                    
</body>
</html>

6css浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0px;
        }
        .box{
            height: 1000px;
            width: 1000px;
            background-color: red;
        }
        .box ul li{
            width: 100px;
            height: 100px;
            border: 1px solid yellowgreen;
            float: left;
        }
        /* span{
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        } */
        /* 清除浮动的方法 */
        .box ul::after{
            content: "";
            display: block;
            clear: both;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    浮动原理：
        1.浮动使元素脱离文档普通流，漂浮在普通流之上的。（所谓的脱离文档流，就是不占空间）
        2.浮动元素依然按照在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘
        遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。
        3.浮动会产生块级框（相当于设置了display：blink），而不管该元素本身是什么
        <div class="box">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <!-- <span>ss</span> -->
            </ul>
        </div>
        <div class="box">
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div class="clear"></div>
                <!-- <span>ss</span> -->
            </ul>
        </div>
    </body>
</html>

7css定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    相对定位（相对于原位置）
        1，需要设置position:releative(相对定位)
        2.它通过left,right,top,bottom属性确定在正常文档流中的偏移位置
        3.相对于原位置移动，移动的方向和幅度由left,right,top,bottom属性确定，偏移前的位置保留不动
        4.z-index层级设置
    绝对定位（相对于父类）
        1.需要设置position:absolute(绝对定位)
        2.使用left,right，top,bottom属性相对于对其最接近的一个具有定位属性的父包含块进行绝对定位
        3.如果不存在这样的包含块，则相对于body元素，即相对游览器窗口
        4.z-index层级设置
    固定定位（相对于网页窗口）
        与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随游览器的元素
        会始终位于游览器窗口内视图的某个位置，不会受文档流动影响，这与backgroup-attachmet:fixed属性的功能相同。
        4.z-index层级设置
</body>
</html>

8页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    布局思路：
        从外向里
        从上至下
        从左到右
    样式编写顺序：
        1.定位（float postition）
        2.宽，高，边距
        3.文字样式
        4.背景样式
        5.过渡 动画
    样式书写规范：
        1.0.5可以写.5 0可以省略
        2.对于可以简写的属性尽量简写
        3.给予元素添加样式前些父级类名
        4.布局是尽量使用类，不要使用id
    问题：
        1.乱码问题 编码
        2.样式引入无效问题（属性丢失，路径错误）
        3.清除浮动问题
        4.定位乱的问题---找绝对定位的父级添加相对定位
        5.a标签鼠标经过无效问题--：a:link  a:visited a:hover a:active 顺序乱了，鼠标经过无效
    兼容性问题（css HACK）
        概念：css hack 是通过在css样式中加入一些特殊的符号，让不同的游览器识别不同的符号
        css属性Hack,css选择器hack以及IE条件注释hack, hack主要针对IE游览器
            1.属性和hack:
                ie6能识别下划线“_”和星号“*”，
                ie7能识别星号“*”，但不能识别下划线“_”,
                而firefox俩个都不能认识
            2.选择符级hack：
                ie6能识别*html .class{},
                ie7能识别*+html .class{}或者*：first-child+html .class{}
            3.ie条件注释hack
        

</body>
</html>