HTML与CSS总结

最新推荐文章于 2024-06-19 12:50:25 发布

城主_全栈开发

最新推荐文章于 2024-06-19 12:50:25 发布

阅读量44

点赞数

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/hustle28214/article/details/132069860

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

网页基本概念

Web标准：由W3C和其他标准化组织制定的一套规范集合。

Web标准的构成：结构和内容(HTML)、表现(CSS)、行为(JavaScript)。

开发人员按照Web标准制作网页，这样对于开发者来说就更加简单了，因为他们可以很容易了解彼的编码

使用Web标准，将确保所有浏览器正确显示您的网站而无需费时重写。

遵守标准的Web页面可以使得搜索引擎更容易访问并收入网页，也可以更容易转换为其他格式，并更易于访问程序代码（如JavaScript和DOM）。

HTML基本语法及应用

超文本：是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

HTML基本结构

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

HTML基本结构是：

<!DOCTYPE>

<html>

<head>

</head>

<body>

…

</body>

</html>

用两个标签标记元素的位置。

META标签

meta标签共有四个属性，其中最主要的是name属性和http-equiv属性。Content为对name或者http-equiv属性的具体描述，便于浏览器抓取。

1. name属性

name属性主要用于描述网页。

meta标签中name属性语法格式是：

2. http-equiv属性

meta标签中http-equiv属性语法格式是：<meta http-equiv="参数" content="具体的描述">

HTML常用标签

<h1-6>标题

<div>可定义文档中的分区或节。以把文档分割为独立的、不同的部分。

<a>链接 href

使用 <span> 来组合行内元素，以便通过样式来格式化它们。

<ul> 标签定义无序列表。<ol>标签定义有序列

<li>标签

<img>图像

<form> 标签用于为用户输入创建 HTML 表单。<input>输入

<table> 标签定义 HTML 表格。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

标签常用属性

全局属性：class、id、style、title、name等；

input type属性:text、password、checkbox 、file、button、radio、reset、submit ;

img属性：src、alt、title、width(缩放)

table tr属性， td属性，colspan(列)，rowspan(行)

a 属性: href ，target ;

(html5新增的属性) color、date、time、email、url、number、tel等；

Checkbox：复选框 Radio：单选按钮 Reset：重置按钮 Submit：提交

Alt：图像替代文本 src：图像的url

Target：在何处打开链接文件

Id：定义元素的唯一id

Class：规定元素的一个或多个类名。

标题、段落、修饰、换行

标题：

段落：

修饰：

加粗：<strong>…</strong>或<b>…</b>

倾斜：<em>…</em>或<i>…</i>

删除线：<del>…</del>或<s>…</s>

下划线：<ins>…</ins>或<u>…</u>

换行：
<p>…<br/>…</p>

分区和整合

分区：<div>…</div>

可定义文档中的分区或节，把文档分割为独立的、不同的部分

整合：<span>…</span>

被用来组合文档中的行内元素。

图片标签

相对路径：在当前文件夹下寻找

绝对路径：从根目录出发，文件所在的路径

调用网站上的图片

<img src=“…”alt =“…”/> 图片无法显示，则输出alt的内容

<img src=“…”title =“…”/>鼠标放在图片上，显示title内容

宽度：width

高度：height

边框：border

链接

_self：当前页面打开，_blank：新建窗口打开

外部链接：href=“http://...”

内部链接：分为同级或非同级

空链接：href=“#”

下载链接：href=“…” download=“…”

网页元素链接： <a href=“…” ><img src=“…”/></a>

跳转

链接标签搭配id属性进行使用，也可以使用a标签添加href属性，制作表单时可以在form标签中添加action属性来添加链接。

表格

</table>

table的属性：align、border、cellpadding、cellspacing、width、height等等

<thead>定义表格的表头

<tbody>定义表格主体（正文）

<tfoot>定义表格的页脚（脚注或表注）

区分：<th>定义表格内的表头单元格。

列表

<li>定义列表项目

无序列：有序列：

</ul> </ol>

表单

重点：输入<input>，属性：type、name、value、checked、bottom

输入：<input type=“text” >

单选：<input type=“radio”>

多选：<input type=“checkbox”>

重置：<input type=“reset”>

上传：<input type=“file”>

下拉选框：<select>

</select>

长文本：<textarea cols=“…” rows=“…”>XXX</textarea>

HTML5新特性

HTML5 是下一代 HTML 标准，2014年10月由万维网联盟（W3C）完成标准制定。

H5图形绘制：使用 HTML5 你可以简单的绘制图形:使用 <canvas> 元素。使用内联 SVG。使用 CSS3 2D 转换、CSS3 3D 转换。

HTML5 你可以简单的在网页中播放视频(video)与音频 (audio)

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性

Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

通过canvas创建一块画布：

通过JS来绘制具体的图像：

var c=document.getElementById(“myCanvas”); //寻找canvas元素

var cxt=c.getContext(“2d”); //创建context对象

cxt.fillStyle=“#FF0000”; //填充颜色为红色

cxt.fillRect(0,0,150,75); //fillrect规定形状位置尺寸

</script>

Video

浏览器内核

