HTML5+CSS3+JavaScript学习笔记

最新推荐文章于 2024-06-18 09:01:21 发布

-和敬-

最新推荐文章于 2024-06-18 09:01:21 发布

阅读量4k

点赞数 3

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/weixin_43410827/article/details/104094294

版权

前端学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

基础知识

HTML5 基础入门

HTML5 的基本概念

什么是HTML5

HTML5 是标记语言，使用标记标签描述网页。

HTML与XHTML

XHTML是可扩展的超文本标记语言，是一种置标语言，是更严格、更纯净的HTML版本。XHTML是以XML格式编写的HTML。XHTML具有<!DOCTYPE...>强制性、元素必须合理嵌套、元素必须有关闭标签、空元素必须包含关闭标签、元素必须是小写、属性名称必须是小写、属性值必须有引号和不允许属性简写等特性。

HTML5 的优势

解决跨浏览器问题
部分代替原来的JavaScript
例：获取文本框的焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<body>
<form action="demo">
    姓名:<input type="text" name="Name"/><br/>
    成绩:<input type="text" name="Grade" ID="grade"/><br/>
</form>
</body>
</html>
<script>
    document.getElementById("grade").focus()
</script>

简化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<body>
<form action="demo">
    姓名:<input type="text" name="Name"/><br/>
    成绩:<input type="text" name="Grade" autofocus/><br/>
</form>
</body>
</html>

获取文本框焦点：光标移动到输入框中，等待输入

更明确的语义支持
增强web应用程序的功能

网页和网站

网页和网站的关系

网页：文件，存储在计算机中，通过网址识别和获取，在浏览器中输入网址后，网页文件被传送到正在浏览网页的计算机中，通过浏览器对网页进行解析，展示给用户。
网站：根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合
网页和网站的区别：网站有后台，网站的内容可以更换，网页没有后台，内容固定，不可更换。
网页和网站的联系：网站由网页组成，网页设计是网站设计的基础。

就业面试技巧

XHTML是一种示应XML而重新创造HTML，当用户有了XML之后，是否还需要HTML？
答：依然需要HTML。
原因：很多人习惯使用HTML作为设计语言，同时有大量页面采用HTML编写，因此依然需要HTML。
HTML文件的扩展名有哪些？
答：“.html”和“.htm”。
“.html”是当今网页文件的一种最基本、使用最广泛的保存形式，是一种超文本标记语言，页面中没有嵌入任何服务器要执行的语句，是一种静态的页面格式，一般浏览器都能直接解析并显示。
“.htm”与“.html”没有本质的区别，只是为了满足DOS的8+3的文件名命名规范。index.html和index.htm是两个不同的文件，对应着不同的地址。

HTML5 文档基本结构

HTML5 文档构成

HTML5 文档结构由头部(head)、主体(body)两部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

`<!DOCTYPE>`声明

代码：<!DOCTYPE html>

`<html>`标签

成对出现：<html></html>

`<head>`标签

<head>标签内包含的主要元素：

<title></title>：用于定义文档的标题
<meta>：用于定义html元数据
<link>：用于链接外部CSS资源文件
<style></style>：用于定义内部CSS样本
<script></script>：用于包含JavaScript脚本

`<body>`标签

<body>标签是HTML的主题部分，网页所要显示的内容存放在该标签中

<body>
</body>

HTML5 的语法变化

标签不再区分大小写
元素可以省略结束标签
支持boolean值得属性
允许属性值不适用引号
注：如果属性值包含引号，容易引起浏览器混淆的属性值，宜使用引号。

HTML5 标签、元素和属性

HTML网页是由HTML元素构成的文本文件，任何网页浏览器均可直接运行HTML文件，HTML元素是HTML文件的基本对象。

单标签

概念：由一个标签组成，在开始标签中关闭。
常见单标签：

<br/>：在页面中起换行作用
<hr/>：在页面中创建一条水平线
<meta/>：元素可提供有关页面的元信息
<img/>：图片标签，用于在页面插入图片

双标签

概念：由开始标签和结束标签两部分构成
常用双标签：

<h1></h1>：标题标签
<p></p>：段落标签
<ul></ul>：无序列表标签
<table></table>：表格标签

标签属性

形式：属性名=属性值

元素

概念：从开始标签到结束标签的所有代码
HTML元素的内容：位于开始标签和结束标签之间的文本

HTML5 文档头部标签

<head>标签是文档的头部标签，是所有头部元素的容器，<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等，文档的头部描述了文档的各种属性和信息，<title>定义文档的标题，是<head>标签中唯一必须的元素

