HTML页面结构与常见标签笔记

HTML、XML、XHTML的区别

HTML，超文本标记语言，语法较为松散、不严格，Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们，HTML的作用就是用来显示数据，重点在数据的外观。
XML，可扩展标记语言，其标签没有被预定义，需自行定义标签，被设计用来传输存储数据，重点在于数据的内容。
XHTML，可扩展超文本标记语言，基于XML，更严格、更纯净的HTML.

HTML语义化

什么是语义化
语义的意思是语言中单词和短语的含义，语义元素就是具有意义的元素如<h1></h1>表示标题在网页上显示字体加粗，字号变大，搜索引擎搜索得到，非语义元素包括<div> <span>它们不会对内容做任何操作。使一种编写HTML的方式。
语义化的意义
之前使用HTML4，开发人员使用自己的id / class名称来设计元素：标题，顶部，底部，页脚，菜单，导航，主，容器，内容，文章，侧栏，topnav等，这样使得搜索引擎不能识别正确的网页内容，使用新的HTML5元素<header> <footer> <nav> <section> <article>,便于机器的识别。在我们选择好合适标签后我们就可以使代码结构更合理这样，便于搜索引擎搜索，有助于爬虫抓取有效信息；支持更多类型的机器识别；页面更整洁便于开发者的开发与维护。

内容与样式分离原则

一个网页包含内容（html）样式（CSS），在建立一个新的网页过程中我们要将内容与样式分开写。首先在写html时要注重语义化和结构，不管样式，完成之后在去css写样式。HTML内不予许出现属性样式，尽量不出现行内样式。
这样做的好处是，浏览器加载速度变快（大部分代码写在css中）；便于更改（样式更改直接在css中改，如不分离就需要在html中一项一项改，工作效率降低）

常见的meta标签

定义与用法
<meta>标签可以提供与页面有关的元信息，比如针对搜索引擎和刷新频率的描述和关键词，位于文档头部<head>标签内部。
常见的<meta>标签

name属性
<meta name="author" content="王海涛"> 标注网页作者
<meta name="generator" content="信息参数">制作软件
<meta name="keywords" content="LOL，LOL战略，">
告诉搜索引擎网页关键词是什么
<meta name="description" content="LOL当前版本强势英雄和操作">
告诉搜索引擎网页主要内容
<meta name="viewport" content="width=device-width,initial-scale=1">用于设计移动端网页
http-equiv属性
<meta http-equiv="content-Type" content="text/html; charset=gb2312">网站编码是简体中文
<meta http-equiv="Content-Language" content="zh-cn"/>
网页显示语言的设定
<meta http-equiv="Refresh" content="2;URL=网页地址">
2s后跳转到新地址
<meta http-equiv="X-UA-Compatible content="IE=edge,chrome=1">指定IE和Chrome使用最新版本渲染当前页面

文档声明的作用?严格模式和混杂模式指什么?`<!doctype html>` 的作用?

文档声明是告诉浏览器该用哪种规范来对文档进行解析
严格模式是浏览器严格遵循W3C标准解析，按照所声明的方式去渲染，混杂模式是比较宽松的向后兼容的模式，浏览器按照自己的渲染方式，通常模拟老式浏览器的行为，防止老站点无法工作；混杂模式服务于旧式规则，而严格模式服务于标准规则。
告诉浏览器按照HTML5的标准去解析这篇文档

浏览器乱码的原因，如何解决

产生乱码原因是文档保存的编码格式与浏览器的解码格式不同造成的。
首先要清楚自己文件的编码格式比如gbk，在html 的 <head>里添加<meta charset="gbk">

常见的浏览器及其内核

浏览器	内核
Internet Explore 6-8	Trident
Firefox 3.5	Gecko
Chrome 4/Safari	WebKit
Safari	WebKit
Opera 10	Presto

很多国内浏览器，以及很多双核浏览器的其中“一核”都是Trident

列出常见的HTML标签及应用场景

常见的标签如下及效果图

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <title>这是文档标题</title>
</head>
<body>
   <h1>这是一级标题</h1>
   <h2>这是二级标题</h2>
   <p>这是段落</p>
   ![网页出错图片不显示时出现此段文字](https://img.haomeiwen.com/i2170795/931ec9269be5572c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   <p>上面是插入图片时用的元素</p>
   <dl>
   <dt>英雄名字：</dt>
   <dd>迅捷斥候提莫</dd>
   <dt>技能：</dt>
   <dd>全图嘲讽</dd>
   <dt>操作技巧：</dt>
   <dd>ctrl+4</dd>
   </dl>
   <a href="http://http://lol.qq.com/">这是个链接</a>
   <hr>
   hr是分割线<br/>
   这个能换行<br/>
   你看可以吧<br/>
   <ul>
       <li>ul是无序列表</li>
       <li>li是列表项</li>
       <ol>
           <li>我们可以加个有序列表ol</li>
           <li>两种列表项都是li</li>
       </ol>
   </ul>
   <strong>加黑强调内容，便于搜索到</strong>
   <em>斜体强调内容，一般用于引用新术语</em>
   <b>仅仅是加粗</b>
   <i>仅仅是斜体</i>
   <div>
       div元素<br/>
       能够让这几行<br/>
       形成一个整体<br/>
       便于调整<br/>
       本身没有效果<br/>
   </div>
   <div style="margin-left: 100px"> 
       div元素<br/>
       能够让这几行<br/>
       形成一个整体<br/>
       便于调整<br/>
       整体离左边100px<br/>
   </div>
   <span>这个用途和div一样</span>
   <span>但div是块元素span是行内元素</span>
   <span style="margin-left: 100px">常见的块元素h1,p；常见的行内元素img,a,b</span>
   <hr>
   <p>
   此外还有!DOCTYPE html（声明），html（包含除声明以外所有标签）,head（定义文档头部包含所有头部标签）,mate（提供页面元信息）,title（文档标题）,body（文档内容）等标签
   </p>
</body>
</html>