HTML+CSS复习（四）

最新推荐文章于 2024-08-26 14:18:59 发布
最新推荐文章于 2024-08-26 14:18:59 发布
阅读量114 收藏
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Meg_Fu/article/details/128512888
版权
本文涵盖了HTML和CSS的多个关键概念，包括浮动元素的高度自适应、窗口自适应布局、两栏和三栏布局的实现。此外，深入探讨了表单的进阶使用，如单选框、复选框、上传文件以及下拉菜单等。还介绍了HTML5的新特性，如语义化标签、音频和视频标签。同时，讲解了CSS3的基础，如选择器、文本和盒子阴影以及圆角边框的使用。
摘要由CSDN通过智能技术生成

HTML+CSS复习（四）

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

伪元素

  1. :after(与content属性一起使用，定义在对象后的内容。)如: div:after{contenturl(logo.jpg);}
    div:after{content:“文本内容”;}
  2. :before:与content属性一起使用，定义在对象前的内容。如: divbefore{content:“在其前放内容”;}
  3. : first-letter:定义对象内第一个字符的样式。
  4. : 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()函数的使用

  1. calc()函数:用于动态计算长度值。
  2. 需要注意的是，运算符前后都需要保留一个空格，例如: width: calc(100% - 10px);
  3. 任何长度值都可以使用calc()函数进行计算;
  4. calc)函数支持“+”，“-”，“*”，“/”运算;
  5. 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语法

  1. 内容类型(ContentType)
    HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm".
  2. DOCTYPE声明
    不区分大小写
  3. 指定字符集编码
    meta charset=“UTF-8”
  4. 可省略标记的元素
    不允许写结束标记的元素: 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
  5. 省略引号
    属性值可以使用双引号，也可以使用单引号。
     
     

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

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

四十二、H5新增音频标签

Video和audio的应用

  1. video元素定义视频
<video src="movie.ogg" controls="controls">Video元素</video>
  1. 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属性。
 

（三）属性

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

四十五、CSS3基础

一、cSS3的概念和优势

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

二、渐进增强和优雅降级

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

四十六、选择器

（一）层级选择器

后代：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:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径;

