HTML&CSS学习总结

qq_62819112

已于 2023-06-26 16:20:38 修改

阅读量125

点赞数

文章标签： html css 学习

于 2023-06-26 16:19:17 首次发布

本文链接：https://blog.csdn.net/qq_62819112/article/details/131399761

版权

HTML和CSS的总结报告

首先一个网页中HTML仅代表了结构布局，显得十分单调，从而引入了CSS（样式）使页面更加美观。

HTML的主要介绍：

首先HTML是一种标签语言，使用标签来注明文本、图片和其他内容，以便于在浏览器中显示。HTML标签包含一些规定的"元素"。

开始标签：元素的名称被左、右角括号所包围。表示元素作用范围的开始。如：<div>

结束标签：元素名之前多一个斜杠，表示着元素作用结尾。如：</div>

内容：元素的内容，本例中就是所输入的文本本身。

元素：开始标签、结束标签与内容相结合，便是一个完整的元素。（标签一般都是开始标签与结束标签为一组，有开始标签就必须有结束标签，二者缺一不可。但有些标签除外，如<br>为单标签，表示换行。）

跟其他高级语言程序一样，为了我们方便编写，一般选择在某软件下编写（以VS Code为例子说明），在编写一个网页工程中，我们首先可以在VS里创建一个文件夹，将HTML，CSS，JS，图片这些内容各自放在一个目录下整理，在创建html文件时一定要注意后缀为.html文件，然后可以在VS code里输入！+回车键生成html的模板（如下图）。

Head标签为头，里面有字符的编码，网页的标题名字，书写CSS相关内容，以后引入CSS，JS文件等

Body标签为主要内容地，在这里编写主要html结构内容

接下来说明一些常用重要的html标签：

1.标题标签 <h1> ~ <h6>

如：<h1> 标题内容</h1>

语义：标题使用，并从数字1往后重要性逐渐递减

特点：a.加了标题的文字会变的加粗，字号也会依次变大

b.一个标题独占一行

2.段落标签<p>

如：<p> 段落内容 </p>

语义：把html文档内容分为若干个段落

特点：a.文本在一个段落中会根据游览器窗口的大小自动换行

b.段落和段落之间保有空隙。

3.换行标签<br/>

语义：强制换行

特点：a.换行标签是个单标签

b.换行标签跟段落标签不一样，换行标签是简单地开始新的一行，而段落之间会插入一些垂直的间距。

4.<div>和<span>标签

语义：两者都是一个盒子，用来装内容

特点：a.<div>标签用来布局，但是一行只能放一个<div>大盒子。

b.<span>标签用来布局，一行可以放多个<span>小盒子。

5.<img src=”” />图像标签

特点：a. src是该标签的必须属性，用于指定图像文件的路径和文件名。

b. 图像标签里还有其他属性，alt（替换文本，图像不能显示的文字），title(提示文本，鼠标放到图像上显示的文字)，width（设置图像的宽度），height（显示图像的高度），border(设置图像的边框粗细)

6.<a href=”跳转目标” target=”目标窗口的弹出方式”>文本或图像</a>超链接标签

两属性的作用：

href：跳转链接的地址（必要属性）。注：链接类型有外部链接，内部链接，空链接，下载链接，锚点链接。

target: 用于指定链接页面的打开方式，其中_self为默认值在当前窗口打开，_blank在新窗口打开。

7.表格标签（用来显示数据）

<table>

<tr>

<td> </td> (或<th> </th>)

...

</tr>

...

</table>

说明：

<table>用于定义表格
<tr> 嵌套在<table>中，表示一行
<td>和<th>嵌套在<tr>中，表示一个数据（单元格），<th>表示表头部分，文本内容会加粗。一般第一个<tr>标签中是<th>标签,比如一个学生信息表格中：第一行th对应姓名，年龄，成绩等，而后面的每一行中的tr是实实在在的数据信息。

表格的一些属性：
align（left，center，right）：表格的对齐方式

Border（1或“”）：是否表格中的数据有边框

Cellpadding(像素值)：规定单元边沿其内容之前的空白

