非常全的HTML+CSS+JS学习记录（一：初识）

懒回顾，半缘君

已于 2022-01-18 18:16:44 修改

阅读量543

点赞数 1

分类专栏：前端文章标签： javascript html css css3 html5

于 2022-01-11 11:20:10 首次发布

本文链接：https://blog.csdn.net/CSDN_YJX/article/details/122425589

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

目录（全部用的 VScode）

第一天
第二天

第一天

学习目标

在这里插入图片描述

学习内容：概念性知识

1.1什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm 或.html后缀结尾的文件，因此将其俗称为HTML文件。

1.2什么是HTML

HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言(markup language)。

标记语言是一套标记标签(markup tag)。

所谓超文本，有2层含义∶
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制)。
2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。

在这里插入图片描述

常用的浏览器（国际中）及内核

在这里插入图片描述

web标准（重点）

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟）是国际最著名的标准化组织。

为什么需要Web标准？
浏览器不同，它们显示页面或者排版就有些许差异。
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点∶
1。让 Web的发展前景更广阔。
2．内容能被更广泛的设备访问。
3．更容易被搜寻引擎搜索。
4．降低网站流量费用。
5．使网站更易于维护。
6．提高页面浏收速度。

web标准的构成
在这里插入图片描述

HTML 标签

在这里插入图片描述
先建立一个txt文件，记事本的字体太小可以调整一下。等代码全写完了再改文件后缀名

<html></html>  双标签
<br />         单标签

HTML语法规范：
1。HTML标签是由尖括号包围的关键词，例如<html>。
2.HTML标签通常是成对出现的，例如和，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
3．有些特殊的标签必须是单个标签（极少情况），例如<br/>，我们称为单标签。

标签关系：
双标签关系可以分为两类:包含关系（父子）和并列关系（兄弟）。

HTML基本结构标签：
在这里插入图片描述

页面的头部：<head>

标题：<title>

这一大块都是<body> 标签

新建一个文本文档，然后输入以下代码后修改文件拓展名

<html>
	<head>
		<title> 第一个页面</title>
	</head>
	<body>
	键盘敲烂，工资过万
	</body>
</html>

用浏览器打开之后就是：
在这里插入图片描述

VScode里写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我在VScode里写的第二个网页</title>
</head>
<body>
    写代码是件非常快乐的事情。
</body>
</html>

在这里插入图片描述
鼠标右键然后点击这个就可以在默认的浏览器运行查看啦

第二天

vsCode工具生成骨架标签新增代码

在这里插入图片描述

如果定义成英文或者法文等网站，某些网页翻译插件或搜索引擎会进行相应的识别。

charset 字符集的意思

HTML标签

在这里插入图片描述

<body>
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
</body>

段落和换行标签（重要)

在这里插入图片描述
可以设置一下：

如果只是下边这样直接复制一段文字，那么真正显示的时候不会换行：

想分成几段，就写几个<p></p>。
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。
如果希望某段文本强制换行显示，就需要使用换行标签<br />。（这个标签只需要一个就行，不成对）
单词break的缩写，意为打断、换行。不等于换段落，还是一个段。
如：
在这里插入图片描述

文本格式化标签

在这里插入图片描述
重点记加粗和倾斜、

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>文本格式化标签</title>
</head>
<body>
	我是<strong>加粗</strong>的文字
	我是<b>加粗</b>的文字
	我是<em>倾斜</em>的文字
	我是<i>倾斜</i>的文字
	我是<del>删除线</del>我是<s>删除线</s>
	我是<ins>下划线</ins>我是<u>下划线</u>
</body>
</html>

`<div>`和`<span>`标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

div是division的缩写，表示分割、分区，自己独占一行。span意为跨度、跨距，跨行来显示，一行可以放多个。

特点:
1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
2.<span>标签用来布局，一行上可以多个<span>。小盒子

图像标签和路径(重点)

1.图像标签
这是个单标签，只需要写开始标签即可，不需要写结束标签。前提是图片和HTML文件放在同一目录下（放在一起）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>图像标签</title>
</head>
<body>
	<h4>图像标签的使用:</h4><img src="img.jpg" />
	<h4> alt替换文本图像显示不出来的时候用文字替换:</h4><img src="img1.jpg" alt="我是shabi老师"/>
</body>
</html>

在这里插入图片描述

width单位是像素。
格式：

同时修改宽度和高度会使图片发生失真。所以通常只改其中一个，这样图片能够锁定长宽比进行尺寸的更改。

在这里插入图片描述
border一般在CSS里进行设定，所以这里只是演示一下。

图像标签属性注意点:
①图像标签可以拥有多个属性，必须写在标签名img的后面。
②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③属性采取键值对的格式，即key= "value"的格式，属性=“属性值”。

懒回顾，半缘君

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
非常全的HTML+CSS+JS学习记录（一：初识）

目录（全部用的 VScode）第一天学习目标学习内容：概念性知识1.1什么是网页1.2什么是HTML常用的浏览器（国际中）及内核web标准（重点）HTML 标签第一天学习目标学习内容：概念性知识1.1什么是网页网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以**.htm** 或**.h
复制链接

扫一扫