设置页面标题标签

<title>标签定义文档的标题，是所有HTML文档中必须的，只能出现在<head>中

引用外部文件标签

<link>标签是引用外部文件标签，放置在一个网页的头部标签中，用于链接外部CSS文件

内嵌样式标签

<style>标签是内嵌样式标签，用于为HTML文档定义样式信息，位于<head>头部中，在<style>标签中。规定在浏览器中如何呈现HTML文档

`<meta>`标签

在网页中，<meta>标签用来做网页的关键字，页面说明，作者信息，网页的定时跳转等声明

设置页面的关键字
Keywords(关键字)用于告诉搜索引擎网页的关键字，代码如下：

<meta name="keyword" content="某人，论坛，学历，前端">

设置页面说明
Description(页面说明)用于告诉搜索引擎网站的主要内容，代码如下：

<meta name="description" content="web前端的一些面试技巧">

设置作者信息
Author(作者信息)用于介绍作者的一些信息，代码如下：

<meta name="author" content="某人，他的邮箱">

设置网页的定时跳转
网页多少秒后自动从当前页面跳转至另一个网页页面或网站，代码如下：

<meta http-equiv="Refresh" content="N;URL=    "/>

N 为跳转的时间，单位为秒

页面注释标签

语法：

各类标签

标题标签

HTML中标题由<h1>~<h6>标签来定义，其中<h1>代表一级标题，级别越高，文字越大,<h6>标签级别最小

标题标签对齐属性

标题字的对齐属性align，属性值：

center：居中对齐内容
left：左对齐内容
right：右对齐内容
justify：对行进行伸展，每行可以有相同的长度

段落标签

段落使用<p>标签，<p>开始和</p>结束之间的内容形成一个段落，段落之间自动换行且有空行

换行标签

换行标签<br/>是一个单标签，没有结束标签，用于将文字在一个段内强制换行

不换行标签

强制内容在一行内显示，使用不换行标签<nobr>，不换行内容放入<nobr></nobr>之间即可

水平线标签

将上下内容分隔开，可以使用水平线标签<hr>,100%宽度水平线，独占一行，水平线上下内容分隔一定的距离

插入空格

空格键打出的空格会被HTML自动忽略，通过 插入空格

插入特殊符号

在标签中插入特殊符号，使用&开头，;结尾

就业面试技巧

HTML5 中的新多媒体元素种类？
答：四种
audio元素：定义播放声音文件或者音频流的标准
video元素：定义播放视频文件或者视频流的标准
<source>元素：为媒体元素定义媒体资源，允许用户规定两个视频/音频文件龚浏览器，根据对媒体类型或编解码器的支持进行选择
embed元素：用于插入各种多媒体，格式为MIDI、WAV、AIFF、AU、MP3等
HTML5 中的分组元素种类？
答：三种
<.hgroup>元素：用于对网页或区段的标题进行组合，将<h1>~<h6>元素进行分组
<figure>元素：用于表示网页的一块独立的内容，移除后不会对网页上的其他内容产生影响
<figcaption>元素：为<figure>元素定义标题

CSS3 基础入门

CSS 的基本语法

CSS语法规则由两个主要的部分构成，分别是选择器以及一条或多条说明
选择器通常是用户需要改变样式的HTML元素，选择器直接与HTML代码对应

HTML网页应用CSS样式的方法

HTML文档引入CSS样式的方法：

行内样式
内嵌样式
链接样式
导入样式

使用行内样式表

行内样式是最简单的CSS设置方式，需要给每个标签都设置style属性，与样式所定义的内容在同一行代码内，用于精确控制一个HTML元素的表现，代码如下：

<p style="color: blue;font-size: 12px">行内样式表</p>

这种样式表不经常用，CSS样式与HTML结构没有分离，导致代码冗余，并且不利于维护

使用内部 CSS

内部CSS样式表一般是将CSS卸载<head></head>标签中，并使用<style></style>标签进行声明，代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: blue;
            font-size: 12px;
        }
    </style>
</head>

引入外部样式表

引入外部样式表是使用频率最高、也是最实用的方法，将HTML页面本身与CSS样式分格分离为两个或多个文件，有利于前期制作和后期维护。
引入外部样式表是指在外部定义CSS样式表并形成以.css为扩展名的文件，在页面中通过<link/>引入页面，代码如下：

<link rel="stylesheet" href="style.css"/>

