标签
- 标签：又称元素，是HTML的基本组成单位双标签（绝大多数都是双标签）：<标签名>标签体</标签名>第一个标签叫起始标签，第二个标签叫结束标签例：<marquee>尚硅谷，让天下没有难学的技术！</marquee>单标签：<标签名/>/可以省略例：<input>
- 标签名不区分大小写，但推荐小写，因为小写更规范
- 标签之间的关系：并列关系、嵌套关系，可以使用 tab 键进行缩进
- 1
2
3
4
5
<marquee>
尚硅谷，让天下没有难学的技术！
<input>
</marquee>
<input>
标签属性
- 用于给标签提供附加信息
- 可以写在起始标签或单标签中，形式如下：<标签名 属性名="属性值" 属性名="属性值">
- 1
2
<marquee loop="1" bgcolor="orange">尚硅谷，让天下没有难学的技术！</marquee>
<input type="password"> - 有些特殊的属性，没有属性名，只有属性值，如：<input disabled>
不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写）属性名、属性值不能乱写，都是W3C规定好的属性名、属性值，都不区分大小写，但推荐小写双引号，也可以写成单引号，甚至不写，但推荐写双引号标签中不要出现同名属性，否则后写的会失效，例如：<input type="text" type="password">
基本结构
- 想要呈现在网页中的内容写在body标签中
- head标签中的内容不会出现在网页中
- head标签中的title标签可以指定网页的标题
- 1
2
3
4
5
6
7
8
<html>
<head>
<title>网页标题</title>
</head>
<body>
......
</body>
</html>
注释
- 特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
- 作用：对代码进行解释和说明
- 写法
- 1
2
3
4
<!-- 下面的文字只能滚动一次 -->
<marquee loop="1">尚硅谷</marquee>
<!-- 下面的文字可以无限滚动 -->
<marquee>尚硅谷123</marquee> - 注释不可以嵌套
文档声明
- 作用：告诉浏览器当前网页的版本
- 写法
- 旧写法：要依网页所用的HTML版本而定，写法有很多参考：W3C QA - 可在 Web 文档中使用的 Doctype 声明的推荐列表
- 新写法：W3C 推荐使用 HTML 5 的写法
- 1
2
3
4
5
<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>
- 文档声明必须在网页的第一行，且在html标签的外侧
字符编码
- 计算机对数据的操作存储时，对数据进行：编码读取时，对数据进行：解码
- 编码、解码，会遵循一定的规范 —— 字符集
- 常见的字符集ASCII：大写字母、小写字母、数字、一些符号，共计128个ISO 8859-1：在 ASCII 基础上，扩充了一些希腊字符等，共计是256个GB2312：继续扩充，收录了 6763 个常用汉字、682个字符GBK：收录了的汉字和符号达到 20000+ ，支持繁体中文UTF-8 ：包含世界上所有文字与符号
- 为了让浏览器在渲染html文件时，不犯错误，可以通过meta标签配合charset属性指定字符编码
- 1
2
3
<head>
<meta charset="UTF-8"/>
</head>
设置语言
- 主要作用让浏览器显示对应的翻译提示有利于搜索引擎优化
- 具体写法：<html lang="zh-CN">
- lang属性的编写规则语言-国家/地区zh-CN ：中文-中国大陆（简体中文）zh-TW ：中文-中国台湾（繁体中文）zh ：中文en-US ：英语-美国en-GB ：英语-英国语言—具体种类（已不推荐使用）zh-Hans ：中文—简体zh-Hant ：中文—繁体W3School 上的说明：《语言代码参考手册》 、《国家/地区代码参考手册》 W3C官网上的说明：《Language tags in HTML》
标准结构
- HTML标准结构如下
- 1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
VSCode 删除行快捷键：Ctrl+Shift+K
- 输入!，随后回车即可快速生成标准结构
- 配置VScode 的内置插件 emmet ，可以对生成结构的属性进行定制
- 在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标
鲁公网安备37020202000738号