课堂笔记HTML入门笔记

最新推荐文章于 2023-01-12 15:14:08 发布

ChengMeng11

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量218

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ChengMeng11/article/details/104474837

版权

预备内容：软件安装

1.笔记本工具—typroa（方便记录说明文档，图片等内容）

减号加空格可出现此点
文件名：由基本文件名.扩展名（扩展名来确定这个文件的打开方式）
- 在此电脑中，点击上方的查看，里面会有文件扩展名，将其选中后，可显示文件的扩展名图片如下：
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yCJdonAD-1582515923412)(C:\Users\张杰\AppData\Local\Temp\1582006618946.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IjJ2Km97-1582515923412)(C:\Users\张杰\AppData\Local\Temp\1582006636905.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EgjKX9jz-1582515923412)(C:\Users\张杰\AppData\Local\Temp\1582006669162.png)]

2.截图工具的安装

Greenshot
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B3vFSC6Y-1582515923412)(C:\Users\张杰\AppData\Local\Temp\1582006700097.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L5nO2BsV-1582515923412)(C:\Users\张杰\AppData\Local\Temp\1582006765853.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lZcEkhjg-1582515923412)(C:\Users\张杰\AppData\Local\Temp\1582006803558.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tnRVhlbC-1582515923413)(C:\Users\张杰\AppData\Local\Temp\1582006846071.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LD0Qrdqx-1582515923413)(C:\Users\张杰\AppData\Local\Temp\1582006897118.png)]
完成！截图快捷键为：ALT+Q

3.开发工具（网页设计）

sublimes——无需安装
解压
将解压后的文件复制到C盘中

HTML(此处为3级标题)

一、HTML（简介）（此处为4级标题）

1.HTML是什么？（此处为5级标题几级标题，就用几个#）（快捷键是：ctrl+左边的123…等数字几，就有几个#）

HTML:Hyper Text Markup Language 超文本标记（标签）语言
此语言，是由各种标签组成，用来制作网页，告诉浏览器该如何显示页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YUPUMUr2-1582515923413)(C:\Users\张杰\AppData\Roaming\Typora\typora-user-images\image-20200221182901643.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WyVsEl7h-1582515923414)(C:\Users\张杰\AppData\Roaming\Typora\typora-user-images\image-20200221182919451.png)]

2.作用

制作网页，控制网页和内容的显示；
插入图片、音乐、视频、动画等各种多媒体；
通过链接检索信息；链接：通过点击图标进入另一个页面叫做链接
使用表单获取用户的数据，实现交互。表单：填写账户或密码的地方

3.HTML版本

W3C:world wide web consortium 互维网联盟,制定Web技术的相关标准和规范的组织, HTML就是由W3C制订的标准（www.3个w的具体内容和com的具体内容）；
两个版本: HTML 4.0.1 , HTML 500----通常H5；
官网: https://www.w3school.com.cn。

4.扩展名

HTML文件的扩展名是以.html或.htm结尾

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5fpPUbPf-1582515923414)(C:\Users\张杰\AppData\Local\Temp\1582007411049.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mwObFJRQ-1582515923414)(C:\Users\张杰\AppData\Local\Temp\1582007551196.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Et1heRE-1582515923414)(C:\Users\张杰\AppData\Local\Temp\1582007582150.png)]

####二、HTML文档的结果

1.基本结构

1.1简介

