HTML 基础
浏览器内核
- 渲染引擎
- JS引擎（现在基本不常用）
- 浏览器内核主要有四个：
- Trident （IE内核）
- Gecko（Firefox火狐内核）：开源
- Webkit (safari苹果内核)
- Blink（chrome谷歌内核）：其实是Webkit的分支
Web标准
- 由W3C与其他标准化组织制定的一系列标准
- 结构标准：用来进行分类；分为XML和XHTML两部分
- 表现（样式）标准：外观样式；以css为主
- 行为标注：网页模型定义及交互的编写；主要有DOM和ECMAScript
HTML初始
HTML骨架格式
<html> <head> <title>Document</title> </head> <body> </body> </html>
标签分类
- 双标签：<标签名> </标签名>；如上所示HTML骨架格式中都是双标签格式
- 单标签：<标签名/>； 如<br/>换行符
标签关系
- 嵌套标签
- 并列标签
文档类型
- <!DOCTYPE html>（HTML5的文档类型格式）
字符集
- <meta charset="UTF-8">（HTML5的字符集格式）
HTML标签的语义化
- 指标签的含义
HTML常用标签分类
- 排版标签：主要和css搭配使用
- 标题标签：h1 h2 h3 h4 h5 h6
- 段落标签：p
- 水平线标签：hr
- 换行标签：br
- div、span标签：没有语义
- 图像标签：img
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 标题标签：h1|h2|h3|h4|h5|h6 --> <h1>不想做秃头少女！！！</h1> <h2>不想做秃头少女！！！</h2> <h3>不想做秃头少女！！！</h3> <h4>不想做秃头少女！！！</h4> <h5>不想做秃头少女！！！</h5> <h6>不想做秃头少女！！！</h6> <!-- 段落标签:p --> <p>段落标签，用来对文字进行分段</p> <!-- 水平线标签：horizontal 单标签 hr --> <hr/> <!-- 换行标签:br 单标签 --> <br/> <!-- 图像标签：img 单标签 --> <!-- alt 与 title 的区别： 1、alt：当图片无法显示是，会被alt中的文字所替换 2、title：当鼠标悬停在图片上时，显示title中的文字 --> <img src="图片路径" alt="这是一张图片" title="哈哈哈"/> </body> </html>
页面展示如下
标签属性
- width
- height
- 、、、
链接标签 | 锚点定位 | base标签
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 链接标签： 1、必须有 href 属性；并且 href 中存放的是链接地址url 2、链接地址必须以 http：// 或 https：// 开头 3、内部链接只需要在 href 中写入页面名称即可：如 demo.html ；后缀名 .html 必须有 --> <a href="https://www.baidu.com/">百度</a><br><br> <!-- 锚点定位： 1、也是 a 标签；与链接标签不同的是 href 属性中的内容； href = " # 所要定位的标签中id的内容 " 2、需要定位的标签中 id 属性格式：id = " 所要定位的标签中id的内容 " --> <a href="#baidu">百度</a><br><br> <a href="#chrome">谷歌</a><br><br> <a href="#web">新浪微博</a><br><br> <h3>百度简介</h3> <p>全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p> <h3>谷歌简介</h3> <p>双核高速浏览器_双核智能浏览器免费下载!纯净无捆绑,拒绝卡顿,智能双核,秒开网页,双核高速浏览器_由软件管家提供下载,快速更安全!</p> <h3 id="web">新浪微博简介</h3> <p>随时随地发现新鲜事!微博带你欣赏世界上每一个精彩瞬间,了解每一个幕后故事。分享你想表达的,让全世界都能听到你的心声!</p> <!-- base标签：target 1、target = "_blank" ：以新页面打开所要链接的页面，不覆盖原有页面 2、target = "_self" ：覆盖原有页面打开所要链接的页面 3、当链接页面过多时，可以使用 base 标签一次性将所有链接界面的 target 属性设置为想要的值 --> <base target = "_blank"/> <a href="https://www.baidu.com/" target="_self">百度</a><br><br> <a href="https://www.google.cn/" target="_blank">谷歌</a><br><br> <a href="https://weibo.com/">新浪微博</a><br><br> <a href="https://www.zhihu.com/signin?next=%2F">知乎</a><br><br> </body> </html>
特殊字符
-  ：空格符
- <：<
- >：>
- 、、、
相对路径
- 同级路径：img.pg
- 下一级路径：images/img.jpg
- 上一级路径：../img.jpg
- 绝对路径：
- 本地：右键-属性 获取图片或文件的句绝对路径（不推荐使用）
- 浏览器：在浏览器中复制图片等的路径
列表标签
- 无序列表：没有顺序级别之分，是并列的
<ul> <li>并列</li> <li>并列</li> </ul>
#注意：
1、<ul>标签中只能放<li>标签！
2、<li>标签中可以容纳所有元素
3、无序列表有其自己特有的属性样式：
- 并列
- 并列
- 有序列表：按照一定的顺序排列定义
<ol> <li>父母</li> <li>孩子</li> </ol>
#同无序列表一样，有序列表的特有样式如下：
- 父母
- 孩子
- 自定义列表
<dl> <dt>定义标题</dt> <dd>对所定义的标题进行描述、解释</dd> </dl>
#一般网站底部描述可用