rel：设置对象与链接目的间的关系，其值为stylesheet。表示关联的是一个样式表
href：指定CSS样式表的位置，此处表示当前路径下名称为style.css的文件

导入外部样式文件

概念：指在内部样式表的<style>标签中，使用@import导入一个外部样式表
代码如下：

<head>
    <style>
        @import "style.css";
    </style>
</head>

注释CSS

使用/*注释内容*/进行注释

CSS 三大特性

CSS的三大特性：层叠性、继承性和优先性

层叠性

说明：层叠性是处理CSS冲突的能力，当同一个元素同时被两个选择器选中时，CSS会根据选择器的权重决定使用哪个选择器，权重低的选择器效果会被权重高的选择器效果覆盖，权重相同取后者（权重可以理解为选择器对于这个元素的重要性，ID选择器的权重为100，类选择器的权重为10，标签选择器的权重为1）
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id="box"*/
        #box p{
            color: yellow;
        }
        /*id="box",class="box"*/
        #box .box{
            color: red;
        }
    </style>
</head>
<body>
<div id="box">
    <p class="box">我是什么颜色呢？</p>
</div>
</body>
</html>

涉及标签说明：

#box：表示ID选择器，前缀为#，使用方式：id="box"
.box：表示类选择器，前缀为.使用方式：class="box"

继承性

说明：继承性是子元素继承父元素样式的特性，以text-、font-、line-开头的属性以及color属性都可以继承，<a>标签的颜色不能继承，<h>标签的字体大小不能继承。

优先性

说明：当不同的规则作用到用一个html元素上时，如果定义的属性存在冲突，属性使用的优先性如下：
!important>行内样式>ID选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性值

在脚本中修改显示样式

方法：在脚本中获取元素，修改CSS样式

随机改变页面的背景色

动态增加立体效果

方法：通过色差简单实现立体效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .show{
            width: 150px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-right: #222 20px solid;
            border-bottom: #222 20px solid;
            border-top: #ddd 20px solid;
            border-left: #ddd 20px solid;
            background-color: #ccc;
        }
    </style>
</head>
<body >
<input type="button" value="增强立体效果" onclick="change()"/>
<!--增加分隔线-->
<hr/>
<div id="box">立体效果</div>
</body>
</html>

<script>
    function change() {
        //获取id="box"的元素，更改其类为show
        document.getElementById("box").className="show";
    }
</script>

实践案例：设计登录和注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        .content{
            background-color: #1cff89;
            position: absolute;
            width: 100%;
            height: 400px;
        }
        .main{
            text-align: center;
            padding: 50px 0px;
            margin: 0 auto;
        }
        h2{
            font-family: "Microsoft YaHei UI";
            font-size: 40px;
            font-weight: bold;
        }
        input{
            border:1px solid white;
            display: block;
            margin: 10px auto;
            padding: 5px;
            width: 230px;
            border-radius: 15px;
            font-size: 18px;
            /*设置字体加粗*/
            font-weight: 300;
            text-align: center;
        }
        button{
            background-color: #20a7ff;
            /*设置圆角边距*/
            border-radius: 10px;
            border: 0;
            height: 30px;
            width: 80px;
            padding: 5px;
            color: white;
        }
    </style>
</head>
<body >
<div class="content">
    <div class="main">
        <h2>You are welcome!</h2>
        <form>
            <input type="text" placeholder="用户名"/>
            <input type="password" placeholder="密码"/>
            <p>
                <button type="submit">登&nbsp;&nbsp;录</button>
                <button type="submit">注&nbsp;&nbsp;册</button>
            </p>
        </form>
    </div>
</div>
</body>
</html>

注释：

placeholder：可描述输入字段预期值的简短的提示信息
input：用户可以在其中输入数据的输入字段
display：规定元素应该生成的框的类型，属性值①inline，内联元素，特点：与其他元素都在一行上；元素的高度、宽度和顶部和底部的边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
②block，块级元素，特点：每个会计元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶部和底部的边距均可设置；元素宽度在不设置的情况下，使它本身父容器的100%（和父容器的宽度一致），除非设定一个宽度。
border-radius：给div元素添加圆角边距

就业面试技巧

在加载CSS文件时，link引入外部样式和@import导入外部样式的区别
答：link与@import在显示效果上还是有很大区别的，link的加载会在页面显示之前全部加载，而@import是读取完文件之后再加载，在网络速度很好的情况下，会出现刚开始没有CSS定义，而后才加载CSS定义，@import加载页面时开始的瞬间会有闪烁（无样式表的页面），然后恢复正常（加载样式后的页面），link没有这个问题，推荐使用link引入外部样式。
CSS hack
答：CSS hack是根据不同的浏览器编写不同的CSS样式，浏览器对CSS的解析认识不完全一致，会导致生成的页面效果不一，，因此需要针对不同的浏览器编写不用的CSS。

