web第二天

最新推荐文章于 2024-09-28 19:02:04 发布

冰糖•小葫卢

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量30

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_61811045/article/details/130185836

版权

本文详细介绍了HTML5的新标签如iframe、canvas、article、embed、details、div等，以及属性如class、id、contenteditable和tabindex等。同时，讲解了CSS的作用、书写规范和选择器类型，包括基本选择器、伪类和伪元素选择器。此外，还涵盖了边框、颜色、透明度、文字和文本样式的设置。

摘要由CSDN通过智能技术生成

一、html5新标签

1、iframe：进行页面嵌套

<iframe src="./02-cnd.html" frameborder="0" width="200px" height="50px" </iframe>

2、canvas：是一个容器，通过js进行绘制

<canvas width="300px"></canvas>

3、article：定义页面独立的内容区域

4、embed：定义嵌入的内容，比如插件

<object>

            <embed src="./02-cnd.html" width="300px" height="50px"></embed>

        </object>

5、details：用于描述文档或文档某个部分的细节

 <details>
        <summary>我是文章解释</summary>
        <p> - by Refsnes Data. All Rights Reserved.</p>
        <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
    </details>

6、div：分顶部、内容、尾部

header：定义了文档的头部区域

nav：定义导航链接的部分

section：定义文档中的节（section、区段）

<div class="top"></div>
<div class="content"></div>
<div class="footer"> </div>

<header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
        </ul>
    </nav>
</header>
<article>
    <header>
            苹果
    </header>
    <section>
            <h1>hongfushi</h1>
            <p>
                jdsckdsjocdsldjv
            </p>
    </section>
    <section>
            <h1>hongfushi</h1>
            <p>
                jdsckdsjocdsldjv
            </p>
    </section>
<footer>
            kdjcosdc
</footer>

</article>
<footer>
        <p>xknsmds</p>
</footer>

7、aside：定义页面的侧边栏内容

二、html属性

1、class：为html元素定义一个或多个类名（classname）(类名从样式文件引入)

id：定义元素的唯一id

2、contenteditable：可以设置页面内容进行更改

3、spellcheck：拼写检查

4、tabindex：tab遍历，设置元素的 Tab 键控制次序。

        tabindex=负值 (通常是 tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用 JS 做页面小组件内部键盘导航的时候非常有用。

        tabindex=“0”表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的 DOM 结构来决定的。

        tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex的数值递增而滞后获焦。如果多个元素拥有相同的tabindex，它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。

5、accesskey：快捷键指定

6、hidden：隐藏

三、CSS

1、CSS：层叠样式表（Cascading style sheets）

2、CSS作用：给页面中断HTML标签设置样式

3、书写规范

选择器{

属性名：属性值；

}

<!--第一种-->
<style>
    .box {
        width: 300px;
        height: 100px;
        color: pink;
        background-color: aqua;
        text-align: center;
        }
 </style>

<!--第二种-->
<div class="box1" style="color: pink;">pink</div>

<!--第三种-->
<!-- 外联 -->
<link rel="stylesheet" href="./06-index.css">

css选择器：
基本选择器：类选择器、id选择器、标签选择器、*（通用选择器）

<head>
<style>
        /*通用选择器，层叠性：后边的css覆盖掉前边的 */
        * {
            padding: 0;
            margin: 0;
            color: red;
        }

        /* 类选择器 */
        .box1 {
            width: 300px;
            height: 50px;
            background-color: aqua;
        }

        /* 标签选择器 */
        p {
            color: pink;
        }

        /*  id选择器*/
        #box2 {
            color: chartreuse;
            font-size: 30px;
        }
</style>
</head>
<body>
    <div class="box1">1</div>
    <div id="box2">2</div>
    <p name="p">我是p</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</body>

包含选择器：子代选择器＞（亲儿子）、后代选择器空格、逗号选择器（分组选择器）