html标签是由尖括号的关键词，如<html>,通常标签都是成对出现的，如： <html><html>
以<html>为根标签，包含：<head>头部和<body>主体部分；
头部提供关于网页的相关信息，如标题、文档类型、字符编码、关键词等摘要信息摘要信息；
主体部分提供网页要显示的内容，真正显示页面中的；
合理的缩进；
标签名不区分大小写,但一般要用小写。
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sNfAswPy-1582515923415)(C:\Users\张杰\AppData\Local\Temp\1582025024492.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dVCKH24H-1582515923415)(C:\Users\张杰\AppData\Local\Temp\1582025089722.png)]
- 若出现图中现象
- 需要添加一个东西 <meta charset = "utf-8">
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K7ZiYN3h-1582515923415)(C:\Users\张杰\AppData\Local\Temp\1582025196854.png)]
- 但结果还是[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G1aROQWs-1582515923415)(C:\Users\张杰\AppData\Local\Temp\1582025269325.png)]
- 因为，在软件中，输入：<meta charset = "utf-8"> 会出现汉子，[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jODo5z4d-1582515923416)(C:\Users\张杰\AppData\Local\Temp\1582025429003.png)]，而在记事本中需要输入：<meta charset = "gbk">[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AzWHWj5H-1582515923416)(C:\Users\张杰\AppData\Local\Temp\1582025545540.png)]。这样的话，编码格式才符合，运行就会出现汉子。

1.2开发工具

记事本（notepad）,sublime,notepad++,Dreamweaver,VScode,webstorm等

使用步骤:

1.新建文件(ctrI+N)，然后保存(ctrl+S),指定扩展名.html；
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C17K8zGA-1582515923416)(C:\Users\张杰\AppData\Local\Temp\1582026477308.png)]
2.编写html代码；
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MVjC5G0e-1582515923416)(C:\Users\张杰\AppData\Local\Temp\1582026751892.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hFth08fC-1582515923416)(C:\Users\张杰\AppData\Local\Temp\1582026791218.png)]
3.在浏览器中打开文件进行验证效果
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Juk7sOKH-1582515923416)(C:\Users\张杰\AppData\Local\Temp\1582027130645.png)]

sublime的使用技巧：

先保存再写代码，否则代码不会显示颜色；
创建一个文件夹，用来保存所有的网页内容，将文件夹拖拽到sublime在，以便于管理。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aeoEaIqm-1582515923416)(C:\Users\张杰\AppData\Local\Temp\1582027801446.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iodrEZ4f-1582515923417)(C:\Users\张杰\AppData\Local\Temp\1582027829438.png)]
侧边栏的显示/隐藏

方式一：查看–>侧边栏–>显示/隐藏侧边栏[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6XtzRPGq-1582515923417)(C:\Users\张杰\AppData\Local\Temp\1582028080824.png)]

方式二：ctrl+K紧接着按B
如果像查看别人的代码，但左右切换太麻烦可用多栏显示
方式一：查看–>布局–>列数2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0yJoktAv-1582515923417)(C:\Users\张杰\AppData\Local\Temp\1582028304447.png)]
方式二：alt+shift+2

1.3浏览器

常见的浏览器：IE浏览器微软,chrome谷歌（开发人员常用的浏览器）,firefox火狐,safari苹果；
浏览器的作用:读取html文件,并以网页的形式进行显示；
浏览器不会直接显示html标签,而是使用标签来解释网页的内容。

2.标签

2.1标签的组成

一个完整的html标签的组成：

<标签名属性名="属性值">内容</标签名>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>标签</title>
	</head>
	<body bgcolor="red"text="blue">
		html从入门到精通！
	</body>
</html>

属性值要用双撇号括起来，一般用双撇号（双撇号就是英文的双引号）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CspxoSvx-1582515923417)(C:\Users\张杰\AppData\Local\Temp\1582031577824.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NZ1wYOGQ-1582515923417)(C:\Users\张杰\AppData\Local\Temp\1582031609136.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VCPdEUZc-1582515923417)(C:\Users\张杰\AppData\Local\Temp\1582031969990.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oNs3sKzt-1582515923418)(C:\Users\张杰\AppData\Local\Temp\1582032013958.png)]

2.2标签的分类

根据标签是否关闭，分为：关闭型和非关闭型

关闭型：有开始标签，有结束标签，即标签成对出现

<html></html>
<head></head>
<title>标题</title>
<body>主体<body>
<h1>一级标题</h1>
<h1>...<h6>

非关闭型：只有开始标签，没有结束标签

