【学习笔记】| HTML、CSS

最新推荐文章于 2022-07-11 07:35:00 发布

AllenChenu

最新推荐文章于 2022-07-11 07:35:00 发布

阅读量586

点赞数 1

分类专栏： Java学习文章标签： html css java

本文链接：https://blog.csdn.net/weixin_50481461/article/details/113861530

版权

本文是一篇关于HTML和CSS的基础教程，从互联网技术概念入门开始，详细介绍了HTML的入门知识，包括HTML的作用、版本、标准结构以及常用基础标签。同时，文章也探讨了CSS的介绍、引入方式和选择器，帮助读者理解网页布局和美化的基本原理。重点讲解了HTML的标题、段落、超链接、多媒体、列表和表格等标签，以及CSS的盒子模型、浮动和定位等概念，是初学者入门的好资料。

摘要由CSDN通过智能技术生成

一、互联网技术概念入门

1.1CS/BS模式

互联网软件的两种模式
Client/Server
客户端/服务器模式

王者荣耀手机QQ 手机微信极品飞车系列使命召唤系列 CF

1需要下载安装客户端

2软件有客户端和服务端两部分组成

3软件更新比较麻烦所有的客户端都需要更新

4运算压力可以分摊给各个终端服务器承担的运算压力可以大大减轻

Browser/Server

浏览器/服务器模式

各种网站 b站尚学堂官网京东淘宝

1不需要下载安装客户端只需要有一个浏览器即可

2软件全部部署在服务器端

3软件更新比较简单只要更新服务器即可

4运算压力基本在服务端一般不会用来做大型游戏

1.2互联网三大基石

三大基石：URL，HTTP协议，HTML

互联网软件依赖的三种基础技术

URL：在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址。

HTTP协议：http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使得开发和部署是那么的直截了当。

HTML：HTML称为超文本标记语言。

假设小明给小红传纸条

URL : 小红的地址小红的座位

HTTP协议: 以中文发送 “中文”就是一个共同遵守的解析数据的规范

HTML: 纸条上的内容信息的载体 >>> 晚上去看电影呀

二、HTML入门

2.1什么是HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language

a) 超文本：比普通文本更牛逼的文本不仅仅可以展示文字可以展示各种媒体内容

b) 一般由前端工作人员来完成,后台研发人员不需要编写

c) 标记：(标签/元素/标记)

标记通常被称为 HTML 标签 (HTML tag)。

· HTML 标签是由尖括号包围的关键词，比如 <html>

· 封闭类型标记（也叫双标记），必须成对出现,如<p></p>

· 标签对中的第一个标签是开始标签，第二个标签是结束标签

· 开始和结束标签也被称为开放标签和闭合标签

· 非封闭类型标记，也叫作空标记，或者单标记，如<br/>

总结：我们学习HTML就是学习各种各样的标签，可以达到比普通文本更厉害的功能。那么后续浏览器可以对html文件做解析，就可以在浏览器上展示好看的效果。

2.2 HTML的作用

通过使用HTML的各种标签，然后生成一个HTML文件，这个文件可以被浏览器解析，浏览器内部有一个专门的HTML的解析器，解析后我们就可以看到炫酷的页面。(编写网页的超文本标记语言)

文件拓展名 windows 上每个文件都是有拓展名

文件拓展名代表着文件的类型 windows 可以根据文件的拓展名去自动选择文件打开的程序

一般win7和win10 默认隐藏文件拓展名 xp默认显示文件拓展名

网页文件拓展名为 .html 或者.htm 的纯文本文件

2.3 HTML版本

2.4 HTML的标准结构

创建一个HTML文件

通过记事本编辑代码即可，用该语言编写的文件，以 .html或 .htm为文件拓展名。

HTML不区分大小写，建议小写

开始写代码：

步骤：

（1）新建一个文本文档，将文本文档的后缀改为.html

（2）右键-用记事本打开，编写代码

<html>
   <head>          
   </head>
   <body>
       这是我的第一个html页面，入门页面，就是最基本的结构
   </body>
</html>

（3）下载谷歌浏览器

（4）选择文本文档，右键-打开方式-谷歌浏览器

（5）展示页面效果

根标签 html 最外层的标签所有其他的标签都放入该标签中

html根标签有两个一级子标签分别是head body

head中一般放的是不显示在网页上但是又比较重要的信息

body中一般放的是显示在页面上的内容

2.5 IDE介绍

集成开发工具 >>>> IDE

编码工具：

辅助程序员编写源代码的工具，它类似word，我们写文档会打开word文档来编写。

写代码也一样，需要借助工具来开发。

常见的编码工具有记事本、sublime Text、notepad++

