HTML+CSS复习（四）

最新推荐文章于 2025-11-25 09:44:12 发布

原创最新推荐文章于 2025-11-25 09:44:12 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

本文涵盖了HTML和CSS的多个关键概念，包括浮动元素的高度自适应、窗口自适应布局、两栏和三栏布局的实现。此外，深入探讨了表单的进阶使用，如单选框、复选框、上传文件以及下拉菜单等。还介绍了HTML5的新特性，如语义化标签、音频和视频标签。同时，讲解了CSS3的基础，如选择器、文本和盒子阴影以及圆角边框的使用。

HTML+CSS复习（四）

三十六、浮动元素的高度自适应2
三十七、窗口自适应
三十八、两栏布局
- 三栏布局
三十九、表单进阶
四十、H5基础和语法
四十一、HTML5新增语义化标签
四十二、H5新增音频标签
四十三、H5新增视频标签
四十四、增强表单
四十五、CSS3基础
四十六、选择器
四十七、文本阴影
四十八、盒子阴影
四十九、圆角边框
五十、字体引入

三十六、浮动元素的高度自适应2

伪元素

:after(与content属性一起使用，定义在对象后的内容。)如: div:after{contenturl(logo.jpg);}
div:after{content:“文本内容”;}
:before:与content属性一起使用，定义在对象前的内容。如: divbefore{content:“在其前放内容”;}
: first-letter:定义对象内第一个字符的样式。
: first-line:定义对象内第一行文本的样式

(新的解决菜单被遮挡方式)

<!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: 0; 
         }

        .box{
            width: 300px;
            margin: 0 auto;
        }
        ul{
            list-style: none;
        }
        .box .item{
            float: left;
            width: 150px;
            text-align: center;
            border:1px solid rgb(98, 98, 253);
            background-color: rgb(98, 98, 253);
            color: white;
            line-height: 40px;
        }
        .item:hover{
            background-color: aquamarine;
        }
        .item ul{
            display: none;
            background-color: white;
            color: black;
        }
        .item:hover ul{
            display: block;
        } 
        .item li:hover{
            color: blue;
        }
    	.box::after{
    		content:"";
    		clear: both;
    		display: block;
    		width: 0;
    		height: 0;
    		visibility: hidden;
    	}
    </style>
</head>
<body>
    <ul class="box">
        <li class="item">视频教程
            <ul>
                <li>全部视频教程</li>
                <li>全部视频教程</li>
                <li>全部视频教程</li>
                <li>全部视频教程</li>
            </ul>
        </li>
        <li class="item">认证考试
            <ul>
                <li>全部视频教程</li>
                <li>全部视频教程</li>
            </ul>
        </li>
    </ul>
</body>
</html>

display:none;（不占位置的隐藏）
visibility: hidden;（占位置的隐藏）

三十七、窗口自适应

盒子根据窗口的大小进行改变
设置方法: html,body{height100%;}

三十八、两栏布局

calc()函数的使用

calc()函数:用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如: width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc)函数支持“+”，“-”，“*”，“/”运算;
calc()函数使用标准的数学运算优先级规则;

三栏布局

注意浮动块元素要排在上面，自适应元素排在后面才能插入

三十九、表单进阶

type属性	含义
text	密码输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

（一）单选框

<h2>单选框</h2>
        <input type="radio" name="gender" checked="checked" id="man">
        <label for="man">男</label>
        <input type="radio" name="gender" id="woman">
        <label for="woman">女</label>
        <!-- 用name来使选择在同一组 -->
        <!-- checked为默认选中 -->

（二）复选框

<h2>复选框</h2>
        <input type="checkbox" name="">玩
        <input type="checkbox" name="">睡觉

（三）上传文件和隐藏(按钮)文字

<div>
	<input type="file" name="" id="">
</div>

<div>
	<div>图片按钮-代替提交按钮(input type="submit")
	</div>
	<form action="">
	<!--上传文件-->
	<input type="image" src="图片地址">
	</form>
