入门任务4

作者: 飘逸的小乐 | 来源:发表于2017-09-17 20:54 被阅读0次

HTML、XML、XHTML 有什么区别

HTML:语法较为松散,主要用于定义Web页面结构
XML:主要用于存储数据和结构,语法要求严格
XHTML:基于XML,作用与HTML类似,但语法较HTML更严格

怎样理解 HTML 语义化

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

优点:
优化用户体验例如title、alt用于解释名词或解释图片信息、label标签的活用
和搜索引擎建立良好沟通,有利于SEO,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化

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

一个网页分为三个部分:Html——结构,css——表现,javascrip——行为。内容也就是html,样式也就是css。所以内容和样式的分离,就是指在网页编码的过程中,要将html和css两大部分分开。

写 HTML 的时候先不管样式,重点放在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容,之后再去写样式。

写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)
HTML 内不允许出现属性样式,尽量不要出现行内样式

有哪些常见的meta标签

<meta http-equiv="xxx" content="******">
<meta name="xxx" content="******">
[content]为[http-equiv] 或 [name] 属性提供了相关的定义值
[http-equiv]这个枚举属性定义了能改变服务器和用户引擎行为的编译。
[name]这个枚举属性可以定义document-level metadata(文档级属性?)的名字
如:author、description、keywords等

特殊用法
<meta charset='xxx'>
告诉浏览器页面的代码是用的xxx编码方式(HTML5中使用)
360浏览器可以通过<meta name="renderer" content="******">强制切换内核模式(没有测试最新版360浏览器是否支持0)
参考资料:http://se.360.cn/v6/help/meta.html

参考资料https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

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

<!DOCTYPE>  文档声明:定义网页的文档类型
doctype是一种标准通用标记语言的文档类型声明,目的是告诉浏览器要使用什么样的文档类型定义(DTD)来解析文档

doctype在html中的作用是触发浏览器的标准模式(或称严格模式),如果html中省略了doctype,浏览器会进入到混杂模式的状态也称之为兼容模式。
在这种模式下有些样式,布局会和标准模式存在差异。标准,DOM标准只规定了标准模式下的行为,没有对兼容模式做出规定,因此不同浏览器在兼容模式下的处理也是不同的,应用兼容模式比较困难,所以需要慎用。

<!doctype html>是html5的文档声明。浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关。HTML5中没有了DTD,所以两者也没了区别,文档声明也简化成了<!doctype html>。

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

常见的编码格式有:ASCII、GBK、GB2312、UNICODE、UTF-8
使用编辑器编写 HTML 文件,保存编写的HTML文件,会按照使用的编辑器默认的编码方式进行保存,使用浏览器打开HTML文件。在没有声明的情况下,浏览器并不知道你的这个文件是使用什么编码方式,于是会使用了默认解码方式。例如文件保存为GBK格式,在Chrome打开时默认使用 ISO -8859的解码方式,就会导致编码和解码不匹配,产生乱码。

保存文件时候设置编码格式,如GB2312、UTF-8,保证所有文件的编码格式统一。
如果你的文件是保存为utf-8格式,在html 的 <head>里添加<meta charset="utf-8">;如果你的文件保存为gbk格式,一定在文件里添加<meta charset="gbk">,对浏览器进行说明,浏览器直接按照声明的编码方式进行解析读取,就不会有乱码问题。

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

Gecko内核:FireFox
Webkit内核:Safari
Webkit的分支Blink内核:Opera、Chromium、Chrome
 注:Chromium其实是Google的开源浏览器,Chrome基于Chromium
Trident内核:IE大家族,各种双核浏览器的兼容模式
Trident分支EdgeHTML内核:Edge浏览器
注:国产双核浏览器的急速模式会基于Webkit、Blink、Chromium一种,浏览器介绍里会有

目前日常见到的有以上几种浏览器内核
参考资料:https://en.wikipedia.org/wiki/Web_browser_engine

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

主体部分:<body>
头部信息:<head>
标题:<title>
段落:<p>
超链接:<a>
插入图片:<img>
换行符:<br>
表格:<table>
表格行:<tr>
单元格:<td>
表单:<form>
多行文本域:<textarea>

相关文章

  • 入门任务4

    HTML、XML、XHTML 有什么区别 HTML:语法较为松散,主要用于定义Web页面结构XML:主要用于存储数...

  • 入门任务4 HTML

    HTML、XML、XHTML 有什么区别 首先,他们都是一种标记语言(Markup Language),不同的是:...

  • 前端入门-任务4

    一、HTML、XML、XHTML 有什么区别 (一)定义: html即是超文本标记语言,是最早写网页的语言,但是由...

  • 入门任务4交作业

    提问 HTML、XML、XHTML 有什么区别 怎样理解 HTML 语义化 怎样理解内容与样式分离的原则 有...

  • 入门任务

    任务二 web 相关知识了解 前端是做什么的?互联网职位有哪些常见的简称(如PM…) 在一个待开发的产品中,产品经...

  • 入门级知识

    入门知识_1 入门知识_2 入门知识_3 入门知识4

  • webpack4入门学习笔记(一)

    系列博客链接 webpack4入门学习笔记(一) webpack4入门学习笔记(二) webpack4入门学习笔记...

  • webpack4入门学习笔记(二)

    系列博客链接 webpack4入门学习笔记(一) webpack4入门学习笔记(二) webpack4入门学习笔记...

  • webpack4入门学习笔记(三)--Babel的使用

    系列博客链接 webpack4入门学习笔记(一) webpack4入门学习笔记(二) webpack4入门学习笔记...

  • 入门任务8

    块级元素和行内元素分别有哪些?## 块级元素 行内元素 区别 块级元素可以包含行内元素和其他块级元素,行内元素只能...

网友评论

    本文标题:入门任务4

    本文链接:https://www.haomeiwen.com/subject/rmhmsxtx.html