初步认识网页
1.浏览器作为网页的载体，是一个能展示网页的平台。其中主要的浏览器 火狐 、Edge、safari、谷歌、opera 等。其中谷歌的市场份额最大，毕竟是最牛逼的公司。
常见浏览器内核
1.组成部分： 渲染引擎 + JS引擎（渲染 DOM 和解析JS）
2.常见类型：Trident （IE内核）、Gecko（FireFox内核，开源的）、webkit（Safari）、Blink（谷歌内核，同源于webkit）、Presto（Opera内核，已抛弃，已使用Blink内核）。可以看出来每一个浏览器产商都有自己内核。
Web标准构成
Web标准构成。实际上是程序员们为了避免麻烦，大家一起约定的一个规范。（到底听谁的呢，有一个组织叫做W3C，专门做技术开源，统一规范，都听它的。）根据网页的特点，标准又可分为：结构标准、样式标准以及行为标准。
1.结构标准 （HTML/XML）：结构可以理解为，对展示内容进行归类和整理。
2.样式标准（CSS）：设置网页的排版、大小、颜色等等。
3.行为标准（DOM和ECMAScript）：动态操作HTML以及进行后台的数据交互。
HTML初步认识
HTML 全称是 Hyper Text Markup Language，译为超文本标记语言 。逐个字理解一下
1.超 ：超的含义其实就是可以进行页面跳转。（通过<a></a>标签来实现）
2.文本：网页最开始的目的就是用来展示文本的。
3.标记：通过标记<>来实现各种功能。如 <a></a>实现网页跳转
4.语言：有一定的语法规范。
HTML骨架
这是页面的标准格式，约定的规范。（文件名以.html结尾）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>头铁日记</title>
</head>
<body>
strong铁头娃strong
铁头娃
<strong>铁头娃</strong>
</body>
</html>
<!DOCTYPE html> ，文档类型为HTML5的版本。
html标签，网页的跟标签。
head标签，头标签，用于存放 title meta style script link 等标签。
<meta charset="utf-8"> 设置网页编码，告知浏览器文字编码， utf-8世界通用字符集。
title标签，网页的名字。 （浏览器中网页的名字）
body标签，网页的主体。
虽然，html在各地方写，不会报错，但上述一种规范。方便管理HTML。
标签分类
在网页中，带有"<>" 符号的元素被称为标签。 “<>”标识某种功能。（可以理解为关键字，用来区分内容和功能。）。HTML中分为单标签和双标签
1.双标签： 有开头有结尾
<body> </body>标签中有显示内容
2.单标签： 功能标签，没有内容，因此，也不需要有结尾 路<br/> <hr/>
标签关系
兄弟关系和父子关系(用树的数据结构去理解。
1.比如
<head></head> <body></body>为兄弟关系
2.比如<head><title></title></head>为父子关系
开发工具
Dreamweaver、sublime、vscode 、webstorm
字符集
有很多老版本的系统，可能会存在字符集的问题。你只需要保证 各个地方用到的都是utf-8的形式即可。
HTML的标签语义化
1.便于阅读，这是显而易见的，标示标签的作用。（而不是无脑的使用div来进行布局设置。）
2.便于搜索啦，遵守规范的网页，更利于网络爬虫更好的解析。更利于搜索引擎优化
3.原则就是：先确定HTML，再设置合适的CSS
HTML的常用标签
1.标题 ，根据重要性依次递减 h1~h6 （<h1></h1>）
2.段落 paragraph ，<p></p> 给文字换行，上下有换行。
3.<hr/> 水平线标签
4.换行标签 ，网页本身是不会识别回车的。且只能识别一个空格符。（要注意 <br/> 和<p></p>都能达到换行的效果，但后者的间距更宽一些，切是前后换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 </title>
</head>
<body>
1.测试
2.测试
3.测试
<br/>
1.测试
2.测试
3.测试
</body>
</html>
5.盒布局标签 div （division 分割的缩写）span（跨度 范围） div 会进行前后强制换行。
div的使用
<div>测试</div>
span的使用
<span>
测试
</span>
image.png
6.文本格式化标签 加粗 strong /b、斜体em/i、删除线del/s、下划线 ins/u 前者有强调的含义，后者仅能实现效果(对应单词 strong emphasize delete insert)
标签属性
1.标签可以有多个属性，以空格隔开，且属性必须位于标签中 。 <标签名 属性1="值" 属性2="值">内容</标签名>
2.所有的属性都有默认值，如果不设置，则取默认值。（不要在标签上设置，样式，不好调控。）
图像标签
<img src = "路径" alt="但图片不存在时，给出的提示信息。" title="鼠标悬停时，给出的提示信息。"/>
width height border 这些属性其实都是用来设置css的。（可能是考虑到方便，看到这个就想到了有些css功能的标签，比如 strong 标签。也就是说，HTML5考虑到了一些特殊情况提供了更简洁的写法。比如直接设置with属性就可不通过style属性设置witdh了。再比如通过strong标签就可以不用设置 font-weight的样式了。）
链接标签
anchor <a href="目标地址" target="跳转方式">百度</a>
1.目标地址，可以是内部地址，也可以是外部地址。
2.target 是跳转的方式（_blank【新窗口打开】 、_self 【默认值，在本窗口打开】）
3.锚点跳转，href="#html_id" 跳转到某个元素上
<a href="http://www.baidu.com" target="_blank">百度</a>
base标签
设置该html页面中所有的默认链接跳转方式。（逆向思考，少写代码）
特殊字符
测试 网页中 无论输入多少个空白符都只会显示一个空格 。因此，若需要输入多个空格需要借助转移字符
尖括号（<>会被HTML解析成标签，如果需要显示其文本的话 需要借助 < >）
记住尖括号以及空格即可。
image.png
注释标签
注释是给自己看的，便于自己回忆业务逻辑。
注释也可以帮助团队中的其他人，查看。
<!-- div的使用 -->
相对路径
1.图像文件存储于HTML的同一文件夹，则只需要输入 <img src="demo.html"/>
2.图像文件存储于HTML的同一文件夹的子目录下，<img src = "test/demo.html"/>
3.图像文件存储于HTML的同一文件夹的父目录下, < img src="../demo.html"/>
绝对路径
1.要么就是本地的某个磁盘下的文件
2.或则是完整的网络地址 https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=e88d0d55e6f81a4c2232ebcbe72b6029/a2cc7cd98d1001e9ddbfab2eb50e7bec54e79714.jpg
列表
1.有序列表<ol><li></li></ol> order list
2.无序列表<ul><li></li></ul> unordered list
3.自定义列表 dl definition list 、 definition term、 definition description
<dl>
<dt>北京</dt>
<dd>昌平</dd>
<dd>通州</dd>
</dl>
<dl>
<dt>喜剧大牌</dt>
<dd>周星驰</dd>
<dd>王宝强</dd>
</dl>
总结
了解web->网页需要浏览器显示，什么是浏览器->认识浏览器->为什么各个浏览器显示的不一样 ->认识浏览器内核->如何让同一个网页大致显示一样？->W3C统一标准,开始认识web标签->这么多标签如何，进行快速开发->认识常用工具，开始开发->认识了文档类型(HTML文件的第一行)、常用字符集(utf-8)，常用标签、相对路径。
网友评论