CSS3 样式选择器

选择器分类

CSS选择器分为五类：

基本选择器
层次选择器（子选择器、兄弟选择器、相邻选择器、包含选择器、分组选择器）
伪类选择器
属性选择器
伪元素选择器

基本选择器

元素选择器

标签选择器（标记选择器、类型选择器），用于声明html标签采用的CSS样式，即重新定义html标签，每个html标签的名称均可作为相应的标签选择器的名称

通配选择器

表示方法：*
作用：单独使用时，此选择器可以和文档中的任何元素匹配，如让页面上的所有文本都为红色：

*{color:red;}

或者选择某个元素下的所有元素，与其他元素结合使用时，通配选择器可以对特定元素的所有后代应用样式，如为div元素的所有后代添加一个红色背景：

div *{background:red;}

主要用途：在Reset样式文件中，使用通配选择器进行重置，覆盖浏览器的默认规则从而使页面能够兼容多种浏览器（不同浏览器中每个元素的默认边距不一致）

ID选择器

作用：允许以一种独立于文档元素的方式来指定样式，ID选择器前面有一个#，例#red {color:red;},在HTML代码中，id属性为red的p元素显示为红色，<p id="red">这个段落是红色</p>
注：同一个id属性在每个HTML文档中只能出现一次

类选择器

作用：允许以一种独立于文档元素的方式来指定样式，类选择器可以单独使用，也可以和其他元素结合使用
语法：.classValue{property:value}

群组选择器

作用：对CSS的一种简化写法，把相同定义的不同选择器放在一起，用,分开
语法：div,h1,p{background:red;}

层次选择器

作用：通过HTML的DOM元素间的层次关系获取元素，主要层次关系有后代、父子、相邻兄弟和通用兄弟

包含选择器（后代选择器）

作用：选择元素的后代元素，包括子元素、子元素的子元素…，包含选择器和子元素选择器之间使用空格来表示关系
语法：div li a{text-decoration:none;}

子选择器

作用：选择一个父元素的直接子元素，不包括子元素的子元素
语法：通过div>a{text-decoration:none;}
子选择器与后代选择器的关系：子选择器仅作用于它的直接后代，后代选择器作用于所有子后代元素

兄弟选择器

作用：设置某个选择器的兄弟元素的样式
语法：

选择器的后面一个兄弟元素，使用+连接选择器：h2+p{color:red}
选择元素后面同一类指定的兄弟元素，使用~连接选择器：h2~p{color:red}

动态伪类选择器

内容相关的属性

内容相关的属性与CSS其他属性一样，需要定义在CSS样式的大括号中，content属性是CSS支持的内容相关的属性中最重要的一个，该属性可以是字符串、url、attr、open-quote等格式
作用：指定元素之前或之后插入指定的内容
语法：

li:before{
            content: 'css课程:'; /*在每个li前面添加的内容*/
            color: red;/*设置添加内容的颜色*/
        }

插入图片

content属性除了可以添加字符串外，还可以添加图片
语法：content:url("");

只插入部分元素

作用：只为一部分元素插入内容，先把需添加内容的元素找到
例：只给前两个元素添加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        /*只在类为part的li元素前面添加内容*/
        li.part:before{
            content: 'CSDN:';
            color: aqua;
        }
    </style>
</head>
<body >
<ul>
    <li class="part">第一张内容</li>
    <li class="part">第二章内容</li>
    <li>第三章内容</li>
    <li>第四章内容</li>
</ul>
</body>
</html>

配合`quotes`属性执行插入

quotes属性用于设置嵌套引用的引号类型，可以定义为open-quote和close-quote，在content属性中应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        ul{
            /*去除无序列表的项目符号*/
            list-style: none;
        }
        li.part{
            /*定义open-quote为"CSS课程:"，close-quote为"(基础)"*/
            quotes: "CSS课程:" "(基础)";
        }
        /*只在类为part的li元素前面插入open-quote*/
        li.part:before{
            content: open-quote;
        }
        li.part:after{
            content: close-quote;
        }
    </style>
</head>
<body >
<ul>
    <li class="part">第一张内容</li>
    <li class="part">第二章内容</li>
    <li>第三章内容</li>
    <li>第四章内容</li>
</ul>
</body>
</html>

