CQJTU HTML+CSS总结

最新推荐文章于 2024-06-04 08:13:24 发布

小猴有礼貌

最新推荐文章于 2024-06-04 08:13:24 发布

阅读量338

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_52482704/article/details/125416021

版权

HTML

一、HTML是什么？

HTML是超文本语言（HyperText Markup Language）的缩写，它定义了网页内容的含义和结构，用HTML来构建Web 页面即所谓的网页。
HTML不是一门编程语言，而是一种用于定义内容结构的标记语言，它使用标签来标注文档。
浏览器不会显示HTML标签，而是使用它们呈现页面的内容

二、W3C对HTML5的需求整体原则

新特性应该基于HTML、CSS、DOM以及JavaScript
减少对外部插件的依赖
采用标记语言来替代脚本语言
HTML5应该独立于设备

三、HTML结构分析

< !DOCTYPE html > 声明为 HTML5 文档
< html > 元素是 HTML 页面的根元素
< head > 元素包含了文档的元（meta）数据
< title > 元素描述了文档的标题
< body > 元素包含了可见的页面内容
< h1 > 元素定义一个大标题
< p > 元素定义一个段落

HTML组成

【该图片引用自菜鸟教程】

四、HTML标签

1.基础标签

< h1 >—< h6 >：规定从大到小6级标题标题（其中一级标题< h1 >最醒目）
< p >：段落标签
< br >：换行标签
< hr >：定义水平线
< font >: 定义文本的字体、尺寸、颜色
- face：规定字体
- size：规定字号
- color：规定颜色
< center > 文本居中
< b >：规定文本字体为粗体
< strong >：规定文本字体为粗体
< u >：定义文本的下划线
< em >：定义文本的下划线
< s >：定义文本的删除线
< del >：定义文本的删除线
< i >：定义文本文字为斜体
< ins >：定义文本文字为斜体

2.图片、音频、视频标签

< img >
- src：规定图像的URL
- height：规定图片的高度
- width：规定图片的宽度
< audio >
- 支持格式：MP3、WAV、OGG
- src：规定音频URL
- controls：显示播放控件
< video >
- 支持格式：MP4、WebM、OGG
- src：
- controls
< a >
- 定义超链接，用于链接资源
- href：制定访问资源的URL
- target：指定打开资源的方式
  - _self：默认值，在当前页面打开
  - _blank：在空白页面打开

3.列表标签

< ol >：有序列表
- type：定义序号的类型
< ul >：无序列表
- type：定义圆圈等图形
< li >：列表项

4.表格标签

< table >：定义表格
- border：规定表格边框的宽度
- width：规定表格的宽度
- cellspacing：规定单元格之间的空白
< tr >：定义行
- align：定义表格行的内容对齐方式
< td >：定义单元格
- rowspan：规定单元格可横跨的行数
- colspan：规定单元格可横跨的列数
< th >：定义表头单元格

5.布局标签

< div >：定义HTML文档中的一个区域部分
< span >：用于组合行内元素

6.表单标签

< form >：定义表单
- action：规定当提交表单时向何处发送表单数据，URL
- method：规定用于发送表单数据的方式
  - get：浏览器会将数据直接附在表单的action URL之后。大小有限制
  - post：浏览器会将数据放到http请求消息体中。大小无限制
< input >：定义表单项，通过type属性控制输入形式
< label >：为表单项定义标注
< select >：定义下拉列表
< option >：定义下拉列表的列表项
< textarea >：定义文本域

7.表单项标签

< input >：表单项，通过type属性控制输入形式
- type取值：
  - text：默认值，定义单行的输入字段
  - password：定义密码字段
  - radio：定义单选按钮
  - checkbox：定义复选框
  - file：定义文件上传按钮
  - hidden：定义隐藏的输入字段
  - submit：定义提交按钮，提交按钮会把表单数据发送到服务器
  - reset：定义重置按钮，重置按钮会清除表单中的所有数据
  - button：定义可点击按钮
< select >：定义下拉列表，< option >定义列表项
< textarea >：文本域

8.特殊字符

&lt：<
&gt：>
&amp：&
&quot："
&reg：已注册®
&copy：版权©
&trade：商标™
&nbsp：不断行的空白

CSS

一、什么是CSS？