Cellspacing（像素值）：规定单元格之前的空白

Width（像素或百分比）：规定表格的宽度

8.列表标签（用来布局的）

列表最大的特点是整齐、整洁、有序，它作为布局会更加自由和方便。

列表分为3大类：无序列表、有序列表、自定义列表。

无序列表：

<ul>

...

</ul>

说明：

无序列表的个列表项之间没有顺序级别之分，是并列的。
<ul>标签只能嵌套<li>标签，不允许添加其他标签或输入文字。
<li>标签自己相当于一个容器，可以容纳所有的元素

有序列表：

<ol>

...

</ol>

ol标签用于定义有序列表，列表排序以数字显示，其特点与上述无序列表ul标签类似。

自定义标签：

<dl>

...

</dl>

说明：

<dl>标签里只能包含<dt>和<dd>标签
<dt>和<dd>个数没有限制且里面可以任意放标签或文本，经常是一个<dt>对应多个<dd>。

9.表单标签

一个完整的表单通常由表单域、表单控件和提示信息3个部分组成。

表单域：是一个包含表单元素的区域

...

</form>

属性：

Action：填入url地址，用于接受并处理表单数据的服务器程序的url地址。

Method：填入get/pose,用于设置表单数据的提交方式。

Name：用于指定表单的名称，以区分同一页面中的多个表单域。

2.表单元素

<input type=””>标签：

type的属性值常用的如下：

Button:定义可点击按钮

Checkbox：定义复选框

File：供文件上传

Hidden：定义隐藏的输入字段

Image：定义图像形式的提交按钮

Password：定义密码字段，该字段中的字符被掩藏

Radio：定义单选按钮

Rest：定义重置按钮

Submit：定义提交按钮

Text：定义单行的输入字段，用户可以在其中输入文本

除主要的type属性外，<input>标签还有其他属性，如name，value，checked，manlength等。

<label>标签：

主要功能如下：

像上述例子用了label标签后在单选按钮时，鼠标在男（lable中的内容）上点击也将勾选按钮。

当然还有很多表单标签，如select，textarea等标签，但使用相对较少，主要使用的都是input标签。

HTML内容小结：

前面我只例举了一些我认为十分重要的html标签，当然还有许多的html标签没有列举，html很多标签和属性其实也起样式作用（css），像什么文字设置粗体，斜体，删除线，下划线（strong，em，del，ins）标签以及前面提到的在表格标签中属性align对齐方式，border边框，width宽度等，但使用起来相对较为复杂且一般我们习惯在css进行样式修改，所以这些标签一般不用，而在css里面进行样式修改。Html除了标签之外的学习，还有很多的细节地方值得我们学习了解，比如在图像和超链接里面填地址时，相对路径中 /代表下一级路径，../代表上一级路径；注释快捷键与idea一样ctrl+/（vscode里）；html里输入文本时空格还有一些特殊字符不会起作用，这时要用一些字符来代替如空格符，小于符号&IT，大于符号>，和符号&等；还有在表格中，我们有时候希望某区域是合并的（如两个单元格连在一起），也有相应的操作。最后，总的来说，我认为html常用的标签和使用细节相比css和js还是少很多的，常用的标签也就标题标签h1，段落标签p，盒子标签div和span，表格，表单，列表，换行标签br，图像img，超链接a等。

CSS的主要介绍：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

一、首先介绍一下css的引入方式，一共有3种大类（行内样式表，内部样式表，外部样式表）。

内部样式表（也被称为嵌入式引入）：

用一个<style> CSS内容 </style>标签来书写css，该标签理论上可以html文件中任意地方，但一般放在<head>标签里，该方法整体代码结构清晰，但是没有实现结构与样式完全分离。

2.行内样式表：

它是在元素标签内部用属性style来设当css样式，只适用于简单的样式修改。

如：<div style=””>hello</div>,可以明显看出此时style就是一个属性，在双引号里面要符合css的规范，用“；”符号来间隔，书写繁琐，同样与内部样式表一样没有体现出结构与样式相分离的思想。

3.外部样式表：