<meta>
<br>
<hr>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vq8rhUlU-1582515923418)(C:\Users\张杰\AppData\Local\Temp\1582032575666.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VXwFpsyV-1582515923419)(C:\Users\张杰\AppData\Local\Temp\1582032690102.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jO3gJZL4-1582515923419)(C:\Users\张杰\AppData\Local\Temp\1582032850115.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c6cVs8GE-1582515923419)(C:\Users\张杰\AppData\Local\Temp\1582032889710.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9kkvcVz7-1582515923419)(C:\Users\张杰\AppData\Local\Temp\1582033021616.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wP44P97d-1582515923419)(C:\Users\张杰\AppData\Local\Temp\1582033121490.png)]

根据标签是否独占一行，分为：块级标签和行级标签

块级标签：显示为块状，独占一行
```
<h1>大家好</h1>
<hr>
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e16Dyky3-1582515923419)(C:\Users\张杰\AppData\Local\Temp\1582033975286.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PDo7fXEK-1582515923419)(C:\Users\张杰\AppData\Local\Temp\1582034137449.png)]
行级标签：在行内显示，可以与其他文本内容在同一行显示
```
<span></span>
```
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y43axHcX-1582515923420)(C:\Users\张杰\AppData\Local\Temp\1582033788987.png)]
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HhiNn2iT-1582515923420)(C:\Users\张杰\AppData\Local\Temp\1582033898294.png)]

2.3注释

注释在浏览器中不会显示，是用来标注解释html语句，但通过查看代码源可以看到的

<!--注释-->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8OhjDKPC-1582515923420)(C:\Users\张杰\AppData\Roaming\Typora\typora-user-images\image-20200221174533657.png)]

2.4实体字符、

实体字符也称为特殊字符，用于显示一些特殊符号：如< > & 空格等

语法：

&实体字符的名称;

常用的实体字符：

&lt;       <    小于号    less   than
&gt;       >    大于号    great  than
&nbsp;    空格   space  在html中对于连续的空白字符（空格、缩进、换行等），在浏览器中显示时，只能显示一个空格。
&amp;      &    与
&quot;     "    英文状态下的双引号    也可以直接打双引号，浏览器中可以显示。
&copy;    版权符号   copyright
&reg;     注册符号   register
&times;   关闭符号

注意：实体字符，是严格区分大小写，即敏感大小写。如果大小写写错的话是没有办法显示的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6rmLx4xY-1582515923420)(C:\Users\张杰\AppData\Roaming\Typora\typora-user-images\image-20200221182257872.png)]

2.5文档类型

在HTML文档的第一行，使用来声明html文档的类型；

主要的功能就是：告诉浏览器页面的html文档的类型，简单来说，用来指定使用的html版本规范。

目前基本都使用的是html5，

快速出现构架的方法：
1.输入：html:5然后再按Tab键或者输入！再按tab
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5pZJATbV-1582515923420)(C:\Users\张杰\AppData\Local\Temp\1582028863987.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mm2PNR29-1582515923421)(C:\Users\张杰\AppData\Local\Temp\1582028878140.png)]
，使用来声明html文档的类型；

主要的功能就是：告诉浏览器页面的html文档的类型，简单来说，用来指定使用的html版本规范。

目前基本都使用的是html5，

快速出现构架的方法：
1.输入：html:5然后再按Tab键或者输入！再按tab
[外链图片转存中…(img-5pZJATbV-1582515923420)][外链图片转存中…(img-mm2PNR29-1582515923421)]
2.输入：html:4s然后再按Tab键 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gnIagi2i-1582515923422)(C:\Users\张杰\AppData\Local\Temp\1582028944734.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gcIdUjI6-1582515923422)(C:\Users\张杰\AppData\Local\Temp\1582028973003.png)]

ChengMeng11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
课堂笔记HTML入门笔记

预备内容：软件安装1.笔记本工具—typroa（方便记录说明文档，图片等内容）减号加空格可出现此点文件名：由基本文件名.扩展名（扩展名来确定这个文件的打开方式）在此电脑中，点击上方的查看，里面会有文件扩展名，将其选中后，可显示文件的扩展名图片如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yCJdonAD-1582515923412)(C:\...
复制链接

扫一扫