HTML4入门

蒋幸若

已于 2023-08-10 12:58:22 修改

阅读量219

点赞数 1

文章标签：前端 html

于 2023-08-07 18:15:48 首次发布

本文链接：https://blog.csdn.net/weixin_51958545/article/details/132140373

版权

一、补充知识：

C/S架构与B/S架构

上面提到的应用软件，又分为两大类：
C/S架构，特点：需要安装、偶尔更新、不跨平台、开发更具针对性。
B/S架构，特点：无需安装、无需更新、可跨平台、开发更具通用性。
前端工程师，主要负责编写 B/S架构中的网页（呈现界面、实现交互）。
备注：大前端时代，我们可以用前端的技术栈，做出一个C/S架构的应用、甚至搭建一个服务器。

网页相关概念

网址：我们在浏览器中输入的地址。
网页：浏览器所呈现的每一个页面。
网站：多个网页构成了一个网站。
网页标准：
结构+表现+行为
HTML+CSS+JavaScript

二、HTML简介

全称：HyperText Markup Language（超文本标记语言）。
超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。
标记：文本要变成超文本，就需要用到各种标记符号。
语言：每一个标记的写法、读音、使用规则，组成了一个标记语言。

三、HTML入门

1. 准备工作

1、下载安装Chrome浏览器
2、搜索“默认应用”，设置Chrome浏览器为默认浏览器
3、初体验
第一步：鼠标右键 => 新建 => 文本文档 => 输入以下内容，并保存。

<marquee>尚硅谷，让天下没有难学的技术！</marquee>

第二步：修改后缀为 .html ，然后双击打开即可。
这里的后缀名，使用 .htm 也可以，但推荐使用更标准的 .html 。

注意：

程序员写的叫源代码，要交给浏览器进行渲染。
借助浏览器看网页的源代码，具体操作：

在网页空白处：鼠标右键 ==> 查看网页源代码

快捷方式

记事本编辑html：右键==>选择打开方式 /
win键>jsb(打开记事本)==>将html文件拖入记事本

2. HTML 标签

标签又称元素，是HTML的基本组成单位。
标签分为：双标签与单标签（绝大多数都是双标签）。
标签名不区分大小写，但推荐小写，因为小写更规范。
双标签：
单标签：
标签之间的关系：并列关系、嵌套关系，可以使用 tab 键进行缩进(四个空格)：

<marquee>
	尚硅谷，让天下没有难学的技术！
    <input>
</marquee>
<input>

3. HTML 标签属性

用于给标签提供附加信息。
可以写在：起始标签或单标签中，形式如下：
有些特殊的属性，没有属性名，只有属性值，例如：

<input disabled>

注意点：

不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写，后面会详细总结）。
属性名、属性值不能乱写，都是W3C规定好的。
属性名、属性值，都不区分大小写，但推荐小写。
双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
标签中不要出现同名属性，否则后写的会失效，例如：<input type="text" type="password">

4. HTML 基本结构

在网页中，如何查看某段结构的具体代码？—点击鼠标右键，选择“检查”。
【检查】和【查看网页源代码】的区别：

【查看网页源代码】看到的是：程序员编写的源代码。
【检查】看到的是：经过浏览器 “处理” 后的源代码。备注：日常开发中，【检查】用的最多。

网页的基本结构如下：

想要呈现在网页中的内容写在 body 标签中。
head 标签中的内容不会出现在网页中。
head 标签中的 title 标签可以指定网页的标题。

代码示例：
<html>
	<head>	
		<title>网页标题</title>
	</head>
	<body>
		......
	</body>
</html>

5. 安装 VSCode

在VScode打开文件：单击（斜体可替换）和双击（不可替换位置永久打开）的区别。

安装中文语言包。
使用 VSCode打开文件夹的两种方式。右键文件夹直接打开或者在软件中选择文件夹打开。
调整字体大小。
设置主题。
安装图标主题： vscode-icons 。

6. 安装 Live Server 插件

可以更加方便的打开网页。
打开网页的方式更贴近项目上线。
代码出现改动后，可以自动刷新。
根据自己的情况，去配置一下 VSCode 的自动保存。（设置自动保存：onWindowChange）

注意1：务必使用VSCode打开的是文件夹，否则 Live Server插件无法正常工作！
注意2：打开的网页必须是标准的HTML结构，否则无法自动刷新！

7. HTML 注释

在VScode快捷键注释ctrl+/，注意只要光标放在这一行就可以。多行注释，选中多行按快捷键。

注释：<--! 我是注释 -->

8. HTML 文档声明

作用：告诉浏览器当前网页的版本。
写法：<!DOCTYPE html>
旧写法：要依网页所用的HTML版本而定，写法有很多。
新写法：一切都变得简单了！W3C 推荐使用 HTML 5 的写法。
注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。

9. HTML 字符编码

计算机对数据的操作：
存储时，对数据进行：编码。
读取时，对数据进行：解码。
编码、解码，会遵循一定的规范 —— 字符集。
字符集有很多中，常见的有（了解）：

ASCII ：大写字母、小写字母、数字、一些符号，共计128个。
ISO 8859-1 ：在 ASCII 基础上，扩充了一些希腊字符等，共计是256个。
GB2312 ：继续扩充，收录了 6763 个常用汉字、682个字符。
GBK ：收录了的汉字和符号达到 20000+ ，支持繁体中文。
UTF-8 ：包含世界上所有语言的：所有文字与符号。—— 很常用。

使用原则是怎样的？
原则1：存储时，务必采用合适的字符编码。
否则：无法存储，数据会丢失！
原则2：存储时采用哪种方式编码，读取时就采用哪种方式解码。
否则：数据错乱（乱码）！
总结：
平时编写代码时，统一采用 UTF-8 编码（最稳妥）。
为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指定字符编码。

<head>
<meta charset="UTF-8"/>
</head>

10. HTML 设置语言

主要作用：
让浏览器显示对应的翻译提示。
有利于搜索引擎优化。
具体写法：<html lang="zh-CN">
扩展知识： lang 属性的编写规则（作为一个课外扩展知识，了解即可）。
第一种写法（语言-国家/地区），例如：
zh-CN ：中文-中国大陆（简体中文）
zh-TW ：中文-中国台湾（繁体中文）
zh ：中文
en-US ：英语-美国
en-GB ：英语-英国

11. HTML标准结构

HTML标准结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
 		<title>我是一个标题</title>
	</head>
	<body>
	</body>
</html>

输入英文 ! ，随后回车即可快速生成标准结构。
配置 VScode 的内置插件 emmet ，可以对生成结构的属性进行定制。即lang=“zh-CN”。
在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标。注意存放的位置是与文件夹同级别的目录下。

12. 标题标签

1 标题介绍与应用
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
生成h1~h6快捷键：h$*6
2 标题标签位置摆放
在标签中添加属性：
默认居左

align="left|center |right"

蒋幸若

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML4入门

全称：HyperText Markup Language（超文本标记语言）。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。标记：文本要变成超文本，就需要用到各种标记符号。语言：每一个标记的写法、读音、使用规则，组成了一个标记语言。
复制链接

扫一扫