HTML初体验

2017-08-16 本文已影响0人饥人谷_bigJiao

HTML初体验

HTML、XML、XHTML有什么区别

HTML
- 超文本标记语言（Hypertext Markup language），是一种用于创建网页的标准标记语言，常与CSS,JavaScript一起用于设计网页、网页应用程序以及移动应用程序的用户界面。为语法较为松散的、不严格的Web语言，HTML是一种标记语言而不是编程语言。
XML
- 可扩展标记语言（Extensible Markup Language），主要用于存储数据和结构，不用来表现或展示数据
XHTML
- 可扩展超文本标记语言（eXtensible HyperText Markup Language，XHTML），基于XML，作用与HTML类似，但语法更严格

HTML语义化

语义化是一种编写HTML的方式，本质上是指在写一个页面的时候，选择合适的标签，使用合理的代码结构。即根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
好处：
- 清晰的页面结构：去掉或样式丢失的时候，也能让页面呈现清晰的结构，增强页面的可读性。
- 支持更多的设备：屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。如果你使用的含语义的标记，屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
- 便于团队开发和维护：在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

怎样理解内容与样式分离的原则

一个网页分为三个部分：HTML——结构，CSS——表现，javascrip——行为。内容也就是html，样式也就是css。所以内容和样式的分离，就是指在网页编码的过程中，要将html和css两大部分分开。
写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化
HTML 内不允许出现属性样式，尽量不要出现行内样式

分离原则的优点
1.浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
2.网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。
3.更好地被搜索引擎收录。基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
4.css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。

有哪些常见的meta标签

meta标签有三个属性，分别是name,http-equiv,charset

常见meta标签

<head>
<meta name="description" content="免费web教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="W3Cschool">
<meta charset="UTF-8">
</head>

标签定义及使用说明
- 元数据（Metadata）是数据的数据信息。
- meta标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
- meta元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
- 元数据可以被浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
示例1

定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

示例2

定义web页面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">

示例3

定义页面作者：
<meta name="author" content="Hege Refsnes">

示例4

每30秒刷新页面：
<meta http-equiv="refresh" content="30">

示例5

屏幕的缩放
<meta name="viewport" content="">

content的几个属性：
    width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是iOS支持；
    height – viewport 的高度 （范围从 223 到 10,000 ）
    user-scalable [yes | no]是否允许缩放
    initial-scale [数值] 初始化比例（范围从 > 0 到 10）
    minimum-scale [数值] 允许缩放的最小比例
    maximum-scale [数值] 允许缩放的最大比例
    target-densitydpi 值有以下（一般推荐设置中等像素密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）
         -- dpi_value 一般是70-400//没英寸像素点的个数
         -- device-dpi设备默认像素密度
         -- high-dpi 高像素密度
         -- medium-dpi 中等像素密度
         -- low-dpi 低像素密度

完整案例:<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">

示例6

 声明文档使用的字符编码 
 <meta charset='utf-8'>

示例7

设置作者姓名及联系方式
<meta name="author" contect="name, xxx@163.com" />

示例8

声明文档兼容模式，指示IE以目前可用的最高模式显示内容
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

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

文档声明的作用

用来声明文档对象模型，用来告诉浏览器应该使用哪种方式来解析渲染页面。

严格模式和混杂模式

严格模式就是使用<!Doctype>标签来显式声明该用哪种方式来渲染页面
混杂模式即允许浏览器使用自己的方式来渲染页面。

<!Doctype html> 的作用

<!Doctype html>即就是声明使用HTML5来解析渲染页面

浏览器乱码的原因是什么？如何解决

浏览器乱码原因
- 保存的文档的编码格式和浏览器解析时的解码格式不匹配导致的。
- 乱码一般是英文以外的字符才会出现。
如何解决
- 首先，在文件保存的时候你自己要清楚是用哪种编码方式保存的，然后在html文档中加入<meta charset="">标签，声明页面编码方式

常见的浏览器有哪些，什么内核

常见浏览器
- chrome，Firefox，ie，360，Safari、opera等
内核
1. Trident(IE内核)：IE浏览器，很多国内浏览器，以及很多双核浏览器的其中“一核”都是Trident。
2. Gecko：FireFox
3. Webkit：Chrome，Safari
4. Presto：Opera

列出常见的标签，并简单介绍这些标签用在什么场景

常见标签	场景
`<h1>...</h1>`	表示标题,h1到h6分别代表六级标题
`<p>...</p>`	段落，表示大段文字
`<a>...</a>`	链接，链接到下一个地址，有`href`, `target`,`title`三个属性,分别表示链地址（或#锚点，#about，/路径），页面打开方式，网页标题
`<img>`	展示图片，属性`src`：图片地址，属性`alt`:描述图片的注释.ps:只闭合标签，最后不需要 /
`<div>...</div>`	表示一大块，用于给页面划分区域，让结构更清晰。属性：`id`,表示给一个元素取名；`class`:表示给一类元素取名
`<ul>...</ul>`	无序列表，用于表示并列的内容，`ul`的直接子元素是`li`,可以嵌套
`<ol>...</ol>`	有序列表
`<li>...</li>`	列表项，与`ul`,`ol`结合使用
`<dl>.</dl>,<dt>.</dt>,<dd>.</dd>`	用于展示一系列 “标题:内容... ”的场景
`<button>点我</button>`	按钮
`<strong>.</strong> ,<em>.</em>`	`em` 需要强调一下`strong` 很重要、强调性更强
`<span>...</span>`	给某个需要加样式的元素添加标记，无强调语义
`<iframe>...</iframe>`	用于嵌入一个页面
`<table>..</table>`	用于展示表格，不要用来做布局，`thead tbody tfoot`可省略
`<tr>..</tr>`	行，与`<table>..</table>`一起用于展示表格
`<th>..</th>`	标题的列
`<td>..</td>`	内容的列
`<!Doctype html>`	文档对象模型
`<br>`	换行
`<html>..</html>`	整个页面的根节点，一个页面只能有一个html标签，所有内容应位于html标签内
`<head>..</head>`	用于定义文档的头部信息，它是所有头部元素的容器
`<title>...</title>`	文档的标题
`<meta>...</meta>`	提供有关页面的元信息
`<body>...</body>`	文档的内容,即可视页面内容

HTML初体验

HTML初体验

HTML、XML、XHTML有什么区别

HTML语义化

怎样理解内容与样式分离的原则

有哪些常见的meta标签

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

文档声明的作用

严格模式和混杂模式

<!Doctype html> 的作用

浏览器乱码的原因是什么？如何解决

常见的浏览器有哪些，什么内核

列出常见的标签，并简单介绍这些标签用在什么场景

猜你喜欢

热点阅读