【HTML】基础总结一

①HTML、XHTML、HTML5

HTML(Hyper Text Markup Language)是超文本标记语言,用于描述网页文档的一种标记语言。

XHTML(Extensible Hyper Text Markup Language)是可扩展超文本标记语言,是更严格更纯净的 HTML 版本。

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,设计目的是为了在移动设备上支持多媒体。

②HTML语义化

HTML语义化是什么?

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

为什么要语义化?

  • 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。

  • 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构

  • 方便其他设备的解析

  • 便于团队开发和维护

易混淆的HTML标签详解

  • i 标签

The HTML <i&gt; Element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

i标签效果,i标签通常表示因为某种原因和正常文本不同的文本,例如专业术语、外语短语或排版用的文字。通常表现为斜体。

这也解决了我们之前提到的“为什么font-awesome这类字体是用i标签”这个问题。

  • em 标签

The HTML element emphasis <em&gt; marks text that has stress emphasis. The <em&gt; element can be nested, with each level of nesting indicating a greater degree of emphasis.

em标签效果。em表示强调的文本。视觉上也是斜体的效果

  • strong标签

The HTML Strong Element (<strong&gt;) gives text strong importance, and is typically displayed in bold.

strong标签效果。以加粗的形式展现。表示这个文本的重要性,在HTML4中表示特别强调,HTML5中描述为“strong importance for its contents”

  • b标签

The HTML <b&gt; Element represents a span of text stylistically different from normal text, without conveying any special importance or relevance. It is typically used for keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced. Another example of its use is to mark the lead sentence of each paragraph of an article.

b标签效果。表示的文本风格不同于正常的文本,没有表达任何特殊的重要性和相关性。通常用于关键字回顾,回顾中的产品名称或者是其他需要表现为粗体的文本。另一个例子是标志每个段落的lead sentence。

在HTML4之前b元素是为了使文本变为黑体,HTML4后样式信息已经被弃用,所以b元素的意义已经更改了。
不要使用b标签来标记标题,标题使用<h1>~<h6>标签。而且,当它们没有必要显示为粗体时,样式表可以改变这些元素的默认样式。
为了传达更多的语义信息,可以给b元素添加class属性,例如 b class ="lead"来标记每个段落的第一个句子。
如果没有语义上的目的,使用css属性的font-weight:bold来让文本加粗会更好。

  • mark

The HTML Mark Element (<mark>) represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched-for word.

mark的效果如下图。<mark>表现为高亮文本。例如我们在网页上查找关键字时,找到的结果就会以高亮的形式展现。
clipboard.png
不要使用mark元素来实现语法高亮,而是用span元素。
mark元素通常是表示跨越不同的上下文中的相关文本。

HTML5新标签

  • section

表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)。一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点来辨识每一个<section>。一般来说,一个 <section> 应该出现在文档大纲中。

  • artical

<article>元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

不同标签的区别

em vs i

虽然em标签也是显示为斜体的效果,但不能说因为效果一样就使用i标签来代替em标签。因为二者表示的含义不同。
举个例子。em标签:just do it already!
那么一个人或者一个软件在读这句话时,就会以强调加重的语气来读do这个单词。
对于i标签:The word the is an article。那么在这句话中斜体并没有强调的语气。只是表明the是一个article,而不是我们平时的冠词。

em vs strong

在HTML4中,strong一般指的是更强的强调。HTML5中strong表示的是内容的重要性。em被用来改变一个句子的含义,例如" I love carrots" vs " I love carrots"。而strong通常用来给部分句子增加重要性。例如"Warning!This is very dangerous"

strong vs b

strong 和 b 算是最相似的两个元素了。那么二者之间的差别。strong表示的是一种逻辑状态,而bold表示的是物理状态。逻辑状态是从内容中分离出来,以各种不同的形式来展现,可能你想标记为红色或者下划线或者其他,那么改变strong的属性比改变bold的属性更有意义。因为bold只是making bold,并不做任何重点性强调性的区分。