</div>

<div>
	<div>隐藏按钮</div>
	<!--隐藏-->
	<input type="hidden" name="" id="" value="带给后端的个人信息,">
</div>

<div>
	<div>禁用,只读</div>
	<div>
		<button disabled="disabled">注册	</button>
		<br>
		<input type="radio" disabled>不满意
		<br>
		<input type="text" disabled value="">
		<input type="text" redonly value="">
	</div>
</div>

（四）下拉菜单

<select>、<option> ：下拉菜单

 <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>唱</option>
            <option>跳</option> 
            <!-- 在option后加selected为默认选项 -->
            <option>rap</option>
            <option>篮球</option>
        </select>
        <select multiple> <!-- 多选 -->
            <option>唱</option>
            <option>跳</option>
            <option>rap</option>
            <option>篮球</option>
        </select>

（五）文本域

<textarea> ：多行文本框
CSS部分（resize重新设置大小：vertical（竖直）, horizontal（水平）, both , none）

<!-- placeholder:提示文字-->
 <h2>多行文本框</h2>
        <textarea cols="114" rows="514" placeholder="">默认value:写在双标签内部,注意空格问题</textarea>

（六）字段集

<h1>表单进阶-字段集</h1>
<fieldset>
	<legend>性别</legend>
	
	<input type="radio" name="aa">男
	<br>
	<input type="radio" name="aa">女
</fieldset>

四十、H5基础和语法

HTML5语法

内容类型(ContentType)
HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm".
DOCTYPE声明
不区分大小写
指定字符集编码
meta charset=“UTF-8”
可省略标记的元素
不允许写结束标记的元素: br、col、embed、hr、img、input、 link、meta
可以省略结束标记的元素: li、 dt、dd、p、 option、colgroup、thead、tbody、tfoot、tr、 td、 th
可以省略全部标记的元素: html、head、body、colgroup、tbody
省略引号
属性值可以使用双引号，也可以使用单引号。

四十一、HTML5新增语义化标签

section元素表示页面中的一个内容区块
article元素表示一块与上下文无关的独立的内容
aside元素在article之外的，与article内容相关的辅助信息
header元素表示页面中一个内容区块或整个页面的标题
footer元素表示页面中一个内容区块或整个页面的脚注
nav元素表示页面中导航链接部分
figure元素表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素表示页面中的主要的内容(ie不兼容)
在这里插入图片描述

四十二、H5新增音频标签

Video和audio的应用

video元素定义视频

<video src="movie.ogg" controls="controls">Video元素</video>

audio元素定义音频

<audio src="someaduio.wav">Audio元素</audio>

controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性。
muted属性：静音属性。
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

四十三、H5新增视频标签

<video src=" " controls loop></video>

controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
loop属性：重复播放属性。
autoplay属性：如果出现该属性，则视频在就绪后马上播放。
muted属性：静音属性。
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

四十四、增强表单

（一）input

Type= “color” 生成一个颜色选择的表单
Type= “tel” 唤起拨号盘表单
Type= “search”产生一个搜索意义的表单
Type= “range” 产生一个滑动条表单（value=“”:滑块位置，step:滑动的格数）
Type= “number” 产生一个数值表单
Type= "email” 限制用户必须输入email类型
Type= “url” 限制用户必须输入url类型
Type= “date” 限制用户必须输入日期
Type= “month” 限制用户必须输入月类型
Type= “week” 限制用户必须输入周类型
Type= “time” 限制用户必须输入时间类型
Type= “datetime-local” 选取本地时间

（二）数据列表

Datalist:选项列表
例:

<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
	<option label="W3School" value="http://www.w3School.com.cn"></option>
	<option label="Google" value="http://www.google.com"></option>
	<option label="Microsoft" value="http://www.microsoft.com"></option>
</datalist>

提示: option元素永远都要设置value属性。

（三）属性