集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。如微软的Visual Studio系列，Borland的[C++ Builder](https://baike.baidu.com/item/C++ Builder)、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。例如，许多人在设计网站时使用IDE（如webstorm、DreamWeaver等），因为很多项任务会自动生成。

我们使用的是Hbuilder。

2.6用Hbuilder开发步骤

(1) 将我提供的Hbuilder.zip压缩包解压

(2) 在解压后的文件夹中找到Hbuider.exe,直接双击使用，无需安装

(3) 用邮箱注册，用的功能会更多一点

(4) 选择视觉效果(选择你能看到的最浅的颜色)

(5) 新建项目：

(6) 在项目下新建一个html文件：

(7) 编写代码：

<html>
	<head>
		<title></title>
	</head>
	<body>
		this is my second html...
	</body>
</html>

(8) 用谷歌浏览器运行：

(9) 在浏览器上可以看到效果：

2.7 HTML基本结构

HTML标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

<html>
<head>
	<title>我的第一个 HTML 页面</title>
</head>
<body>
</body>
</html>

head标签

Head标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

<title>、<meta>、<link>、<style>、 <script>。

应该把标签放在文档的开始处，紧跟在后面，并处于标签之前。

文档的头部经常会包含一些标签，用来告诉浏览器关于文档的附加信息。

title标签

1.可定义文档的标题。

2.它显示在浏览器窗口的标题栏或状态栏上。

3.title写和你网页相关的关键词有利于SEO优化

<html>
<head>
   <title>我是页面的题目</title>
</head>
   <body>...</body>
</html>

SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求，从而提高自己网站被搜索引擎平台录取的几率，从而把精准用户带到网站。

网站都有目标群体，通过title、meta标签可以让目标群体通过关键词找到你的网站，所以你定义的关键词决定了会吸引什么样的群体。

meta标签

META标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。

元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。

常见的meta有：

Keywords(关键字)　keywords用来告诉搜索引擎你网页的关键字是什么。

 <meta  name="keywords" content="web前端,尚学堂培训">

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

<meta name="description" content="北京尚学堂,web前端培训">

author作者标注网页的作者

<meta name="author" content="root,root@xxxx.com">

代码：

<html>
	<head>
		<!--
			title 标题标签  定义显示在网页左上角的标题
		-->
		<title>第一个小网页</title>
		<!--meta 
			一般定义一些当前网页的特殊属性  
			通过meta标签的属性定义页面的特征
			<标签名 属性1='' 属性2=''></标签名>
			
			charset属性  定义当前页面的字符集 告诉浏览器以什么字符集解析当前页面
			name属性   一般用于定义当前网页的一些简单描述 便于在搜索引擎上根据描述搜索到当前网页
				keywords    关键字
				author      作者
				description 描述 一段陈述文字,描述当前网页
			html 属性值使用单引号或者是双引号 皆可
		-->
		<!—告诉浏览器以UTF-8字符集解析文字-->
		<meta charset="UTF-8" />
		<meta name="keywords" content="尚学堂,北京尚学堂"/>
		<meta name="author"   content="许佳奇" />
		<meta name='description' content="北京尚学堂目前有JAVA,大数据,人工智能python,PHP等主流的培训课程,为中国的IT行业培养了大量的技术人才" />
		<!--在**秒后 对网页进行刷新  -->
		<meta http-equiv="refresh" content="5;http://www.baidu.com" />
		
		<!--
			link 学习 CSS样式的 引入外部CSS样式文件
			script 学习 js 脚本语言  引入脚本语言文件
		-->
		<link />
		<script></script>
	</head>
	<body bgcolor="red">
			<!--
			注释:给人看的提示 不显示出来的内容 不执行的代码
			选中文字  按 ctrl +shift + /  注释/取消注释
			-->	
		武汉加油
	</body>
</html>

在这里插入图片描述

2.8回顾

HTML入门  
做网页的 网页的主体结构 
HTML的基本结构
一个根标签  <html></html>
两个一级子标签  
<head></head>不显示在网页中 但是又比较重要的内容
<meta />
	charset='utf-8'  设置页面解析的使用的字符集 告诉浏览器以什么字符集解析
		         设置的字符集要和文件本身存储所使用的字符集保持一致
	name     keywords 用来设置页面的搜索关键字
	             author      设置页面的作者
	             discription 简单描述页面		
   	content    上述属性的内容
	http-equiv='refresh' content='5;https://www.baidu.com'  
<title></title> 定义网页小标题
<body>
    
</body>

三、HTML常见基础标签

第一节、HTML专业词汇和概念

在线帮助文档 https://www.w3school.com.cn/

查看全部标签地址 https://www.w3school.com.cn/tags/index.asp

属性和属性值

Attribute

<hr width="50%" align="right" size="5" color="red">

1.附属于标签，对标签的特征进行设置

2.属性的值可以用双引号引起来（单引号也可以）

3.属性和属性值不区分大小写

4.属性之间无先后次序，属性也可省略（即取默认值）

5.属性都是写在开始标签中

文本

Text

标签的内容可以是子标签或者普通文本

最内层标签的内容称为文本

外层标签的内容也可以统称为文本

<html>
	<head>
		<meta charset="UTF-8">
		<title>第一个网页</title>
	</head>
	<body>
		<hr width="50%" align="center" size="5" color="red">
		<font size="3" color="blue">helloworld!!!</font>
	</body>
</html>

在这里插入图片描述

元素

Element

开始标记+中间内容+结束标记

 <p align="center">HTML文档包括两部分：头部部分和主体部分</p>

一个完整的标签我们也称之为为网页上的一个元素

标题标签和段落标签

标题标签

段落标签

格式化标签

文档地址 https://www.w3school.com.cn/html/html_formatting.asp

在这里插入图片描述

font >>> 字体 CSS样式

字符实体标签

字符实体查询地址 https://www.w3school.com.cn/html/html_entities.asp

特殊符号插叙地址 https://www.w3school.com.cn/tags/html_ref_symbols.html

第二节、超链接和多媒体标签

超链接标签

在这里插入图片描述

多媒体标签

<body>
   	<!--
   		图片
   		img  src  source图片的资源路径
   		src 可以是本地资源 也可以是网络资源
   		title 鼠标悬停于图片之上时 显示的文字
   		alt   图片加载失败 提示的文字
   	-->
   	<a href="http://www.bjsxt.com" target="_blank">
   		<img src="img/sxtlogo.png" width="400px" height="200px" title="尚学堂logo" alt="此处是尚学堂logo"/>
   	</a>
   	<img width="300px" height="180px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583225718398&di=4155d8f0a18c5fe06467a82890ea6c6b&imgtype=0&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F1712%2F124R5B11-9.jpg" />

   	<hr />
   	<!--
   		音频
   		audio
   		src 音频文件的路径
   		controls 在页面上显示 功能控件
   		loop 控制循环播放
   	-->
   //音频标签的第一种写法
   	<audio  src="audio/aaa.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
   //音频标签的第二种写法
   	<audio controls loop autoplay>//属性跟后面的属性值相同的时候 只写属性就可以了
   		<source src="audio/aaa.mp3"></source>
   		你的浏览器不支持该类型文件
   	</audio>
   	<!--
   		视频
   		video
   	-->
   	<video  src="video/05_HTML_图片标签.mp4" width="30%" autoplay="autoplay" controls="controls" loop="loop"></video>
   	<video controls loop autoplay width="30%">
   		<source src="video/05_HTML_图片标签.mp4"></source>
   		你的浏览器不支持该类型文件
   	</video>
   	
   </body>
<!-- 
      img 
              img不会换行 
              alt：图片不存在时的替换文本 
              title：鼠标移到图片上的提示文字 
               
      互联网图片类型 
      jpg：有损压缩  支持的颜色多 
      gif：无损压缩  颜色只支持256色 
              如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画 
      png：新一代网络图片格式  无损压缩，支持的颜色多 
       
      H5 Audio 
      音频  H5才开始支持 
      之前播放音频和视频，都需要利用第三方插件，比如flash player，而H5提供的音频和视频标签不需要外置插件，浏览器自己提供播放功能
      当前，audio 元素支持三种音频格式：mp3  wav  Ogg Vorbis 
      audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式 
       
      H5 Video 
      当前，video 元素支持两种视频格式：mp4  ogg 
      video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式 
      有时候也会看到使用embed来播放音频视频 
-->

第三节、列表标签

有序列表

Order list

无序列表

Unorder list

列表嵌套

尚学堂课程

*JAVA

1预科阶段

2初级阶段

3中级阶段

4高级阶段

5就业期

*Python

*大数据

*AI

定义列表

Defination list 一般用于图文混排

第四节、表格标签

Table tr td

table 代表整张表格、tr 代表一行、td 代表每一个单元格

<body>
		<table align="center" width="50%" border="1px" cellspacing="0px" cellpadding="0px">
					 //border表格线   cellspacing td间的空隙	cellpadding 文字跟边线之间的距离就为0px了
            			//cell有细胞的意思
				<tr>
					<td>姓名</td>
					<td>年龄</td>
					<td>班级</td>
					<td>分数</td>
				</tr>
				<tr>
					<td>张三丰</td>
					<td>100</td>
					<td>武当001</td>
					<td>100</td>
				</tr>
				<tr>
					<td>张翠山</td>
					<td>30</td>
					<td>武当002</td>
					<td>30</td>
				</tr>
				<tr>
					<td>name1</td>
					<td>10</td>
					<td>一班</td>
					<td>20</td>
				</tr>
				<tr>
					<td>name1</td>
					<td>10</td>
					<td>一班</td>
					<td>20</td>
				</tr>
				<tr>
					<td>name1</td>
					<td>10</td>
					<td>一班</td>
					<td>20</td>
				</tr>
		</table>
		
	</body>

在这里插入图片描述

thead tbody tfoot th

<body>
   	
   	<!--
   		thead 表头
   		tbody 表体 如果不写 浏览器会自动给我们添加
   		tfoot 表尾
   		th 相当于自带 加粗 和 居中 效果的 td 
   	-->
   	<table align="center" width="50%" border="1px" cellspacing="0px" cellpadding="0px">
   	
   		<thead bgcolor="greenyellow">
   			<tr>
   				<th>姓名</th>
   				<th>年龄</th>
   				<th>班级</th>
   				<th>分数</th>
   			</tr>
   		</thead>
   		<tbody bgcolor="gray">
   			<tr>
   				<td>张三丰</td>
   				<td>100</td>
   				<td>武当001</td>
   				<td>100</td>
   			</tr>
   			<tr>
   				<td>张翠山</td>
   				<td>30</td>