参考链接: https://segmentfault.com/a/1190000005626375  HTML语义化

③meta标签

答:<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

charset

charset是声明文档使用的字符编码,解决乱码问题主要用的就是它,值得一提的是,这个charset一定要写第一行,不然就可能会产生乱码了。

charset有两种写法

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

两个都是等效的。

百度禁止转码

百度会自动对网页进行转码,这个标签是禁止百度的自动转码

<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 优化部分

<!-- 页面标题<title>标签(head 头部必须) -->
<title>your title</title>
<!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords">
<!-- 页面描述内容 description -->
<meta name="description" content="your description">
<!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
<!-- 定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。 -->
<meta name="robots" content="index,follow">

viewport

viewport主要是影响移动端页面布局的,例如:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content 参数:

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)

各浏览器平台

Microsoft Internet Explorer

<!-- 优先使用最新的ie版本 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- 是否开启cleartype显示效果 -->
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">


<!-- Pinned Site -->
<!-- IE 10 / Windows 8 -->
<meta name="msapplication-TileImage" content="pinned-tile-144.png">
<meta name="msapplication-TileColor" content="#009900">
<!-- IE 11 / Windows 9.1 -->
<meta name="msapplication-config" content="ieconfig.xml">

Google Chrome

<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 禁止自动翻译 -->
<meta name="google" value="notranslate">

360浏览器

<!-- 选择使用的浏览器解析内核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

UC手机浏览器

<!-- 将屏幕锁定在特定的方向 -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 全屏显示页面 -->
<meta name="full-screen" content="yes">
<!-- 强制图片显示,即使是"text mode" -->
<meta name="imagemode" content="force">
<!-- 应用模式,默认将全屏,禁止长按菜单,禁止手势,标准排版,强制图片显示。 -->
<meta name="browsermode" content="application">
<!-- 禁止夜间模式显示 -->
<meta name="nightmode" content="disable">
<!-- 使用适屏模式显示 -->
<meta name="layoutmode" content="fitscreen">
<!-- 当页面有太多文字时禁止缩放 -->
<meta name="wap-font-scale" content="no">

QQ手机浏览器

<!-- 锁定屏幕在特定方向 -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 全屏显示 -->
<meta name="x5-fullscreen" content="true">
<!-- 页面将以应用模式显示 -->
<meta name="x5-page-mode" content="app">

Apple iOS

<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">


<!-- 禁止自动探测并格式化手机号码 -->
<meta name="format-detection" content="telephone=no">


<!-- Add to Home Screen添加到主屏 -->
<!-- 是否启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="App Title">

Google Android

<meta name="theme-color" content="#E64545">
<!-- 添加到主屏 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

App Links

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- More info: http://applinks.org/documentation/ -->

最后——移动端常用的meta

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->

参考链接:https://blog.csdn.net/yc123h/article/details/51356143 meta标签的作用及整理

  http://www.w3school.com.cn/tags/tag_meta.asp W3School <meta> 标签


④浏览器内核

目前最为主流浏览器有五大款,分别是IE、Firefox、Google Chrome、Safari、Opera。
浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心,也称“渲染引擎”,用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同,因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。

四大内核分别是:Trident(也称IE内核)、webkit、Blink、Gecko。五大浏览器采用的都是单内核,而随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核。
作为前端开发,熟悉四大内核是非常有必要的。四大内核的解析不同使网页渲染效果更具多样化。下面总结一下各常用浏览器所使用的内核。
1、IE浏览器内核:Trident内核,也是俗称的IE内核;
2、Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
3、Firefox浏览器内核:Gecko内核,俗称Firefox内核;
4、Safari浏览器内核:Webkit内核;
5、Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
6、360浏览器、猎豹浏览器内核:IE+Chrome双内核;
7、搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
8、百度浏览器、世界之窗内核:IE内核;
9、2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;

参考链接:https://blog.csdn.net/yuyanjing123456789/article/details/78689595 五大主流浏览器及四大内核

猜你喜欢

转载自blog.csdn.net/weixin_39068791/article/details/80155484