Whnist
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS复习笔记
weixin_44921664的博客
12-07 191
HTML+CSS复习笔记 1.HTML 初识 HTML 指的是超文本标记语言 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 1.html作用: 网页是由网页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。 2.所谓超文本，有2层含义： 因为它可以加入图片、声音、动画、多媒体等内容（**超越文本限制 **） 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本 **）。 文档类型<!DOCTYP
html+css知识点复习回顾，复习参考
weixin_55935744的博客
11-28 1158
这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性 一、HTML部分 1、两个盒子 <div>、<span&g
html+css复习
l2298202515的博客
12-28 1307
html css复习
html+css复习(四)
df5465695的博客
08-02 506
代码】html+css复习(四)
HTML+CSS+JavaScript复习
weixin_46007017的博客
03-10 1160
HTML+CSS+JavaScript复习 HTML第一节课-3.7 前端和后端： 前端，用户看到的视图逻辑，在浏览器上运行的，炫酷的震撼的页面效果。 后端：显示动态数据，需要从数据库中取出 B/S架构原理: 在浏览器地址栏上输入网址 点击回车，向服务器发送一个请求 服务器向浏览器返回一个HTML代码，浏览器对代码进行解析。 开发工具：HBuilder，Dreamweaver（可视化更丰富一些） 一、常见标签 table： table属性：单元格对齐方式，border单元格表框，width宽
html+css复习小结
Mr_Jasper的博客
12-15 526
浏览器的解析模式:1. 标准模式 2. 混杂模式(浏览器自己的模式) 选择器优先级,权重值 a b c d 内嵌 1 0 0 0 id 0 1 0 0 类,伪类 0 0 1 0 元
HTML+CSS
weixin_52002028的博客
07-20 2011
之前学过html+css，但是好久没用，最近看着文档复习了一下，也记录了一些笔记。
HTML+CSS+JS复习回顾
weixin_51621120的博客
04-09 943
下载VScode，依次下载插件：HTML CSS support、Live Server、Auto Rename Tag。
HTML+CSS复习第一天
weixin_62922379的博客
07-12 2683
3.使用grid布局 display:grid justify-content:center;1.使用flex布局 justify-content:center;怪异盒模型：margin + content(border+padding+content)普通盒模型：margin + border + padding + content。普通盒模型变为怪异盒模型使用的是box-sizing:border-box。分为两种：相对路径 绝对路径 img标签内部的属性是以键值对的形式存在的。
HTML+CSS全面复习
weixin_44691513的博客
09-28 289
HTML+CSS全面复习 1.HTML的基本标签 2.CSS基本样式和元素选择器 3.复合元素选择器以及它们的权重关系 4.CSS和模型概念以及企业应用规划 5.CSS行内盒模型及文字样式详解 6.默认显示类型和显示类型转换 7.背景样式 8.圆角样式和渐变色样式 9.浮动样式 10.定位样式详解 11.单元素详解 12.HTML CSS中的表格元素和表格布局详解 13.高级选择器和伪元素 14.HTML中的触发动画和主动动画 15.transform样式讲解 16.3D动画以及盒阴影盒滤镜 17.[项目实
HTML+CSS+JS复习笔记
03-07
在“HTML+CSS+JS复习笔记”中，你可能会学习到以下关键概念： 1. HTML基本结构：包括<!DOCTYPE>声明、<html>、和元素。 2. HTML元素：如至标题、段落、链接、图像、和无序列表、和有序列表等。 3. CSS选择器：如...
HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面（附完整答案和学生用要求及素材）
03-29
在本项目中，"HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面" 提供了一个实践性的学习机会，让学生深入理解并应用前端开发技术，特别是针对网页设计与制作。这个项目以“杭帮美食”为主题，...
网页设计与制作教程（HTML+CSS+JavaScript）第2版+电子教案、素材文件、源代码
03-31
本教程《网页设计与制作教程（HTML+CSS+JavaScript）第2版》由刘瑞新和张兵义主编，是一份全面的学习资源，旨在帮助初学者和进阶者掌握网页设计的核心技术。这个压缩包包含了完整的教材、电子教案、素材文件以及源...
CSS中的元素布局与定位详细说明
weixin_43354152的博客
08-24 818
在CSS开发中，很重要的一个工作就是根据UI设计稿，进行元素的布局与定位，使得元素（比如某一段文本、按钮、图片等）显示在页面正确的位置。本文就元素的布局与定位方面，做一些讲解和说明。
使用 Tailwind CSS 实现水平和垂直居中对齐的方法
Chloeeeeeeee的博客
08-20 263
使用 Tailwind CSS 实现水平和垂直居中对齐的方法有：1. 使用 flex 布局；2. 使用 grid 布局；3. 使用绝对定位
CSS 的font-variant属性
读心悦
08-26 331
CSS 属性用于控制小型大写字母（small-caps）的渲染。它主要用于在需要强调文本或改变文本风格时，提供一种视觉上更加优雅的展示方式。然而，需要注意的是，并非所有字体都支持小型大写字母的渲染，这取决于字体的具体设计和支持情况。
CSS 的文字平滑属性font-smooth
读心悦
08-23 341
此外，还有一些其他的方法可以间接地改善文字的平滑度和可读性，比如选择合适的字体、调整字体大小、使用字体加载策略（如Font Loading API）来优化字体文件的加载和渲染等。这样的属性，但可以通过一些间接的方法和属性来控制文字的平滑度和可读性。在实际应用中，应该根据具体需求和目标受众来选择合适的方法，并考虑到跨浏览器兼容性和性能优化的问题。是一个非标准的属性，它的支持可能因浏览器而异，并且在未来的浏览器版本中可能会被弃用或更改。属性，这是一个非标准的CSS属性，用于控制字体渲染的平滑度。
CSS溢出——WEB开发系列20
最新发布
一条晒干的咸鱼的博客
08-26 715
在网页设计中，“溢出”是一个常见且重要的概念。它涉及到如何处理那些超出预定范围的内容，以确保网页的布局和视觉效果达到预期。
响应式Web设计：纯HTML和CSS实现技巧
衍生星球的博客
08-23 445
响应式Web设计是一种确保网页在不同设备和屏幕尺寸下都能良好显示的设计方法。：使用相对单位（如百分比）而非固定单位（如像素）来定义元素的宽度，使元素能根据容器宽度动态调整。：先为移动设备设计样式，然后使用媒体查询为更大屏幕添加样式，确保小屏幕体验。：根据不同屏幕尺寸应用不同的CSS规则，是实现响应式设计的核心技术。：使用相对单位设置字体大小和图片宽度，使它们能根据屏幕尺寸自适应。或结合Flexbox和Grid布局创建适应不同设备的导航菜单。：提供更灵活的布局方式，使元素在容器内自动调整位置和大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值