配合`counter-increment`属性添加编号

counter-increment属性用于定义计数器，可用于对多条内容添加编号
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        ul{
            /*去除无序列表的项目符号*/
            list-style: none;
        }
        li{
            /*设置计数器*/
            counter-increment: order;
        }
        li:before{
            content: counter(order)".";
            color: aquamarine;
        }
    </style>
</head>
<body >
<ul>
    <li>第一张内容</li>
    <li>第二章内容</li>
    <li>第三章内容</li>
    <li>第四章内容</li>
</ul>
</body>
</html>

使用自定义编号

CSS默认的编号样式是数字，可以通过counter(name,list-style-type)用法实现使用自定义编号，name是计数器的名字，list-style-type指定自定义编号的样式
自定义编号的部分取值：

decimal：默认值，阿拉伯数字
disc：实心圆
circle：空心圆
square：空心方块
lower-roman：小写罗马数字
upper-roman：大写罗马数字
lower-alpha：小写英文字母
upper-alpha：大写英文字母

例：使用自定义编号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        ul{
            /*去除无序列表的项目符号*/
            list-style: none;
        }
        li{
            /*设置计数器*/
            counter-increment: order;
        }
        li:before{
            content: counter(order,upper-roman)".";
            color: red;
        }
    </style>
</head>
<body >
<ul>
    <li>第一张内容</li>
    <li>第二章内容</li>
    <li>第三章内容</li>
    <li>第四章内容</li>
</ul>
</body>
</html>

添加多级编号

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        h2{counter-increment: order1;counter-reset: order2;}
        h3{counter-increment: order2;}
        h2:before{content: counter(order1)".";}
        h3:before{content: counter(order1)"."counter(order2)""}
    </style>
</head>
<body >
<h2>HTML</h2>
<h3>第一章内容</h3>
<h3>第二章内容</h3>
<h2>CSS</h2>
<h3>第一章内容</h3>
<h3>第二章内容</h3>
<h2>JavaScript</h2>
<h3>第一章内容</h3>
<h3>第二章内容</h3>
</body>
</html>

注释：counter-reset：重置计数器，每次开始新的一级编号的时都重置二级编号

伪类选择器

作用：伪类选择器主要用于对选择器进行限制，对已有选择器匹配到的元素进行过滤

结构性伪类选择器

概念：使用文档结构树实现元素过滤，利用文档结构之间的相互关系来匹配指定的元素，减少对class属性和id属性的定义，使文档更加精炼
结构性伪类的选择器：

:root：匹配文档的根元素
:nth-child(n)：匹配父元素的第n个子元素
:nth-child(n)：匹配父元素的倒数第n个子元素
:nth-of-type：匹配同级元素的第n个元素
:nth-last-of-type：匹配同级元素的倒数第n个元素
:first-child：匹配父元素的第一个子元素
:last-child：匹配父元素的最后一个子元素
:first-of-type：匹配同级元素的第一个元素
:only-child：匹配必须是其父元素的唯一子节点的元素
:only-of-type：匹配同级元素的唯一一个元素
:empty：匹配内部没有子元素的元素

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        /*设置根元素的背景颜色*/
        :root{
            background: yellow;
        }
        /*设置p父元素的第二个子元素*/
        p:nth-child(2){
            background: red;
            color: white;
        }
        /*设置p父元素的倒数第二个子元素*/
        p:nth-last-child(2){
            background: white;
        }
    </style>
</head>
<body>
<div>
    <p>结构性伪类选择器</p>
    <p>结构性伪类选择器</p>
    <p>结构性伪类选择器</p>
    <p>结构性伪类选择器</p>
</div>
</body>
</html>

UI元素状态伪类选择器

概念：指定的样式只有当元素处于某种状态时，样式才会起作用，在默认状态下不起作用，常见的有：:hover、:active、:focus、:enable、:disable、:read-only、:read-write、:checked、:default、:indeterminate、:selection等

:hover、:focus、:active
:hover表示鼠标指针浮动时的样式,:focus表示鼠标指针获得焦点或者进行输入时的样式,:active表示按下鼠标左键且不松开时的样式,正确的编写顺序为:hover、:focus、:active，顺序不正确会导致无法显示。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        input[type="text"]:hover{
            background-color: pink;
        }
        input[type="text"]:focus{
            background-color: yellow;
        }
        input[type="text"]:active{
            background-color: red;
        }
    </style>
</head>
<body>
手机号:<input type="text" id="txt">
</body>
</html>

