html语言

时间 2019-11-18

标签 html 语言栏目 HTML 繁體版

原文原文链接

1、web标准

<!--
W3C: 万维网联盟组织，用来指定web标准的组织
web标准:制做网页遵循的规范
web标准的分类: 结构标准  表现标准  行为标准  
对应:结构html 表现css   行为JavaScript

html: 制做网页的
css:  对网页进行美化
JavaScript: 让网页动起来 
-->

2、浏览器扫盲

<!--
经常使用浏览器内核
    IE : trident
    chrome : blink
    Firefox : gecko
    safari : webkit
    
浏览器内核也及时浏览器所采用的的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容及页面的格式信息，渲染引擎是兼容性问题出现的根本缘由
-->

3、html介绍

<!--
概述:
    html全称Hyper Text Mark-up Language 超文本标记语言 它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式，好比字体、颜色、大小等
    超文本: 音频 视频  图片称为超文本
    标记: <英文单词或字母>称为标记  一个html页面由各类标记组成  

做用: html是负责描述文档语义的语言
PS: html语言不是一个编程语言（有编译过程），而是一个标记语言（没有编译过程），直接由浏览器解析执行
    
html语义:
    html是一个纯文本的文件，用一些标签描述文字的语义，这些标签在浏览器里面是看不到的，因此称为超文本标记语言

html网络术语:
    网页: 由各类标记组成的一个页面就是网页
    主页: 一个网站的起始页或者导航页面
    标记: <p>为起始标记  </p>为结束标记  也叫标签，每一个标签对都规定好了特殊含义
    元素: <p> 内容 </p> 称为元素   
-->

4、html规范

<!--
html是一个弱势语言
html不区分大小写
html页面的后缀名是以html或者htm（有些系统不支持后缀名长度超过3个字符，好比dos）
html的结构:
    声明部分:用来告诉浏览器这个页面使用的哪一个标准
    head部分:将页面的一些额外信息告诉服务器，不会显示在页面上
    body部分:咱们所写的代码必须放在此标签内
    
书写html规范:
    一、全部标记元素都要正确的嵌套，不能交叉嵌套  正确写法举例：<h1><font></font></h1>
    二、全部标记都必须小写
    三、全部标记都必须关闭
        双边标记：<span></span>
        单边标记：<br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” />
    四、全部的属性值必须加引号   <h1 id="head"></h1> 
    五、全部的属性必须有值   <input type="radio" checked="checked" />
html对换行不敏感，对tab不敏感
    html值在意标签的嵌套结构，嵌套的关系，谁嵌套了谁，谁被谁嵌套，和换行，和tab无关，换不换行，tab不tab都不影响页面结构
    也就是说，html不是依靠缩进来表示嵌套的，就是看标签的包裹关系。可是，良好的缩进，可使代码更易读 

HTML中全部的文字之间，若是有空格、换行、tab都将被折叠为一个空格显示。
-->

5、html结构介绍

<!--  <!DOCTYPE html>  主要做用:用来告诉浏览器这个页面使用那个标准    -->
<!DOCTYPE html>
<html lang="en">

<!--  <head>  </head> 主要做用:html页面头部信息设置，不会显示在网页上-->
<head>
    <!-- <meta charset="UTF-8">  设置 -->
    <meta charset="UTF-8">      
    <title>个人第一个html页面</title>
</head>

<!-- <body>  </body>  主要做用:页面显示部分，即数据部分，显示到网页上的-->
<body>
<h1>
    html:超文本标记语言
</h1>
</body>
</html>

<!--
一、文档声明头
    <!DOCTYPE html>   开头这一行，就是文档声明头，DocType Declaration 简称DTD。此标签能够告知浏览器文档使用哪一种html或xhtml规范

    XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。

    XHTML的主要目的是为了取代HTML，也能够理解为HTML的升级版。

    HTML的标记书写很不规范，会形成其它的设备(ipad、手机、电视等)没法正常显示。

    XHTML与HTML4.0的标记基本上同样。

    XHTML是严格的、纯净的HTML
二、head标签，包含<title> <meta> <link> <style>
    <title>  指定整个网页的标题，在浏览器最上方显示
    <meta>   提供有关页面的基本信息
    <link>   定义文档与外部资源的关系
    <style>  定义内部样式与网页的关系

2.1 meta标签
    元素可提供有关页面的原信息（meta-information）,针对搜索引擎和更新频度的描述和关键词。
    标签位于文档的头部，不包含任何内容。
    提供的信息是用户不可见的
    两个属性:http-equiv   name  不一样的属性有不一样的参数值，这些不一样的参数值就实现了不一样的网页功能
2.1.1 http-equiv属性
    它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
    <!--重定向 2秒后跳转到对应的网址，注意分号-->
    <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
    <!--指定文档的内容类型和编码类型 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <!--告诉IE浏览器以最高级模式渲染当前网页-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">

2.1.2 name属性
    主要用于页面的关键字和描述，是写给搜索引擎看的，关键字能够有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
    <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
    只要设置Description页面描述，那么百度搜索结果，就可以显示这些语句，这个技术叫作SEO（search engine optimization，搜索引擎优化）。
-->