前端学习笔记|尚硅谷前端入门html+css|HTML4（一）

视频地址：尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频

---

1 HTML简介

2 HTML初体验

3 HTML标签

3.1 标签简介

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

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

3.2 标签属性

• 可以写在起始标签或单标签中。
• 有些特殊的属性，没有属性名，只有属性值，例如：<input disabled>。
• 属性名、属性值都是W3C规定好的。
• 属性名、属性值都不区分大小写，但推荐小写。
• 双引号也可以写成单引号，甚至不写都行，但还是推荐写双引号。
• 标签中不要出现同名属性，否则后写的会失效，先入为主。

<marquee loop="1" bgcolor="orange">尚硅谷，让天下没有难学的技术！</marquee>
<input type="password">

4 HTML基本结构

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

---

代码编辑器：VSCode，VSCode直接打开网页插件：Live Server。

• 打开的必须是文件夹，否则Live Server插件无法正常工作。
• 打开的网页必须是标准的HTML结构，否则无法自动刷新。

---

5 HTML注释

• 注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。
• 注释不可以嵌套。
• 快捷键：Ctrl + /

<html>
	<head>
		<title>HTML注释</title>
	</head>
	<body>
		<marquee loop="1">
			<!--下面的输入框是可以滚动的，且只能滚动一次-->
			<input type="text">
		</marquee>
		<!--下面的输入框是不可以滚动的-->
		<input type="text">
	</body>
</html>

6 HTML文档声明

• 作用：告诉浏览器当前网页的版本。
• 写法：
• 必须位于网页的第一行，在html标签外侧。

7 HTML字符编码

• 存储读取需采用同种编码。
• 编写代码时统一采用UTF-8最稳妥。
• 可使用meta标签配合charset属性指定字符编码，防止浏览器渲染错误。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML字符编码</title>
	</head>
	<body>
		<input type="text">
	</body>
</html>

8 HTML设置语言

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>HTML设置语言</title>
	</head>
	<body>
		<input type="text">
	</body>
</html>

9 HTML标准结构

• 输入！回车可快速生成标准结构。
• Ctrl+shift+k可删除整行 。
• 设置-扩展-Emmet-Variables可设置默认生成的语言。
• 把favicon.ico放在打开网页的文件夹（第一层）里可配置网页图标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>