HTML 第一天
本章知识点
1.1什么是HTML
HTML的全称为超文本标记语言，是一种标记语言。
它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分
散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动
画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息
媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在
不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
文本:我们写的一些文字就称之为 文本
超文本: 不仅仅只有文字 还包括 图形、动画、声音、表格、链接等
超文本标记语言:在这里我们可以简单理解为通过使用一些特殊的标记 能将超文本的信息展示出来
也就是说 学习HTML 就是学 什么样的标记 会有什么样的效果
1.2 开发工具
记事本【 若干年前 前端面试 给你个记事本 写网页 】
像一些早期的WS 什么是WS 呢？ 就是 WebStorm
DW ： Dreamweaver 有点不像开发工具了 而是像设计工具
HBuirdX ： 他这个是HBuild 第十代版本
VSCODE： Visual Studio Code 这个目前是前端最新的开发工具
1.3HBulid创建项目
创建流程 ：
文件 -----》 新建 --------》 项目
选择普通项目：
项目名： 见名知意 不要有中文
项目位置：找个合适的位置 存放我们的代码 都是我们美好的回忆
选择 基本项目包括 index.html css js img 文件夹
基本项目结构 ：
CSS 文件夹 : 存放css 文件 【css 称之为层叠样式表 就是美化网页的 是一种语言 我们后面会讲 】
js文件夹 ： 存放js文件【 js 称之为 浏览器脚本语言 给网页添加动态效果】
img 文件夹： 存放资源文件【网页中的素材 图片 音频 视频等内容】
index.html： 网页文件 用来写代码的
1.4HTML基本结构
<!--ctrl + / 能快速生成注释 注释 是非代码部 它对代码起到解释说明作用增强代码的可读性我们
上课的很多代码 都会通过注释给大家标注 讲解 -->
<!-- 文档声明告诉浏觉器 当前是一个网页 并且使用的是 HTML第五代语法 H5 h5 从狭义上去说
是HTML 的第五代版本 从广义上去说是HTML+CSS+JS 达到了某一个版本到了他们三个统称为H5 -->
<!DOCTYPE html>
<!--
标签的分类：html中标签分为两类
A 单标签 <开始标签 />
B 双标签 <开始标签> 内容 </结束标签>
html标签 称之为 根标签 限定我们写代码的范围 必须在根标签中
html是一种 弱语言 语法约束不强制 java是一种强语言
-->
<html>
<!-- 头部标签 用来配置网页中的各种基本信息
例如： 编码方式 图标 关键词 开发工具 标题
-->
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- body 身体标签 我们需要展示到网页中的内容 写到body里面去 -->
<body>
</body>
</html>
1.5H标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>你好 世界</h1>
<h2>你好 中国</h2>
<h3>你好 河南</h3>
<h4>你好 郑州</h4>
<h5>你好 郑大</h5>
<h6>你好 哈哈哈</h6>
</body>
</html>
敲完HTML代码注意事项： 1.直接写标签名字 tab会补全或智能补全
2.代码写完随手保存 ctrl+s
3.运行代码首推火狐浏览器 或者谷歌浏览器 只运行一次就行
1.6段落P标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1> 满江红</h1>
<h3>岳飞.宋</h3>
<p>
怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。
</p>
<p>
三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
</p>
<p>
靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。
</p>
<p>
壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙
</p>
</body>
</html>
h标签 P标签 内容都会换行 因为他们是块级标签
并且html中所有的 空格 换行 都需要使用块级标签才行
比如说
你好<br />世界
问题：h系列 p标签 br都能换行 将来我们使用哪一个呢？
取决于 需求 h和p标签 不仅换行 还有行间距
1.7 超链接a标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1> 满江红</h1>
<h3> <a href="https://baike.baidu.com/link?url=ZAl9LNdzl5PmIH4Pl8ZPb86qmr2vyAFCwxHkAUVQhsPOl8OKMvouKrX3sMfjlo0L1PHLKgeuHLtO7DtqbJEVbhM3_c-aOwTbb_pvLzkcE3C">岳飞</a>.宋</h3>
<p>
怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。
</p>
<p>
三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
</p>
<p>
靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。
</p>
<p>
壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙
</p>
</body>
</html>
a标签是超链接标签 其中href 是a 标签的属性
<开始标签></结束标签>代表点击a标签跳到哪里去【路径地址】
路径：
绝对路径：http https ftp file 开头的路径
相对路径：参照物 -》 当前位置
/ 代表路径分隔符
1.8 图像标签img
<img src="img/11.png " width="150" height="360" alt="haha">
width 宽度
height 高度 可以写单位也可以不写单位
图像超链接
锚点 目前再开开发中不常用 一般都是js去实现
1.9 table标签的基本使用
table 单词的意思 代表 表格 类似于Excel单元格一样
可以理解成 我们通过table标签 在浏览器中实现 Excel单元格效果
table 表格
tr 行
td 列（一般我们称之为单元格）
table>tr*8>td{你好 世界 $}*5 $代表自动排序
2.0 table标签的常用属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
</head>
<body>
<table align="center" border="px" bordercolor="yellow" bgcolor="green"
width="1000"height="500 " cel1spacing="0" cellpadding="0"
background="img/redis.jpg">
<tr align="right" valign="bottom">td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<!-- border 边框宽度 bordercolor 边框色 bgcolor 背景颜色 width 宽 height 高cel1spacing 边框间距ce11padding 内填充 background 背景图片
align 水平对齐方式 如果写到table里面 代表table在页面的水平位器如果写到 tr或者td中代表内容在单元格中的水平位器
left 左 center 中right 右
top 上 middle 中 bottom 下valign 垂直对齐方式 -->
</body>
</html>
2.1 table标签的单元格合并
水平合并 colspan
垂直合并 rowspan
第一 谁要合并
第二 水平还是垂直
第三一打几
第四 干掉多余的
2.2 table标签实际应用
练习一： 数最多的 数完在合并
1 创建
table>tr*6>td{$}*3
2 合并
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
