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

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

HTML、XML、XHTML的区别

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

HTML语义化

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

内容与样式分离原则

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

常见的meta标签

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

• name属性
  标注网页作者
  制作软件
  
  告诉搜索引擎网页关键词是什么
  
  告诉搜索引擎网页主要内容
  用于设计移动端网页
• http-equiv属性
  网站编码是简体中文
  
  网页显示语言的设定
  
  2s后跳转到新地址
  指定IE和Chrome使用最新版本渲染当前页面

文档声明的作用?严格模式和混杂模式指什么? 的作用?

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

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

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

常见的浏览器及其内核

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

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

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

常见的标签如下及效果图

   
   


   
这是一级标题
   
这是二级标题
   
这是段落
   ![网页出错图片不显示时出现此段文字](http://upload-images.jianshu.io/upload_images/2170795-931ec9269be5572c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   
上面是插入图片时用的元素
   

   
英雄名字：
   
迅捷斥候提莫
   
技能：
   
全图嘲讽
   
操作技巧：
   
ctrl+4
   
   这是个链接
   

   hr是分割线

   这个能换行

   你看可以吧

   

       
ul是无序列表
       
li是列表项
       

           
我们可以加个有序列表ol
           
两种列表项都是li
       
   
   加黑强调内容，便于搜索到
   斜体强调内容，一般用于引用新术语
   仅仅是加粗
   仅仅是斜体
   

       div元素

       能够让这几行

       形成一个整体

       便于调整

       本身没有效果

   
   
 
       div元素

       能够让这几行

       形成一个整体

       便于调整

       整体离左边100px

   
   这个用途和div一样
   但div是块元素span是行内元素
   常见的块元素h1,p；常见的行内元素img,a,b
   

   

   此外还有!DOCTYPE html（声明），html（包含除声明以外所有标签）,head（定义文档头部包含所有头部标签）,mate（提供页面元信息）,title（文档标题）,body（文档内容）等标签
   

这是文档标题.png

ps 不知哪里出了错，只能这样发了。

错误.png

此处代码为

错误 (2).png