HTML & CSS 学习总结

最新推荐文章于 2024-07-21 17:58:14 发布

WEIdw666

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量120

点赞数

文章标签： html css 学习前端

本文链接：https://blog.csdn.net/weixin_52886895/article/details/125689304

版权

HTML

一.HTML简介

1.HTML的全称为超文本标记语言，是一种标记语言。

2.它包括了一系列的标签，通过这些标签可以将网络上的文档统一格式，使分散的Internet资源连接为一个逻辑整体。

3.HTML不是一门编程语言，而是一种用于定义网页结构的标记语言，它使用标签来标注文档。

二.HTML5简介

1.HTML5在W3C中的定义：HTML 5 是下一代的 HTML，设计HTML5最初目的是为了在移动设备上支持多媒体。

2.HTML5是互联网的下一代标准。HTML5引入了很多新的合适的标签，并且它摒弃了一些不必要的标签，所以HTML5的功能更为强大，是目前较为常用的语言。

三.HTML结构

1.定义HTML文件的基本格式为:

<!DOCTYPE html>
<html lang=“en”>
   <head>
        <meta charset=“UTF-8”>
        <title>标题</title>
    </head>
    <body>
     /*书写标签，定义网页结构*/
    </body>
</html>

2.结构分析:
<!DOCTYPE html> :HTML5文档声明

<html> :是HTML页面的根元素

<head> :包含了文档的元数据

<title> :描述文档的标题

<body> :包含了可见的页面内容

</html>：为结束标签，类似的很多的有加'/'符号的都是结束标签

四.HTML标签

1.基础标签

< h1 >—< h6 >：标题标签
< p >：段落标签
< br >：换行标签
< hr >：定义水平线
< font >: 定义文本的字体、尺寸、颜色
< center > 文本居中
< b >：规定文本字体为粗体
< strong >：规定文本字体为粗体
< u >：定义文本的下划线
< em >：定义文本的下划线
< s >：定义文本的删除线
< del >：定义文本的删除线
< i >：定义文本文字为斜体
< ins >：定义文本文字为斜体

2.图片、音频、视频标签
< img >：定义图片
< audio >：定义音频（src:定义音频的URL controls:定义播放控件）
< video >：定义图片（src:规定视频的URL controls:显示播放控件）

height:定义图像的高度
width:定义图像的宽度

3.列表标签

< ol >：有序列表 type：定义序号的类型

< ul >：无序列表 type：定义圆圈等图形

< li >：列表项

4.表格标签

< table >:定义表格

< tr >:定义行

< td >:定义单元格

< th >:定义表头单元格（表格线）

border:规定表格边框的宽度。
width:规定表格的宽度
cellspacing:规定单元格之间的空白
tr:定义行
align:定义表格行的内容的对齐方式
td:定义单元格
rowspan:规定单元格可跨越的行数
colspan:规定单元格可横跨的列数

5.表单标签

< label >:为表单项定义标注
< select >:定义下拉列表
< option >:定义下拉列表的列表项
< textarea >:定义文本领域

form：定义表单
action：规定当提交表单时向何处发送表单数据URL
method：规定用于发送表达数据的格式
get：浏览器会将直接附在表单的action URL之后
post：浏览器会将数据放在http请求信息体中

6.布局标签

< div ></div>

< span ></span>

他们与CSS一起完成布局

7.表单项标签：
< input >:表达项，通过Type属性控制输入形式
type取值:

text 默认值，定义单行的输入字段

password：定义密码字段

radio:定义单选按钮

file:定义文件上传按钮

reset:定义重置按钮，清除表单所有数据

button:定义可点击按钮

checkbox:复选框

select:定义下拉列表，

option:定义列表项

textarea:定义文本域

hidden:定义隐藏的输入字段

submit:提交按钮会把表单数据发送给服务器

8.超链接标签：
< a >
href:访问资源URL。
target:打开资源的方式。
_self:默认值，在空白页面打开。
_blank:在空白页面打开

9.特殊字符

CSS

一.CSS简介

1. CSS是Cascading Style Sheet的缩写。译作”层叠样式表单“。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2.CSS不仅可以静态地修饰网页，也可以配合脚本语言动态地对网页的元素进行格式化

3. CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

二.CSS模型

1.所有的HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使。

2.CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

3.盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

三.CSS导入HTML三种方式

1.内联样式：直接在标签内使用style属性来对标签进行定义，更改标签的显示样式。

2.外部样式: 在CSS文件中对样式进行定义书写，定义完成后使用link标签引入CSS文件。

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

3:内部样式: 在HTML文件内使用style标签，在style标签内定义CSS样式。

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>标题</title>
  <style type="text/css">
    div{
  	    width: 65px;
        height: 50px;
        background: green;
    }
  </style>
</head>
<body>
     <div>DIV</div>
</body>
</html>

四.CSS选择器

1.元素选择器:根据元素的名称来选取HTML元素

{color: red} or div {color: red}

2.id选择器是:根据元素的属性值id来选取

{color: red} #001{color: red}

3.类选择器:类选择器选择有特定class属性的HTML元素。

.class属性值{color: red}.cls{color: red}

总结

在没有怎么学习过HTML和CSS之前对于自己做出来的页面觉得非常的丑陋，对于每次在需要用到网页来实现完成的作业感觉看起来非常的不堪。但是这学期学习了Web课程，了解了HTML和CSS，感觉自己对于网页的显示样式、美化等等都有了不错的提高。但是也只是掌握着一些基础的知识，不能够熟练地深度地掌握对于HTML和CSS的应用。希望能够在自己以后不断的学习下，提高自己对于这些知识的掌握程度，可以做出更好的网页。