CSS是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，它是一种标准的样式表语言，用于描述网页的表现形式。CSS的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS不仅可以静态地修饰网页，还可以配合JavaScript动态地修改网页中元素的样式，而且市面上几乎所有的浏览器都支持CSS。

二、CSS三种导入方式

1.外部样式表

新建一个CSS样式表文件（后缀名为.css）后，在HTML文件（后缀名为.html）中，使用< link >标签引入外部CSS，如图：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="mycsstext/css" href="mycssdemo.css">
  <title>页面标题</title>
</head>
<body>
</body>
</html>

2.内部样式表

将样式放在 HTML 文件中，这称为内部样式表。使用< style >标签，在标签内写入CSS样式，如图：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <style>
    h1 {
      color: pink;
    }

  </style>
</head>
<body>
  <h1>mycssdemo</h1>
</body>
</html>

3.内联样式

直接把样式规则直接写到要应用的元素中，如图：

<h1 style="color:pink;">I am a h1 heading</h1>

三、CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素，该模型如图：
盒子模型

【该图片引用自菜鸟教程】

四、CSS的层叠

在CSS中，所有样式从样式表的顶部级联到底部，允许随着样式表的进展添加或覆盖不同的样式，如图所示例子：

/*选择样式表顶部的所有段落元素*/
/*并将它们的背景颜色设置为橙色，字体大小设置为24像素*/
/*然后在样式表的底部，再次选择所有段落元素，并将它们的背景颜色设置为绿色*/
p {
  background: orange;
  font-size: 24px;
}
p {
  background: green;
}

层叠还适用于单个选择器中的属性，如图所示例子：

/*选择所有段落元素，并将它们的背景颜色设置为橙色。*/
/*然后在橙色背景属性和值声明的正下方，添加另一个属性和值声明，将背景色设置为绿色*/
p {
  background: orange;
  background: green;
}

五、CSS的选择器

1.简单选择器

① CSS 元素选择器

元素选择器根据元素名称来选择HTML元素，如图所示例子：

/*将页面上的所有<p>元素都将居中对齐，并带有粉色文本颜色：*/
p {
  text-align: center;
  color: pink;
}

② CSS id 选择器

id选择器使用HTML元素的id属性来选择特定元素。在选择特定的id元素时，需要写一个（＃），后跟该元素的id，如图所示例子：

/*将id="para1" 的HTML元素变为红色，并且居中*/
#para1 {
  text-align: center;
  color: red;
}

③ CSS 类选择器

类选择器选择有特定class属性的HTML元素。选择特定class的元素，需要写

/*将所有带有class="center"的 HTML 元素设置为红色且居中对齐：*/
.center {
  text-align: center;
  color: red;
}

2.组合器选择器

组合选择器有四种，分别是后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器，这里我们只介绍后代选择器和子选择器两种。

① 后代选择器

后代选择器匹配属于指定元素后代的所有元素，以（空格）作为分隔，如图所示例子：

/*选择<div>元素中的所有<p>元素，将其背景色设置为黄色*/
div p {
  background-color: yellow;
}

② 子选择器

子选择器匹配属于指定元素子元素的所有元素，它也称为直接后代选择器，以（>）作为分隔，如图所示例子：

/*选择属于<div>元素子元素的所有<p>元素，将其背景色设置为黄色*/
div > p {
  background-color: yellow;
}

3.伪类选择器

伪类用于定义元素的特殊状态。
它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
它的语法如下：

/*选择器后使用 : 号，再跟上某个伪类*/
selector:pseudo-class {
  property: value;
}

4.伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。
它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
它的语法如下：

/*选择器后使用 : 号，再跟上某个伪元素*/
selector::pseudo-element {
  property: value;
}

5.属性选择器

CSS属性选择器是为设置带有特定属性的HTML元素的样式
它的语法如下：

/*[attribute] 选择器用于选取带有指定属性的元素*/
/*选择所有带有 target 属性的 <a> 元素*/
a[target] {
  background-color: yellow;
}

总结

以上是我总结在课上学习到的HTML和CSS的相关知识，HTML可以构建处我们想要的Web页面，CSS能美化我们的页面，但我的学习还比较浅层次，知识也停留在基础层面，希望通过之后的不断学习，自己能够不断进步，也能更好地掌握HTML和CSS，构建出更加精致美观的页面。