跟html文件一样需要注意创建一个css文件后缀为.css，然后把所有css代码都放在次文件中，在html文件中用link标签来引入该css文件。

如:<link rel=”stylesheet” href=”css文件路径”>

该样式也被称为外链式或链接式引入，这种方式是开发中常用的方式。

二、选择器分为了基础选择器和复合选择器两大类，先说明基础选择器的4类。

标签选择器：标签选择器可以把某一类标签全部选择出来。

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前系统。

2.类选择器：

类选择器在html中以class属性表示，在css中，类选择器以一个点“.”号显示。可以单独选一个或者几个标签，也可以一个标签有多个类名如<div class=”color font”>,这样就有颜色和字体两个类名。

3.Id选择器：

与类选择器区别id选择器只能出现一次

使用语法跟上述类选择器差不多，符号用#+名字，在标签里属性变为id。

如：#nav { ... }

4.通配符选择器：

用*号定义，它表示选取页面中所有元素（标签）。

三、复合选择器：

1.后代选择器：

元素1 元素2 {样式声明}

上述语法表示选择元素1里面所有元素2。

例如：ul li {样式声明}，选择ul里面所有的li标签元素

2.子选择器：

元素1 > 元素2{样式声明}

上述语法表示选择元素1里面的所有直接后代元素2

例如：div>p{样式声明}，选择div里面所有最近一级p标签的元素

3.并集选择器：

元素1，元素2 {样式声明}

上述语法表示选择元素1和元素2

ul,div{样式声明}，选择ul和div的所有标签元素

4.伪选择器：

给某些选择器添加特殊的效果，比如给链接添加特殊效果，以最常用的a标签为例。

a：link，选择所有未被访问的链接

a：visited，选择所有已被访问的链接

a：hover，选择鼠标指针位于其上的链接

a：active，选择活动链接

四、css常用的属性

1.字体（font）：可以改变字体系列（font-family），大小（font-size），粗细（font-weight），和文字样式（font-style）。也可以用字体复合属性来写（简写）。

2.文本属性：可以改变文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。

文本颜色（color）：属性值可以位red，greed等英文单词，或十六进制（#666666）和RGB（255，0，0）表示。

对齐方式（text-align）：前面html的表格属性也提及过，属性值位left，right，center左右中心对齐。

装饰文本（text-decoration）:属性值有none（默认，没有装饰线），underline(下划线)，overline（上划线），line-through（删除线）。

文本缩进（text-indent）：属性可以位px或em（相对1个文字的大小）。

行间距（line-height）：设置行间的距离，可以控制文本行与行之间的距离。属性为px。

3.背景：有背景颜色（background-color）、背景图片(background-image)、背景平铺(background-repeat)、背景图片位置(background-position)、背景图像固定(background-attachment)等.

五、css盒子模型（div和span）：盒子模型十分重要

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子Box。
利用css设置好盒子样式，然后摆放到相应位置。
往盒子里面装内容。

网页布局的核心本质：就是利用css摆盒子

设计到盒子css属性样式有边框，外边距，内边距等，就不一一介绍。

Css内容小结：

前面只介绍了css最基础最简单的一些内容（引入，选择器，基础css样式属性），还有很多内容细节地方没有提及，也说不完。比如书写格式有规范（对运行结果没影响）；选择器该如何使用使代码比较清楚以及选择器之间的优先级关系具体说起来都比较麻烦；css样式属性以及对应的属性值填写十分多，但一些样式属性css中有简写格式，像内外边距有上下左右4个方向的属性值，填一个（上下左右都是该属性），两个（代表上下，左右属性），三个（代表上，左右，下属性）都不是想象中的按顺序简单含义。Css除了这些内容还有什么圆角边框，盒子、文字阴影，浮动元素布局等，甚至还有很多框架（bootstrap，foundation）供我们去学习使用。最后，相比html简单少量的内容来说我对css的感受是它要我们多去学习多去使用，拓宽眼界，它的内容很多，不光是只属性样式多，而且它的学习方面很多，当真真实实去写一遍网页会感觉到对其有更加清晰的认知，对下一次进行布局和书写有了更加清晰明了的思路和一些想法。