负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。Firefox和Opera就是这个时候兴起的。非Trident内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非IE浏览器的浏览效果问题。

Trident：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；世界之窗、猎豹安全浏览器、360安全浏览器、傲游；搜狗浏览器

Gecko：firefox

Webkit ：Safari 和早期chrome

Trident/WebKit双核浏览器

浏览器兼容性问题

由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。

兼容性问题，主要是说IE与几个主流浏览器如firefox，google等。而对IE浏览器来说，IE7又是个跨度，因为之前的版本更新甚慢，bug甚多。从IE8开始，IE浏览器渐渐遵循标准，到IE9后由于大家都一致认为标准很重要，可以说在兼容性上比较好了，但是在中国来说，由于xp的占有率问题，使用IE7以下的用户仍然很多，所以我们不得不考虑低版本浏览器的兼容。

布局技巧

1.查看源代码、开发者工具：大致了解这些网站里面的一些元素或者加载的脚本或者是规则，对于判断兼容性问题有一定的帮助，也可以用来准确捕捉页面元素。(F12)

2.使用所见即所得的编辑软件，如：Dreamweaver(DW)。

HTML的缺陷

HTML本身只关注内容与内容的结构，而不关注内容的呈现形式。

例如：

<h1>标签中的字体大小

<p>标签中的字体大小

<button>标签生成的按钮控件颜色、边框颜色、阴影效果等等。

在未经定义的情况下，上述提到的特征在不同的浏览器、不同的操作系统、不同的桌面环境下会呈现出完全不同的效果。

对于最初的设计目的（分享科学文档）而言，这并不是什么严重的缺陷，但由于现在的网页呈现的内容和实现的功能已经远超这一范畴，对每一个元素具体呈现效果的精密控制也就成为了开发者想要做到的事情。

CSS

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言。CSS通常用于对HTML和XML文档的呈现形式进行定义。

CSS自2.1版本后，版本的修订采取持续进行的方式，一般而言人们所说的CSS3特性，即是指CSS 2.1版本之后添加的新特性——但这并不是准确的称呼，因为从来没有发布过称为CSS3的修订版本。

CSS是一门具有高度复杂性的样式表语言，本节课程中不会介绍CSS的全部知识，只针对其中最为关键和常用的部分进行说明。

语法与元素常见属性

优先级、继承和级联

盒模型与包含块

弹性盒子（线性）布局与网格布局

@media媒体查询

如何在HTML使用CSS

使用link标签可以引入CSS：

也可以直接在<style>标签中写。

基本语法

一段基本的CSS至少包含一个选择器和一个声明块

选择器是一些表达式，可以用来描述后面的声明块要作用于哪些HTML元素

代码块由{}包裹，其内的规则的格式为name: values;

Id选择器

具有id字段的元素，可以用id选择器选择。

例如<p id =”p1”>xxx</p>

CSS:

#p1{

Font-size:10px;}/*更改id为p1的元素字号大小*/

class选择器

具有class属性的元素，可以用它的class来选择。

CSS:

.color{

Color:red;

}/*字体设置为红色*/

标签选择器

可以通过元素标签类型选择元素。

复杂选择器

同时选择多个选择器（合集），使用”,”分隔选择器。

后代选择器可以指定目标元素的祖先关系。

子代选择器可以限制严格的子元素深度

伪类/伪元素选择器

:开头的选择器是伪类选择器，他们通常和网页上发生的事件或元素的特定逻辑有关，和其他的选择器复合使用，例如：

:hover

:link

:visited

:nth-child()

……

::开头的是伪元素选择器，他们可以在元素前后插入一些不在HTML中的内容，例如：

::before

::after

……

其他选择器

此外CSS还支持一些非常复杂的选择器，例如：

使用标签的属性来选择

兄弟关系选择

……

这些选择器固然可用，但实际上难以理解，因此通常使用其他的方案代替。

条件优先级

从定义的位置看，优先级为：

HTML标签上的style字段最高

对不同选择器设置项目重复的：

元素和伪元素选择器级别最低；

类选择器居中（以及伪类）；

ID选择器最高

!important：在属性后加上!important标志可以覆盖其他一切冲突的样式，仅用于一些非常难以调节的场景。

尺寸单位

px：像素

vw，vh：视窗宽度、高度的百分比

em，rem：字体高度，em是当前元素字体；rem是根元素字体。

ch是0字符的宽度。

其他物理单位：pt、in、cm等

文字属性

text系列属性

text-align：文本对齐

text-indent：文本缩进（ch单位是字符0的宽度）

font系列属性

font-family：字体

font-size：文字尺寸

font-weight：字重

line系列属性：

line-height：行高

line-break：折行策略

columns：文字分列

颜色

color：文字颜色，可以使用：

一些颜色的名字，如blue，pink等

#开头的HEX色号如#0034ff

使用CSS函数rgba生成带有透明度的值：rgba(0, 52, 255, 0.3)

background-color是背景颜色。

CSS变量

可以使用--开头的属性名来声明变量，然后使用var函数来访问。

例如：

--light-blue: rgba(0,122,233,1);

color: var(--light-blue);

该功能针对网页上使用的主题色特别有用。

