HTML
两步完成一个网页程序
第一步：使用记事本，编写代码
在E盘下保存路径E:/itbaizhan/…, 文件名Welcome.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello,我的第一个网页
</body>
</html>
注意事项
01.文件后缀名以.html结尾
02.在编写代码的过程中，<>必须是英文状态下编写
推荐选择谷歌浏览器
我们推荐谷歌浏览器，有两点原因：
简洁大方，打开响应速度快
开发者调试工具
我们推荐选择VSCode
打开速度快使用方便
如何安装VSCode中文语言包
扩展→搜索Chinese →点击安装
VSCode打开文件夹与创建文件
01选择文件夹
02拖拽文件夹
生成浏览器文件.html的快捷方式
!+回车
VSCode常用快捷键列表
代码格式化：
Shift+Alt+F
向上或向下移动一行：Alt+Up 或 Alt+Down
快速复制一行代码：Shift+Alt+Up 或 Shift+Alt+Down快速保存：Ctrl + S
快速查找：Ctrl + F
快速替换：Ctrl + H
. VSCode快速复制一行代码的快捷键是：
Shift+Alt+Up 或 Shift+Alt+Down
2. VSCode快速移动一行代码快捷键:
Alt+Up 或 Alt+Down
HTML5介绍
HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾
HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如:
标签有两种表现形式：
双标签，例如：单标签，例如：
HTML5的DOCTYPE声明
DOCTYPE是document type (文档类型) 的缩写。
是H5的声明位于文档的最前面，处于标签之前。
他是网页必备的组成部分，避免浏览器的怪异模式。
HTML5基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello,我的第一个网页
</body>
</html>
html标签
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。
head标签
head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读
者。
body标签
body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
它会直接在页面中显示出来，也就是用户可以直观看到的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
我会显示在浏览器
</body>
</html>
title标签
可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个页面</title>
</head>
<body>
我会显示在浏览器
</body>
</html>
meta标签<br />meta标签用来描述一个HTML网页文档的属性，关键词等，例如：<br />charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式，通常使用utf-8。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>itbaizhan</title>
</head>
<body>
</body>
</html>
标题介绍与应用
标题（Heading）是通过-标签进行定义的。定义最大的标题定义最小的标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
生成h1~h6快捷键：h$*6
VSCode插件
快速打开浏览器
扩展 -> 搜索open in browser -> 点击安装
正确使用标题
请确保将 HTML 标题标签只用于标题。
不要仅仅是为了生成粗体或大号的文本而使用标题。正确使用标题有益于SEO
应该将< h1>用作主标题（最重要的），其后是的），再其次是，以此类推。
标签之段落、换行、水平线
标签之段落
段落是通过标签定义的
<p>这是一个段落 </p>
<p>这是另一个段落</p>
换行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使
用
元素是一个空的 HTML 元素。
水平线
标签在 HTML 页面中创建水平线
属性：
color：设置水平线的颜色
width：设置水平线的宽度
size：设置水平线的高度
align：设置水平线的对齐方式（默认居中），可取值left|right
标签之图片
网站中最多的元素
网站中最多的元素毋庸置疑，一定是图片标签定义 HTML 页面中的图像
src=““alt=”“title=”“width=”“height=””>
注意事项
是单标签，不需要进行闭合操作
属性：
src：路径（图片地址与名字）
alt：规定图像的替代文本
width：规定图像的宽度
height：规定图像的高度
title：鼠标悬停在图片上给予提示
绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
E:\itbaizhanCode\1.jpg
src=“E:\itbaizhanCode\1.jpg”>
相对路径
两者相对关系，两者在同⼀路径下可以直接访问
子级关系: /父级关系: …/
同级关系:
./（可以省略）
网络路径
具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png
标签之超文本链接
超链接描述
HTML使用标签 来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档.
链接文本
超链接属性
在标签中使用了href属性来描述链接的地址
默认情况下，链接将以，以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
特别提示
后期我们会通过CSS样式修改掉这些效果
超链接表现
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
列表标签之有序列表
有序列表
有序列表是一列项目，列表项目使用数字进行标记。有序列表始于标签。每个列表项始于标签。
<ol>
<li>尚学堂</li>
<li>百战程序员</li>
</ol>
type属性
-
的属性type 拥有的选项
1 表示列表项目用数字标号（1,2,3…）
a 表示列表项目用小写字母标号（a,b,c…）
A 表示列表项目用大写字母标号（A,B,C…）
i 表示列表项目用小写罗马数字标号（i,ii,iii…）I 表示列表项目用大写罗马数字标号（I,II,III…）
有序列表嵌套
列表是可以进行嵌套的。
<ol> <li>尚学堂</li>
<li>
<ol>
<li>阿里</li>
<li>京东</li>
</ol>
</li>
<li>百战程序员</li>
</ol>
列表标签之无序列表
无序列表实现
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于
- 标签。每个列表项始于
- 标签。
<ul>
<li>尚学堂</li>
<li>百战程序员</li>
</ul>
type属性
的属性type 拥有的选项
disc 默认实心圆circle 空心圆
square 小方块none 不显示
无序列表嵌套
列表是可以进行嵌套的
<ul>
<li>尚学堂</li>
<li>
<ul>
<li>阿里</li>
</ul>
</li>
<li>
百战程序员</li>
</ul>
常见应用场景
无序的列表效果导航效果
导航效果
<ul>
<li>Xiaomi手机</li>
<li>Redmi 红米</li>
<li>电视</li>
<li>笔记本</li>
</ul>
标签之表格
表格展示效果
表格在数据展示方面非常简单，并且表现优秀.
表格组成与特点
行、列、单元格
单元格特点：同行等高、同列等宽。
表格标签:
表格：行：
单元格(列)：
<table>
<tr>
<td>尚学堂</td>
<td>百战程序员</td>
</tr>
<tr>
<td>阿里</td>
<td>京东</td>
</tr>
</table>
快捷键
快速生成表格结构：table>tr*2>td{单元格}
表格属性
border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度
517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
