HTML与CSS学习总结(一)

最新推荐文章于 2022-07-10 06:06:05 发布

Letmeng

最新推荐文章于 2022-07-10 06:06:05 发布

阅读量822

点赞数 2

文章标签： html与css基础学习零基础学习html

本文链接：https://blog.csdn.net/weixin_43896880/article/details/84675831

版权

HTML与CSS学习总结一

什么是HTML ？
标签

什么是HTML ？

doc 和 txt 文件

doc：在微软Office Word软件中使用
txt：在记事本中打开使用
可以写字和阅读
Word文件可以通过各种按钮，组织结构和内容

HTML文件其实也没有什么神秘的

在浏览器中使用（IE，火狐，Chrome等等）
阅读页面的文字和其他信息
通过标签组织结构和内容

新建第一个 html 文件

新建一个txt文件
重命名：将后缀名 .txt 改为 .html

这里点击”是“
完成后会显示一个浏览器的图标

直接双击打开（它会以浏览器的方式打开你的html文件）

什么是html？

HyperTextMarkup Language
超文本标记语言
超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素

跟多标签

http://www.w3school.com.cn/tags/tag_html.asp

HTML、CSS、JavaScript之间的关系

HTML：组织内容和结构
CSS：对内容进行美化
JS：影响用户的交互

准备工作

Atom编译器https://atom.io/（个人认为很好用）
浏览器：Chrome

双标签
- h1-h6（标题） https://www.w3schools.com/tags/tag_hn.asp
```
<h1>this is a heading</h1>
```
- p（段落） https://www.w3schools.com/tags/tag_p.asp
```
<p>this is some test in a paragraph</p>
```
单标签
- br(换行) https://www.w3schools.com/tags/tag_br.asp
```
<br>
```
- hr(分割线) https://www.w3schools.com/tags/tag_hr.asp
```
<hr>
```

更多标签

链接

<a href="网址">   </a>

图片

<img src="图片的地址（绝对地址或相对地址）">   </img>

更多标签
https://www.w3school.com/tags/tag_doctype.asp

属性

附加信息

有的元素需要一些附加信息才能工作
属性2
属性1

标准的网页结构

<!DOCTYPE html>
<html>
	<head>
		<title>文档标题</title>
	</head>
	<body>
	文档的内容
	</body>
</html>

head包含的是页面的一些额外信息

Meta data https://www.w3schools.com/tags/tag_meta.asp
CSS和JS的引用 https://www.w3school.com/tags/tag_link.asp
示例：连接一个CSS文件

<link rel="stylesheet" href="main.css">

在这里插入图片描述

注：如果html与css文件不在同一文件夹中，要在文件名前面加相对路径！！！

body包含的是所有展示给用户看的内容

标题
图片
文章
视频
etc.

标签是可以嵌套的

层级关系

根元素
父元素
子元素