这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战
认识HTML-这门Web语言
HTML：超文本标记语言的缩写
宏观角度
通过HTML编写的文件来建立Web页面
然后可以把文件放到服务器上，任何浏览器就可以访问到你的HTML网页
- Web服务器作用
- 就是一个连接到互联网的计算机，等待来自浏览器请求
- 存储HTML文件，图像，声音等文件
浏览器认识知道如何显示HTML，另外甚至可以在手机和其他设备中显示
- HTML告诉浏览器页面的内容和结构
- 浏览器根据内置的默认规则翻译HTML的标记
- 你哈可以通过CSS来增加自己的样式
创建HTML文件
HTML文件都是文本文件-只要能创建纯文本的应用都可以
在使用强大的IDE之前可以使用简单的文本编辑器来了解原理
选择浏览器？
- HTML是行业标准，所有浏览器都会尽可能支持
- 不同浏览器处理页面方式存在细微差别
- 为了测试，至少下载两个不同的浏览器
标记剖析
<h1>....</h1>
- 元素=开始标记+内容+结束标记
- 匹配标记没必要在一行上，浏览器不关系制表，回车，和大多数空格
标记支持属性
- <style type="text/css">...
- 值用双引号括起来
标签学习
<h1>:标记标题
<h2>:标记子标题
<p>:标记段落
<html>:告诉浏览器这个是html文件
<head>: 包含web页面相关信息
<title>:顶部标题
<body>:页面主体
HTML描述了内容的骨架，而CSS进一步表现你的内容
- 在HTML中可以通过标签书写样式
- 不过建议HTML和CSS分开，后面会说
- CSS：层叠样式表的缩写，用来控制HTML样式表现
认识HTML中的HT
HT：超文本
摆脱单个页面束缚，链接到其他页面
超文本引用就是互联网或者你的计算机上一个资源的别称--通常是web页面，也可以是其他资源
ML：标记语言
标签学习
<a>:创建指向另一个页面的链接
- 内容是链接文本
- href属性指定链接的URL或者目标文件
- 可以把一个<img>放到<a>下面，点击图像就会链接
组织你的页面
建议把网页，图片和其他资源放在不同文件夹下面维护，容易管理
即便都是HTML文件，也建议按照业务分文件夹
追求简单可扩展
规划你的链接路径
如果移动了HTML文件，你会发现链接至此的<a>失效了
相对路径
- ..实现上行文件夹
- 最多走到网站根目录
网站文件夹层级太多说明组织过于复杂，建议优化
对于网页只用/，通用的，不像操作系统分隔符有的是\
Web页面建设
写HTML之前
画粗略的草图 - 页面设计的基础
把草图翻译成HTML的蓝图
- 分别研究草图各个区域，细化
- 用html构建模块描述
翻译成真正的HTML
标签学习
<q>:支持文字引用，添加对应样式
- 让页面结构化
- 浏览器知道这个是引用-会去优化
- 当然你也可以通过样式设置来完成
<blockquote>:支持长引用，例如引用一首诗歌
- 浏览器会自动缩进，让其看起来像引用
- 一般是自成一段的引用
- 本身是一个新的段落，而
是嵌入在段落的
<br>:提供换行功能，在希望换行的地方加一个<br>
- 该元素没有任何内容，是一个void元素
- img也是
- 所以可以简写
- br也是一个意思
块元素与内联元素
上述标签区别
<blockquote>是块元素
<q>是内联元素
视觉上
- 块元素好像前后各有一个换行
- 内联元素在文本流总是在行内出现
功能
- 块元素通常用于Web页面的构建模块
- 内联元素标记小段内容
- 设计界面先从大区域到小细节
理解区别有助于后面CSS布局相关内容学习和使用
构建HTML列表
第一步:将每个列表项放在一个<li>元素中
<li>hello</li>
第二步：用ul或ol标签包围列表项
- ol是有序列表
- ul是无序列表
- ol或ul只能包含li元素
可以列表嵌套列表，把一个ul放在一个li下面
嵌套
嵌套在HTML很常用，也是其构造方式
避免标记不匹配的情况
HTML中使用"<" ">"两个字符
直接使用会有问题，因为这是标记的特殊字符
这种情况使用一种字符实体的字符
- 查找对应的缩写来在HTML中输入
- ＞字符缩写是'>';
- ＜字符缩写是'<';
- 例如The element --> The <html> element
- &字符对应的是'&';
- 不要直接写&,除非你是使用字符实体
- 因为用来作为字符实体标志了
- w3cschools上面可以查到，还有一种对应的字符编号也可以使用，作用一样