通常，为了变量能够被全局访问，经常将变量声明在顶级标签选择器如html, body或:root伪类中。

圆角

使用border-radius设置边框圆角：一般接受1-4个参数。

1个参数：元素4个角使用同样的半径

多个参数：分别对左上，右上，右下，左下设置半径；当第二个以后的参数未设置时，使用和对角相同的值。

使用r1/r2语法时，生成椭圆结构，分别为宽度半轴和高度半轴。

可用单位为为一般长度单位和百分比；百分比相对于元素本身大小设置椭圆的半长轴和半短轴。例如方形元素可用50%角度变成圆形，矩形元素会变成椭圆。

注意事项：

子元素可以超出圆角区域，不能自动重新排列，只能通过overflow: hidden;隐藏；更正常情况使用内边距来防止这种情况。

尺寸

固定大小：height, width

最大大小：max-height, max-width

最小大小：min-height, min-width

可以使用的单位：

上面提到过的尺寸单位

%：与外层元素容纳区域大小的相对值

其他选项：auto，max-content，min-content，fit-content

边框

border：用于设置元素的边框，可以接受最多三个参数，分别是边框宽度、边框风格和边框颜色。

例如：border: 4px solid #000000;

是一个4px的黑色实线框。

亦可以单独设置

border-width

border-style

border-color

阴影

box-shadow：接受最多五个参数

x偏移量

y偏移量

阴影半径

扩散半径

颜色

从UI设计的角度来看，外部阴影天然就是一种边界，因此一般不同时使用border和box-shadow。

边距

margin设置元素的外边距，padding设置元素的内边距

均可接受最多四个参数：

1个参数：同时设置上下左右四个边距

2-4参数：分别设置上、右、下、左四个边距，如果没有设置，继承对边边距。

两个有margin的元素靠在一起时，两者间距是margin的最大值。例如两个元素上下排列，上方元素下margin为4px，下方元素上margin为8px，二者间距8px

盒模型

它是大多数CSS布局与定位的基础。CSS盒状模型以一个包含四个成分的有界限的盒子来描述网页中的每个元素：

元素内容(content)本身位于中心。

一个补丁(padding)封套位于内容周围。

边框(border)包围补丁，它为元素的可见区域划分界线。

边缘(margin)包围边框。

文档流

HTML内部有一定的默认排版规则，例如块(block)元素会默认独占一段高度；而行内(inline)元素则会和文本以及其他行内元素一起横向排布。

常见的块元素有：header、footer、div、p等

常见的行内元素主要是：span、i、img等

可以使用元素样式中的display属性来修改元素默认的元素类型。

根据这种规则确定元素位置的方式称为文档流（即顺序的排列）。

Position

position属性用于确定元素的相对位置。

可以设置为：

static：默认值，即按照一般规则排列在页面上

relative：相较于static模式所在的位置，通过top、left参数进行偏移；原始位置的空间仍会留出。

absolute：不保留static模式所在的位置，通过top、left参数相对于最近的非static元素偏移（最外侧的非static元素是body）

fixed：元素固定在视图窗口的绝对位置上，除非有特定的父元素可以确定其位置

sticky：元素固定在它的最近滚动祖先元素的位置上

position参数调节位置高度依赖于top, left, bottom, right四个参数确定具体的数值位置，不要position参数用来做常规排版。

position还经常于z-index和background属性联用，以防止被覆盖和内容穿透。

Flex布局

flex布局是一种线性布局，用来排列一行或一列元素，这里的行/列称为主轴；此外还有一条垂直于主轴的副轴，用于控制元素的对齐行为。

容器元素：

display: flex

flex-direction：控制主轴方向，可以为row, column, row-reverse, column-reverse

flex-wrap：折行模式，例如wrap, wrap-reverse, none

随后我们看一下flex布局的对齐和排布。

几个参数：

align-items：控制副轴方向上的对齐

align-content：多线模式下，总体内容在副轴方向上的位置

justify-content：控制元素在主轴上的排布

justify-items：控制元素在各自位置上的对齐方式

gap：不使用space系列排布时，元素间间距

可以的值：

start, end，center：排列于容器的开头、结尾和中间

flex-start，flex-end：排列于主轴每行的开头和结束位置

space-between：均匀排列，抵达头尾；space-around：均匀分配间隔，行首、行尾留出元素间一半间距；space-evenly：均匀分配间隔，行首、行尾距离和元素间距离一样。

stretch：填满副轴高度

Grid布局

Grid布局用来构建更加复杂的网格布局结构。

父元素：

display: grid

grid-template-rows：行模板，规定这个网格有几行，每行的高度

grid-template-colunms：列模板，规定这个网格有几列，每列的宽度

gap：网格间间距

特殊的单位：fr，表示网格内的相对宽度

CSS函数：repeat

子元素占据多个网格：使用grid-columns和grid-rows

@media

@media代码块可以根据设备的实际情况来应用附加的样式。

条件：

screen：屏幕设备

max-width：应用条件的最大宽度

min-width：应用条件的最小宽度

max-height：应用条件的最大高度

min-height：应用条件的最小宽度

示例：导航栏的响应式布局