<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>包含选择器</title>
    <style>
        /* 子代选择器 */
        .box>li {
            color: red;
        }

        /* 后代选择器 */
        .box ul li {
            color: aqua;
        }

        /* box中所有的li */
        .box li {
            background-color: blueviolet;
        }

        /* 逗号选择器   分组选择器*/
        .p1,
        .p2,
        .box3 {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>我是一个小li</li>
            <li>我是一个小li</li>
            <li>我是一个小li</li>
            <li>我是一个小li</li>
            <li>我是一个小li</li>

        </ul>
        <li>我是一个小li</li>
        <li>我是一个小li</li>
        <li>我是一个小li</li>
        <li>我是一个小li</li>
        <li>我是一个小li</li>
    </div>
    
    <p class="p1">我是汉zi</p>
    <p class="p2">我是汉zi</p>
    <div class="box3">woshihezi</div>
</body>

属性选择器：厲性名："属性值"

<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>属性选择器</title>
    <style>
        /* 属性选择器 */
        /* [属性名="属性值"] */
        input[type="text"] {
            background-color: pink;
        }

        /* [type^="t"] type值以t开头的 */
        input[type^="t"] {
            background-color: red;
        }

        /* 具有该属性就能选到 */
        div[name] {
            color: blueviolet;
        }

        /* [type$="h"]选择type属性值以h结尾元素 */
        input[type$="h"] {
            background-color: greenyellow;
        }

        input[type*="ma"] {
            background-color: green;
        }

        /* .box1+p   +号代表下一个 */
        .box1+p {
            background-color: blue;
        }
    </style>
</head>

<body>
    <input type="text"><br>
    <input type="password"><br>
    <input type="search"><br>
    <input type="email"><br>
    <div name="box" class="box1">1111伤心啊生产线的似的是的</div>
    <p>我是yi段文字</p>
    <p>经甲方甲方甲方</p>
    <p>经甲方甲方甲方</p>
    <p>经甲方甲方甲方</p>
    <p>经甲方甲方甲方</p>
    <p>经甲方甲方甲方</p>
</body>

伪类选择器：:link、:visited、:hover、:active、:focus、:last-child、:first-child、:nth-child(2)

<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>
        a:link {
            color: aqua;
        }

        /*让超链接点击之后是橙色*/
        a:visited {
            color: orange;
        }

        /*  */
        a:hover {
            color: green;
        }

        /*  */
        a:active {
            color: red;
        }

        /* love   hate */
        input:focus {
            background-color: pink;
        }

        .father div:last-child {
            color: pink;

        }

        .father div:nth-child(2) {
            color: aqua;
        }

        .father div:first-child {
            color: aqua;
        }
    </style>
</head>

<body>
    <a href="#">去百度</a>
    <input type="text">


    <div class="father">
        <div>我是儿子</div>
        <div>我是儿子</div>
        <div>我是儿子</div>
        <div>我是儿子</div>
        <div>我是儿子</div>
    </div>
</body>

伪元素选择器：::first-line、::section、::first-letter、::before、:: after(content)

<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>
        p::first-line {
            color: blue;
        }

        /* p::first-letter {
            font-size: 200px;
        } */

        /* 用来创建一个伪元素，作为已选中元素的第一个子元素 */
        p::before {
            content: 's';
            width: 40px;
            height: 40px;
            background-color: pink;
            border: 1px solid red;
            border-radius: 20px;
        }

        /* 用来创建一个伪元素，作为已选中元素的最后一个子元素 */
        p::after {
            content: '----gouxin';
        }

        /* 文档中被用户高亮的部分 */
        p::selection {
            color: blueviolet;
            background-color: pink;
        }
    </style>
</head>

<body>
    <p>美食卡毛孔粗大美食卡毛孔粗大美食卡毛孔粗大美食卡毛孔粗大vv美食卡毛孔粗大美食卡毛孔粗大美食卡毛孔粗大美食卡毛孔粗大美食卡毛孔粗大美食卡毛孔粗大美食卡毛孔粗大</p>
    <p>美食卡毛孔粗大</p>
    <p>美食卡毛孔粗大</p>
    <p>美食卡毛孔粗大</p>

</body>

4、边框及弧度

<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>
        .box1 {
            width: 200px;
            height: 50px;
            border: 10px solid pink;
            /* border-width: 2px;边框宽度
            border-style: dashed;边框样式
            border-color: chartreuse; 边框颜色
            solid实心*/

        }

        button {
            width: 200px;
            height: 100px;
            border: 2px solid pink;
            /* 弧度*/
            /* border-radius: 10px; */
            /* border-top-right-radius: 20px;右上 */
            /* border-bottom-right-radius: 20px;右下 */
        }
    </style>
</head>

<body>
    <!-- <div class="box1"></div> -->
    <button>提交</button>
</body>

5、颜色

<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>color</title>
    <style>
        span {
            /* display: block;将行内元素转成扩展元素 */
            width: 300px;
            height: 100px;
            border: 1px solid red;
            color: #ad1878;
            /* color: rgb(red, green, blue); */
            border-color: aqua;
            background-color: darkred;

        }
    </style>
</head>

<body>
    <span>我是标准的行内元素</span>
    <div></div>
</body>

6、透明度

<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>透明度</title>
    <style>
        .box {
            /* cursor鼠标样式 */
            cursor: pointer;
            width: 300px;
            height: 300px;
            /* rgba:设置透明度的 */
            background-color: rgba(200, 100, 100, 0.5);
            /* opacity  0-1  设置透明度的 */
            /* opacity: 0.3; */


        }

        .box:hover {
            opacity: 0.4;
        }
    </style>
</head>

<body>
    <div class="box"></div>

</body>

7、文字样式

<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>文字</title>
    <style>
        p {
            /* font-size: 50px;字体大小
            font-family: 'Courier New', Courier, monospace;字体样式
            font-weight: 800加粗;
            font-style: italic; 倾斜*/
            /* 不建议进行连写    顺序不能乱 */
            font: italic bolder 50px 'Courier New', Courier, monospace;
        }
    </style>
</head>

<body>
    <p>
        在单位里，庞新秀是格外惹人注意的存在。她外表艳丽，又好化妆打扮，又正值大好的青春年华，可以说是个人见人爱的大美女。平日里，单位的一些心思不正领导们，没少照顾她。

        庞新秀生得，工作能力也不逊色。在仕途上，庞新秀走得很顺。虽然刚入职单位没几年，但升迁的机会很快就出现在了她的眼前，她由一个普通的办事员升为了束河街道办事处的科技副主任。

        但这对于庞新秀顺畅的仕途来说，才刚刚开始……

        庞新秀本人就是个十分有野心的女子，她对上位者的权力十分热衷，对于当上高官，更是求之不得。为了实现自己的职务快速晋升，颇有进取心的庞新秀还特意去考了在职研究生的学历，成为了单位里的“高知分子”。


    </p>
</body>

8、文本样式

<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>文本</title>
    <style>
        p {
            /* text-indent: 32px; */
            /*  text-indent   缩进   em代表一个文字的大小 */
            text-indent: 2em;
            font-size: 32px;
            text-decoration: underline;
        }
        .box {
            width: 250px;
            height: 200px;
            background-color: pink;
            /* 水平居中  text-align  */
            text-align: center;
            /* 单行文本垂直居中，行高等于容器高度 */
            line-height: 200px;
        }
        a {
            /* display: block; */
            /* inline-block  行内块元素 */
            display: inline-block;
            width: 300px;
            text-decoration: none;
            color: aquamarine;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">baidu</a>
    <a href="https://www.baidu.com">去百度</a>
    <a href="https://www.baidu.com">去百度</a>
    <!-- <div class="box">你是好人</div> -->
    <p>
        在单位里，庞新秀是格外惹人注意的存在。她外表艳丽，又好化妆打扮，又正值大好的青春年华，可以说是个人见人爱的大美女。平日里，单位的一些心思不正领导们，没少照顾她。庞新秀生得，工作能力也不逊色。在仕途上，庞新秀走得很顺。虽然刚入职单位没几年，但升迁的机会很快就出现在了她的眼前，她由一个普通的办事员升为了束河街道办事处的科技副主任。 但这对于庞新秀顺畅的仕途来说，才刚刚开始……庞新秀本人就是个十分有野心的女子，她对上位者的权力十分热衷，对于当上高官，更是求之不得。为了实现自己的职务快速晋升，颇有进取心的庞新秀还特意去考了在职研究生的学历，成为了单位里的“高知分子”。
    </p>
</body>

9、背景

<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>背景</title>
    <style>
        body {
            height: 3000px;
            background-color: pink;
            /*  background-image：url（）引入图片*/
            /* background-image: url(./images/王者.jpg);
            /*  background-repeat    图片是否平铺 */
            background-repeat: no-repeat;
            /* background-attachment：控制背景图是否滚动 */
            background-attachment: fixed;
            /*  background-size：背景图片大小 */
            /* background-size: cover; */
            /* background-position：定位 */
            /* background-position: x   y; */
            background-position: -100px 200px;
            /* 推荐   没有顺序 */
            background: url(./images/王者.jpg) no-repeat fixed;
        }
    </style>
</head>

四、作业

1、

<!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>小米侧边导航栏</title>
<style>
    .box{
        width: 234px;
        height: 420px;

    }
    .box a{
        display: block;
        width: 234px;
        height: 42px;
        background-color: #2c505f;
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        text-indent: 30px;
        line-height: 42px;
    }
    .box a:hover{
        background-color: red;
    }
</style>
    

</head>
<body>
    <div class="box">
        <a href="#">手机 电话卡</a>
        <a href="#">电视 盒子</a>
        <a href="#">笔记本 显示器</a>
        <a href="#">家电 插线板</a>
        <a href="#">出行 穿戴</a>
        <a href="#">智能 路由器</a>
        <a href="#">电源 配件</a>
        <a href="#">健康 儿童</a>
        <a href="#">耳机 音箱</a>
        <a href="#">生活箱包</a>

    </div>
</body>
</html>

2、

<!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>平衡车</title>
    <style>
        body{
            background-color: #f5f5f5;
        }
        .box{
            width: 234px;
            height: 300px;
            background-color: #fff;
            /* 标签div居中 */
            margin: 0 auto;
            /* 内容居中 */
            text-align: center;
        }
        img{
            width: 160px;
            height: 200px;
        }
        /* 产品标题 */
        .title{
            font-size: 14px;
            line-height: 25px;
        }
        .info{
            color: #ccc;
            font-size: 12px;
            line-height: 30px;
        }
        .money{
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./1.jpeg" alt="">
        <div class="title">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="money">1999元</div>
    </div>
</body>
</html>