HTML CSS 总结
一、HTML总结
1.HTML概述
HTML
是超文本标记语言(HyperText Markup Language
)的缩写。我们用HTML
来构建Web
页面即所谓的网页。HTML
以外的其它技术则通常用来描述一个网页的表现与展示效果(如CSS
)或功能与行为(如JavaScript
),人们常把HTML
、CSS
、JavaScript
统称为“Web网页三剑客”。HTML
不是一门编程语言,而是一种用于定义内容结构的标记语言。
2.常用HTML标签汇总
<html>: 定义HTML文档的根元素。
<head>: 定义文档的头部,包含了一些元数据信息。
<title>: 定义文档的标题,显示在浏览器的标题栏或标签页上。
<body>: 定义文档的主体内容。
<h1> to <h6>: 定义标题,从最重要的标题h1到次要的标题h6。
<p>: 定义段落。
<a>: 创建一个链接,可以链接到其他页面、文件或位置。
<img>: 插入图像。
<ul>: 定义无序列表。
<ol>: 定义有序列表。
<li>: 定义列表的项目项。
<div>: 定义文档中的一个分割区块,用于组织内容。
<span>: 定义文档中的一个行内区块,用于标记文本的一部分。
<table>: 定义表格。
<tr>: 定义表格中的一行。
<td>: 定义表格中的一个单元格。
<form>: 定义用户输入表单。
<input>: 定义用户输入字段。
<button>: 定义按钮。
<select>: 定义下拉列表。
<textarea>: 定义多行文本输入框。
3.HTML5
HTML5
是HTML
的第五个版本,相较于传统的HTML
,HTML5
引入了一些新的特性和改进。
语义化标签:
HTML5
引入了一系列语义化的标签,如<header>
、<nav>
、<section>
、<article>
、<footer>
等,在完成课程设计时便采用了<section>
和<footer>
两种标签。新的表单元素:
HTML5
新增了一些表单元素,如<input type="date">
、<input type="email">
、<input type="url">
等,在完成课程设计的过程中便使用了“email”类型,用于输入用户邮箱。画布和绘图:
HTML5
引入了<canvas>
元素,使得开发者可以通过JavaScript
绘制图形、动画和图像等。更强大的CSS支持:
HTML5
对CSS3
的支持更好,引入了一些新的样式属性和选择器,如圆角边框、阴影效果、过渡和动画等,可以实现更丰富的页面样式和交互效果。如在本次课程设计中便利用到了HTML5的这项特性,使用@keyframes
关键字定义一组关键帧,然后通过animation
属性将动画应用到元素上。例如:
@keyframes float{0%, 100%{transform: translateY(0rem);}50%{transform: translateY(3rem);}
}
以上CSS
代码便实现了本次课程设计中主页图片的浮动。
4.HTML的一些妙用
使用按钮效果呈现超链接效果
以下是在课程设计中利用按钮效果呈现超链接效果的示例。
首先是HTML
中的代码:
<a href="#speciality" class="goto-next btn">时光穿梭……</a>
其次是CSS
中对按钮格式的设置:
.btn{display: inline-block;padding:.8rem 3rem;border:.2rem solid var(--red);color:var(--red);cursor: pointer;font-size: 1.7rem;border-radius: .5rem;position: relative;overflow: hidden;z-index: 0;margin-top: 1rem;
}.btn::before{content: '';position: absolute;top:0; right: 0;width:0%;height:100%;background:var(--red);transition: .3s linear;z-index: -1;
}.btn:hover::before{width:100%;left: 0;
}.btn:hover{color:#fff;
}
最后,进入界面观察,下图中的“时光穿梭……”按钮实质上为一个超链接标签,但在形式上呈现出一个按钮。
下图为点击按钮后按钮呈现的样式,如下图中左下角显示。当点击该按钮后页面将跳转至“#speciality”对应的页面,即“人物介绍”页面。
利用按钮效果呈现超链接效果,用户在使用及观感上都会更好,页面将更友好,更具交互性。
二、CSS总结
1.CSS概述
CSS(层叠样式表)是一种用于描述网页样式和布局的语言。它与HTML结合使用,用于控制网页的外观和呈现效果。
CSS的设计目标是将网页的结构(由HTML定义)与样式(由CSS定义)分离,使得样式可以被独立地管理和修改,从而提高开发的灵活性和维护性。
概念解释
选择器: CSS使用选择器来选中HTML元素,并将样式应用于这些元素。常用的选择器有元素、类、ID、后代选择器。例如,
h1
选择器选中所有<h1>
标签,.class
选择器选中具有某个类名的元素。属性和值: CSS的样式是通过属性来定义的,用于控制元素的具体样式。例如,
color
属性控制元素的文本颜色,font-size
属性控制文本的大小。每个属性都具有一个值(每个CSS属性可以接受一组可能的值,例如,color
属性可以接受颜色值如red
、#ff0000
或者rgb(255, 0, 0)
)。响应式设计: CSS可以根据屏幕大小和设备特性来自适应网页的布局和样式。通过使用媒体查询(Media Queries)等技术,开发者可以为不同的设备提供不同的样式和布局。如在本课程设计中设置的响应式设计,代码如下:
//使用媒体查询(@media),在屏幕宽度小于等于991像素时作出了一些样式调整。 @media(max-width:991px){html{font-size: 55%;}header{padding:2rem;}section{padding:2rem;} }//使用媒体查询(@media)和选择器,根据屏幕宽度小于等于450像素时的情况作出了一些样式调整。 @media(max-width:450px){html{font-size: 50%;}.order .row form .inputBox input{width:100%;} }
这样的响应式设计能够优化用户体验,并确保网页在不同的设备上都能以最佳方式呈现。
2.使CSS样式作用于HTML的四种方式
内联样式
在HTML标签内部使用style属性,如以下代码所示://将p标签设置为文本居中对齐 <p style="align-items: center;"></p>
内部样式
在HTML中定义style标签,在其中用相关选择器进行CSS样式设置。//将p标签设置为文本居中对齐 <style>p{text-align: center;}</style>
外部样式
在HTML中定义link标签,在其href属性中写入外部CSS文件的路径。//将p标签设置为文本居中对齐 //HTML文件内容 <link href="./demo.css" rel="stylesheet"> //CSS文件内容,其文件名为“demo.css” p{text-align: center;}
伪类和伪元素(特殊)
伪类:
伪类用于选择元素的特定状态或行为。它们以冒号(:
)开头,并附加在选择器的末尾。本人所熟悉的伪类包括::hover
:当鼠标悬停在元素上时应用的样式。:active
:当元素处于活动状态(被点击且未释放鼠标按钮)时应用的样式。:focus
:当元素获得焦点时应用的样式。
伪元素:
伪元素用于在元素的特定位置创建虚拟元素并添加样式。它们以双冒号(::
)开头,并附加在选择器的末尾。本人所熟悉的伪元素包括:::before
:在元素内容之前插入一个虚拟元素。::after
:在元素内容之后插入一个虚拟元素。
3.CSS常用属性
color:控制文本颜色。
font-size:控制字体大小。
font-family:指定字体系列或字体名称。
text-align:控制文本的对齐方式,如左对齐、右对齐、居中对齐。
background-color:控制元素的背景颜色。
background-image:设置元素的背景图像。
width和height:控制元素的宽度和高度。
margin和padding:控制元素周围的外边距和内边距。
border:设置元素的边框样式,包括宽度、颜色和样式。
display:定义元素的显示类型,如块级元素、内联元素、弹性元素等。
position:控制元素的定位方式,如相对定位、绝对定位、固定定位等。
float:控制元素的浮动方式,使其脱离文档流并与周围的元素进行布局。
opacity:控制元素的透明度。
transition:设置元素进行过渡动画效果的属性。
box-shadow:为元素添加阴影效果。
具体说明一下CSS高度和宽度设置的尺寸单位,现对常见的尺寸单位做如下总结:
- 像素(px):最常用的绝对单位,指定具体的像素值,如
width: 200px;
。 - 百分比(%):相对于父元素的单位,可以用于设置宽度、高度和位置等属性。例如,
width: 50%;
表示相对于父元素宽度的 50%。 - 相对单位:
- rem:相对于根元素的字体大小。例如,如果根元素的字体大小为16px(1rem),
font-size: 1.5rem;
表示字体大小为根元素字体大小的 1.5 倍。 - vw:相对于视窗宽度的百分比。例如,
width: 50vw;
表示相对于视窗宽度的 50%。 - vh:相对于视窗高度的百分比。例如,
height: 50vh;
表示相对于视窗高度的 50%。
- rem:相对于根元素的字体大小。例如,如果根元素的字体大小为16px(1rem),
这些尺寸单位都有不同的用途和特性,可以根据具体需要选择合适的单位。使用百分比单位可以实现相对布局和响应式设计,而相对单位则可以帮助在整个文档中进行快速的尺寸调整。对于视窗相关的尺寸单位,可以用于创建适应不同屏幕尺寸的响应式布局。
4.Flex布局
Flex布局(弹性盒子布局)是一种用于在容器中灵活排列和对齐元素的CSS布局模型。
首先解释相关概念:
容器:应用Flex布局的父元素称为容器。通过设置容器的
display
属性为flex
或inline-flex
,将容器转换为一个Flex容器。项目:Flex容器内的子元素称为项目。这些项目根据Flex容器的定位规则进行布局和排列。
主轴(Main Axis)和交叉轴(Cross Axis):Flex布局有两个主要的轴线,分别是主轴和交叉轴。主轴是Flex容器的排列方向,交叉轴则垂直于主轴。
再阐述常用的Flex属性:
flex-direction
:指定主轴的方向,可以是row
(水平方向,默认值)、column
(垂直方向)、row-reverse
(水平反向)或column-reverse
(垂直反向)。justify-content
:定义项目在主轴上的对齐方式,可以是flex-start
(左对齐,默认值)、flex-end
(右对齐)、center
(居中对齐)、space-between
(两端对齐,项目之间间隔相等)或space-around
(每个项目两侧的间隔相等)等。align-items
:定义项目在交叉轴上的对齐方式,可以是flex-start
(顶部对齐)、flex-end
(底部对齐)、center
(居中对齐)、baseline
(第一行文字的基线对齐)或stretch
(拉伸以填满容器高度,默认值)等。flex-grow
:定义项目的放大比例,默认为0,即不放大。如果给某个项目设置了非零的值,则该项目将相对于其他项目进行放大。flex-shrink
:定义项目的缩小比例,默认为1,即可以缩小。如果给某个项目设置了非零的值,则该项目将相对于其他项目进行缩小。flex-basis
:定义项目在主轴上的初始尺寸。可以是一个固定的值(如100px
),也可以是一个相对的值(如50%
)。flex-wrap
:定义项目是否允许换行。可以是nowrap
(不换行,默认值)、wrap
(换行)或wrap-reverse
(反向换行)。
5.Grid布局
Grid布局是一种基于网格的CSS布局模型,用于将元素按行和列进行排列。它将父元素(容器)划分为行和列,然后将子元素(项目)放置在这些行和列上,从而创建灵活的网格布局。
首先解释相关概念:
- 容器(Grid Container):通过设置父元素的
display
属性为grid
,将其转换为Grid容器。 - 网格线(Grid Lines):Grid容器的行和列都由网格线定义。行和列之间的交叉点形成网格单元格。
- 项目(Grid Item):Grid容器内的子元素称为Grid项目。它们被放置在网格单元格中。
- 行和列的尺寸(Grid Track):行和列的尺寸可以通过设置Grid容器的
grid-template-rows
和grid-template-columns
属性来定义。可以使用固定的值(如像素、百分比)或自动计算的值。 - 网格单元格(Grid Cell):网格单元格是行和列的交叉点,用于放置Grid项目。
再阐述常用的Flex属性:
grid-template-rows
:定义网格行的尺寸。grid-template-columns
:定义网格列的尺寸。grid-template-areas
:通过给每个项目指定一个名称,创建一个可视化的网格布局。grid-gap
:定义网格行和列之间的间隙。grid-row
:定义项目跨越的行范围。grid-column
:定义项目跨越的列范围。grid-area
:定义项目的网格区域。justify-items
:定义项目在单个网格单元格内的水平对齐方式。align-items
:定义项目在单个网格单元格内的垂直对齐方式。
HTML CSS 总结相关推荐
- ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题 思路 问题:首先,li 浮动后,添加边框,则 中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
- 【css】基础学习总结
填充部分: 1.css概念 2.如何用css控制页面样式(2种方式,写在页面内,链接CSS样式文件) 3.介绍了不同的选择器(3种) 4.选择器的声明:集体,嵌套 5.css继承:父子嵌套继承 6.C ...
- Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss
错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...
- CSS 选择器:BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
- CSS Modules
css-loader 提供了一种叫做 CSS Modules 的方案,可以帮我们自动生成唯一的类名,不会和其他模块的命名出现冲突 要使用 CSS Modules 有几个步骤,首先需要在 webpack ...
- css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是 类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑 它们 都 ...
- 前端之css基础学习(更正版)
css是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 简单的说css的引入就是为了使得HTML语言能够 ...
- div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
- CSS单位分析及CSS颜色表示法、颜色表(调色板)
CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相 ...
- 前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
最新文章
- 清华大数据能力提升项目《数据分析方法》选课开始 !(附旁听名额)
- 未在本地计算机上注册oraoledb.oracle.1提供程序,未在本地计算机上注册“OraOLEDB.Oracle.1”提供程序--问题的处理...
- java构造方法可以重载吗_Java基础教程之构造器与方法重载
- C++ leetcode 17. 电话号码的字母组合 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。 给出数字到字母的映射如下(与电话按键相同)。注意 1 不对应任何字母。
- AI:2020年6月22日北京智源大会演讲分享之机器感知专题论坛—13:30-14:10山世光教授《从看脸到读心:基于视觉的情感感知技术》
- pygame外星人2
- C# 三层级架构问题之 能加载文件或程序集或它的某一个依赖项。系统找不到指定的文件
- VS中监视窗口,即时窗口和输出窗口的使用
- 身为“月光族”的电视选择之道
- select * 排除字段_interesting数据库查找语句Select还能这样用
- mybatis运行原理详解
- 配电站房可视化巡检智能监控系统
- ecshop 首页调用多个促销,显示到计时
- 程设课终章:c++使用socket实现bmp图片的传输
- 关于共享自习室查询座位空闲状态的算法笔记
- CPU内核和逻辑处理器的区别
- Matlab:图像轮廓的曲率计算
- 5.22 综合案例2.0-4G远程遥控车DEMO(2.2版本接口有更新)
- flux 中的 buffer 的原理
- 170902 WarGames-Narnia(8)