autofocus属性:
给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。
required属性:
验证输入不能为空
Multiple:
可以输入一个或多个值，每个值之间用逗号分开例: <input type= "email"multiple/>
还可以应用于file
pattern
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
例:<input patterm =“[0-9][A-Z]3)”title="输入内容:一个数与三个大写字母" placeholder="输入内容:一个数与三个大写字母’>

四十五、CSS3基础

一、cSS3的概念和优势

CSS3是css技拔术的升级版本，CSS3语言开发是朝着模块化发同的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的摸块，更多新的模块也被加入进来。这些模块包括:盒子横型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
css的优点:CSS3将完全向后兼容，所以没有必要修改现夺在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变)，而且可以很简单的设计出现在的设计效果（(比如说使用分栏)

二、渐进增强和优雅降级

渐进增强progressive enhancement:
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级graceful degradation:
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别:
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从—个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的孺要。降级(功能衰威）癔味着往回看，而渐进增强则意昧着朝前看，同时保证其根基处于安全地带。

四十六、选择器

（一）层级选择器

后代：M N
父子：M > N
兄弟：M ~ N（当前M下面所有的兄弟N标签）
相邻：M + N（当前M相邻下面的N标签）

（二）属性选择器

1、E[attr]:只使用属性名，但没有确定任何属性值;
2、E[attr=“value”]:指定属性名，并指定了该属性的属性值;
3、E[attr-="value ]:指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“一”不能不写
扩展知识
4、E[attr^ = “value”]:指定了属性名，并且有属性值，属性值是以value开头的;
5、E[attr$=“value”]:指定了属性名，并且有属性值，而且属性值是以value结束的
6、E[attr*=“value”]:指定了属性名，并且有属性值，而且属值中包含了value;

M[attar] {}
= ：完全匹配
-= ：包含匹配
* = ：部分匹配
^= ：开头匹配
$= ：结尾匹配
[][][] ：组合匹配

（三）伪类选择器

1、结构伪类选择器

X:first-child 匹配子集的第一个元素。IE7就可以支持
X:last-child匹配父元素中最后一个X元素
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始（even偶数，odd奇数）
X.only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X:root匹配文档的根元素。在HTML(标准通用标记语言下的一个应用)中，根元素永远是HTML
X:empty匹配没有任何子元素（包括包含文本)的元素X

2、目标伪类选择器

E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

3、UI元素状态伪类选择器

E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled 匹配所有用户界面(form表单）中处于不可用状态的E元素
E:checked匹配所有用户界面(form表单)中处于选中状态的元素E
E:selection匹配E元素中被用户选中或处于高亮状态的部分

4、否定伪类选择器

E:not(s) (IE6-8浏览器不支持:not(J选择器。)
匹配所有不匹配简单选择符s的元素E

5、动态伪类选择器

E:link
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

E:visited
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

四十七、文本阴影

text-shadow:10px(水平方向位移) 10px(垂直方向位移) 1px模糊程度 red(颜色)

四十八、盒子阴影

属性值:
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

Eg:box-shadow: 10px 10px 5px 10px #888888 inset;

四十九、圆角边框

border-radius:边框圆角
一个值：四个角
两个值：对角线（先左上右下，后左下右上）
三个值：左上，左下右上，右下
四个值：顺时针
border-top-left-radius:左上角

border-radius:30px/60px
水平方向30px/ 竖直方向60px
(border-top-left-radius:不支持)
border-radius:10px 20px 30px 40px/50px 60px 70px 80px

保持圆形需要注意border,padding的大小

border-radius:10%（相较于宽高的10%长度）

半圆：
border-radius:50px 50px 0 0;
扇形：（需要正方形）
border-radius:200px 0 0 0;

五十、字体引入

字体模块:@font-face
@lonthce丛-3中的一个摸块，他主要是记自己定义的Wb字体嵌入到你的网页中，随着@fot-rce模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体(@font-face这个功能早在E4就支持)

@font-face的语法规则:

@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

@font-face语法说明:
1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family如“font-family:“YourWebFontName”;"
2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径;