「HTML 」语法

2018-09-13 本文已影响0人 Rella7

HTML标签
书写规范
- 标签属性
全局属性
标签分类
标签关系
注释标签
HTML5新语义标签兼容性
- 低版本IE显示问题
- 兼容性解决方案
  - js代码创建标签
  - 优化代码执行--hack写法
  - 引入html5shiv.min.js

HTML标签

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如 <html>、<head>、<body>都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。

html-syntax.png

书写规范：

小写标签和属性
属性值双引号
代码因嵌套缩进

标签属性

使用HTML制作网页时，如果想让HTML标记提供更多的信息，可以使用HTML标记的属性加以设置。
其基本语法格式如下：

<标记名 属性1="属性值1" 属性2="属性值2" …> 内容 </标记名>

在上面的语法中，标记可以拥有多个属性，必须写在开始标记中，位于标记名后面。属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开。任何标记的属性都有默认值，省略该属性则取默认值。

采取 键值对 的格式 key="value" 的格式

比如:

<hr width="400" />

属性 是宽度
值 是 400

提倡：尽量不使用样式属性。

全局属性

id, <div id='unique-element'></div>，页面中唯一
class，<button class='btn'>Click Me</button>，页面中可重复出现
style，尽量避免
title，对于元素的描述类似于 Tooltip 的效果。

HTML标签分类

双标签
- <标签名> 内容 </标签名>
- 该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，
  “</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。
  和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
```
比如 <body>我是文字  </body>
```
单标签
- <标签名 />
- 单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
```
比如  <br />
```

HTML标签关系

标签的相互关系就分为两种：

1.嵌套关系
```
<head>
  <title> </title>
</head>
```
2.并列关系
```
<head></head>
<body></body>
```
建议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。

注释标签

在HTML中还有一种特殊的标记——注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下：

    <!-- 注释语句 -->

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

H5新语义标签兼容性

虽然HTML5为我们提供了很多一些新的语义标签,但老版本的浏览器并这些内容,比如iE 8 及以下版本就不支持新语义标签

低版本IE显示问题

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header{
            height: 100px;
            background-color: orangered;
        }
    </style>
</head>
<body>
    <header>
    </header>
</body>
</html>

低版本IE测试方式:
- 如果使用的是高版本的iE,比如ie11其内部能够调节ie的显示版本
- 打开浏览器->F12呼出开发者界面->选择仿真->选择浏览器版本

ie_test.gif

测试效果:
- 在版本小于等于ie8时,header标签就无法显示

解决方案

js代码创建标签

在页面中添加创建header标签的代码
修改header的样式,添加display:block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header{
            height: 100px;
            background-color: orangered;
        }   
    </style>
    <script type="text/javascript">
        // 使用代码创建header标签,创建后是行内元素
        //在低版本的ie中,如果想要显示h5的新语义标签,需要设置为block
      var headerDom = document.createElement('header');
      document.body.appendChild(headerDom);
      headerDom.style.display = 'block';
    </script>
</head>
<body>
<!--在老版本的ie中无法查看(ie8)-->
<header></header>
</body>
</html>

优化代码执行--hack写法

无论是js,或者js框架都需要执行js代码才能够解决兼容性问题,但是在高版本的浏览器中,那段js代码就没有必要执行了,所以我们通过一个叫做hack的方式来减少性能的浪费

用法:
- 使用 hack语法将需要执行的js的代码包裹起来

    <!--[if lte IE 8]>
    <script>
        <p>您的浏览器版本太低了建议更新,下载更为好用的Chrome浏览器</p>
    </script>
    <![endif]-->

更多语法:
例如:IE6及IE6以下的IE5.x可识别
Emmet快捷键为: cc:ie6 +tab 键
*l:less
*g:greater
*t:than
*e:equal

 <!--[if lte IE 6]>
    <script>
        alert("这段js代码执行了");
    </script>
<![endif]-->
 IE6及IE6以下的IE5.x可识别

导入js

直接导入js框架,js框架内部干的事情类似于帮助我们实现了创建添加 displayblock的操作,但是处理的逻辑会多一些
js框架"html5shiv"获取地址
- html5shiv.min.js为压缩版js文件,较常用
通过条件注释让这个js文件在指定的 IE版本中才被加载

使用js框架来解决html5新语义标签的IE浏览器兼容方法代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header {
            height: 100px;
            background-color: #f40;
        }
    </style>
</head>
<body>
<!--使用js框架来解决html5新语义标签的兼容方法-->
<!--[if lte IE 8]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
<header></header>
</body>
</html>