:checked、:selection
:checked用于指定表单中的radio单选按钮、checkbox复选框处于选中状态时的样式
:selection用于指定元素处于选中状态时的样式
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        /*复选框选中状态下的样式*/
        input[type="checkbox"]:checked{
            outline: 2px solid red;
        }
        /*文本框选中状态下的样式*/
        input[type="text"]::selection{
            color: red;
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>HTML<input type="checkbox"/></li>
    <li>CSS<input type="checkbox"/></li>
    <li>JavaScript<input type="checkbox"/></li>
    <!--value值为文本框中的默认值-->
    <li><input type="text" value="测试表单"></li>
</ul>
</body>
</html>

目标（`:target`）伪类选择器

作用：动态选择器，匹配相关URL指向的目标元素，只有存在URL指向该匹配元素时，样式效果才会生效
例：如果页面中有一个<a>标签，href="#box"，同一个页面中也会有以box为id的元素，则<a>标签的属性会链接到#box元素，即box:target选择符所选的元素，当<a>链接到该元素时，指定的样式就是目标元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        #box:target{
            color: #a3c70c;
        }
    </style>
</head>
<body>
<h2 id="box">HTML基础知识</h2>
<a href="#box">第一章的题目是什么</a>
</body>
</html>

否定（`:not`）伪类选择器

作用：过滤含有某个选择器的元素，如p:not(#box)会过滤掉id="#box"的<p>元素
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
    /*除了类为box的p元素以外，其他p元素的颜色为指定的颜色*/
        p:not(#box){
            color: #a3c70c;
        }
    </style>
</head>
<body>
<div>
    <p>否定伪类选择器:not()</p>
    <p id="box">否定伪类选择器:not()</p>
    <p class="box">否定伪类选择器:not()</p>
</div>
</body>
</html>

属性选择器

作用：对带有指定属性的HTML元素设置样式，可以指定元素的某个属性，也可以同时指定元素的某个属性和其对应的值
属性选择器的种类：

[attribute]：选取带有指定属性的元素
[attribute=value]：选取带有指定属性和值的元素
[attribute~=value]：选取属性值中包含指定词汇的元素
[attribute|=value]：选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value]：匹配属性值以指定值开头的每个元素
[attribute$=value]：匹配属性值以指定值结尾的每个元素
[attribute*=value]：匹配属性值中包含指定值的每个元素

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        /*匹配以d开头的每个元素*/
        [class^=d]{
            background: red;
        }
        /*匹配类属性值以b结尾的每个元素*/
        [class$=b]{
            font-size: 30px;
        }
    </style>
</head>
<body>
<p class="da">属性选择器</p>
<p class="db">属性选择器</p>
<p class="ca">属性选择器</p>
<p class="cb">属性选择器</p>
</body>
</html>

实践案例——制作404页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录和注册页面设计</title>
    <style>
        /*通配选择器*/
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            font-family: "Microsoft YaHei UI";
            font-size: 80px;
            color: #f1ebe5;
            /*字体阴影*/
            text-shadow: 0 8px 9px #c4b59d,0px -2px 1px rgba(255,46,108,0.73);
            /*设置字体加粗*/
            font-weight: bold;
            text-align: center;
            padding: 20px 100px;
            /*设置颜色渐变*/
            background: linear-gradient(to bottom,#0dc418 0%,#5dc4a3 100%);
        }
        h1{
            border-bottom: 1px solid #fff;
        }
        h2{
            font-size:20px ;
        }
        input{
            background-color: #20a7ff;
            border-radius: 10px;
            border:0;
            height: 30px;
            width: 80px;
            padding: 5px;
            color: white;
        }
    </style>
</head>
<body>
<div class="box">
    <h1>404</h1>
    <h2>抱歉...你找的页面不存在了</h2>
    <input type="button" value="返回首页"/>
    <input type="button" value="联系管理"/>
</div>
</body>
</html>

注：linear-gradient(direction, color-stop1, color-stop2, ...)：颜色渐变函数

-和敬-

关注

3
点赞
踩
51

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3+JavaScript学习笔记

基础知识HTML5 基础入门HTML5 的基本概念什么是HTML5 HTML5 是标记语言，使用标记标签描述网页。HTML与XHTML XHTML是可扩展的超文本标记语言，是一种置标语言，是更严格、更纯净的HTML版本。XHTML是以XML格式编写的HTML。XHTML具有<!DOCTYPE…>强制性、元素必须合理嵌套、元素必须有关闭标签、空元素必须包含关闭标签、元素必...
复制链接

扫一扫