2019独角兽企业重金招聘Python工程师标准>>>

新建一个html页 必须要有的标签

<!DOCTYPE html>

<html lang="zh-CN">  <head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=Edge">  <title>Page title</title>  <link rel="stylesheet" href="code-guide.css">  <style></style>  <script src="code-guide.js"></script>  </head>   <body>   </body>   </html>

文章转至

HTML语法

用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。

对于属性的定义，确保全部使用双引号，绝不要使用单引号。

不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。

HTML5 doctype

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

<!DOCTYPE html>

语言属性

强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

<html lang="zh-CN">

E 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。

<meta charset="UTF-8">

引入 CSS 和 JavaScript 文件

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为text/css 和 text/javascript 分别是它们的默认值。

<link rel="stylesheet" href="code-guide.css">

<style>/* ... */</style>

<script src="code-guide.js"></script>

实用为王

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

布尔（boolean）型属性

布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。

更多信息请参考 WhatWG section on boolean attributes：

元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。

<input type="text" disabled><input type="checkbox" value="1" checked><select>   <option value="1" selected>1</option></select>

JavaScript 生成的标签

通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。

CSS语法

对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）。

十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。

尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。

避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

不要使用 @import

与 <link> 标签相比，@import  指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。

.element { ... }.element-avatar { ... }.element-selected { ... }@media (min-width: 480px) {   .element { ...}   .element-avatar { ... }   .element-selected { ... }}

带前缀的属性

当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

.selector {   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);           box-shadow: 0 1px 2px rgba(0,0,0,.15);}

单行规则声明

对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。

.span1 { width: 60px; } .span2 { width: 140px; } .span3 { width: 220px; } /* Multiple declarations, one per line */ .sprite {   display: inline-block;   width: 16px;   height: 15px;   background-image: url(../img/sprite.png);   } .icon           { background-position: 0 0; } .icon-home      { background-position: 0 -20px; } .icon-account   { background-position: 0 -40px; }

简写形式的属性声明

在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：

大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。

/* Bad example / .element {   margin: 0 0 10px;   background: red;   background: url("image.jpg");   border-radius: 3px 3px 0 0;   }   / Good example */   .element {   margin-bottom: 10px;   background-color: red;   background-image: url("image.jpg");   border-top-left-radius: 3px;   border-top-right-radius: 3px;   }

class 命名

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。

避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

class 名称应当尽可能短，并且意义明确。

使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

选择器

对于通用元素使用 class ，这样利于渲染性能的优化。

对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。

选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。

编辑器配置

将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：

用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。

保存文件时，删除尾部的空白符。

设置文件编码为 UTF-8。

在文件结尾添加一个空白行。

转载于:https://my.oschina.net/u/2393989/blog/3026368

新建一个html页 必须要有的标签 （meta）相关推荐

  1. flask 检测post是否为空_用Flask和Vue制作一个单页应用（五）

    使用POST向后台发送数据 Flask app修改 可以直接使用现有的路由处理函数来接收前端发来的数据,server/app.py中的all_res()修改如下: @app.route('/resou ...

  2. dw选项卡代码_DW软件新建一个html网页

    使用Dreamweaver(简称DW)软件新建一个html网页,dw新建一个标准的HTML超文本网页 前面DIVCSS5介绍过使用记事本来新建HTML网页,记事本弊端,编码容易出错导致网页乱码,接下来 ...

  3. Keil MDK入门---从新建一个工程开始

    熟悉Keil C 51的朋友对于Keil MDK上手应该比较容易,毕竟界面是很像的.但ARM内核毕竟不同于51内核,因此无论在设置上还是在编程思想上,都需要下番功夫研究的.本文以MDK V4.03为例 ...

  4. html表单怎么自动换行,html表单怎么换行 首先新建一个HTML文件

    首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码. 在index.html中的标签中,将外层的table改为div,新增css代码:div {width: 30 ...

  5. zynq学习02 新建一个Helloworld工程

    http://www.cnblogs.com/Rmumu/p/5705502.html http://www.cnblogs.com/151009-on-the-way/p/5777848.html ...

  6. 第一次使用Android Studio时你应该知道的一切配置（二）：新建一个属于自己的工程并安装Genymotio...

    一.新建工程: 1.新建一个Project: 打开Android Studio,新建一个Project,界面如下: 上图中,设置好工程名和路径之后,接下来可以一路next: 二.Android Stu ...

  7. eclipse新建一个java_Eclipse中新建一个java源文件的步骤

    [简答题]请根据第六次讨论题目进行讨论.并将你的讨论回答的ppt传到此处. [简答题]P152页,习题9 一.二(2,3).请将回答的word文档上传到此处. [简答题]第五次讨论:讨论题目参见课程网 ...

  8. java追加一个sheet_（二）POI-创建一个sheet页，并添加行列数据

    原文:https://blog.csdn.net/class157/article/details/92800439 1.只创建sheet页 package com.java.poi; import ...

  9. android中如何新建一个activity,《Android Activity》活动的介绍和创建

    Activity 是什么 Android 有四大组件:Activity.Service.Broadcast Receiver 和 Content Provider. Activity,活动,即用来承载 ...

最新文章

  1. 如何实现软件的国际化
  2. spring cloud (三) 路由 zuul
  3. java几个easy出错的小程序
  4. Libgcrypt实现AES加密
  5. TCP/IP详解--第四章
  6. SSRS:服务器更名后，ReportingService无法使用和登录的解决办法
  7. Nginx核心要领五：worker_processes、worker_connections设置
  8. C++ string与数值的转换
  9. 外星人台式电脑_谈谈4万人民币的外星人R9台式机值不值得购买
  10. Optical_Flow(2)
  11. IE下的一个安全BUG —— 可实时跟踪系统鼠标位置
  12. 37线性映射04——像与核、核与像的计算、线性映射的维数公式
  13. 通用功能模块------滑动图片验证
  14. 他们每天都在为梦想排除万难，那你呢？
  15. gmt绘制江苏省高程异常图
  16. AVOD阅读笔记（二）：多模型融合RPN----Aggregate View Obeject Detection network
  17. 2021 天勤率辉计算机考研（附408）
  18. Java、JSP公文流转系统
  19. C语言打印菱形超详细版本，逐句解析
  20. 局域网IP不足解决方法

热门文章

  1. JAVA GUI界面组件学习
  2. LAMP 3.2 mysql登陆
  3. 虚幻UE4的后处理特效介绍 http://www.52vr.com/thread-31215-1-1.html
  4. pwershell custom objects
  5. 【Objective-C学习记录】第一天
  6. ejabberd源码学习——方法注册模式
  7. UIDatePicker的属性与方法
  8. 【转】Android android listview的HeadView左右切换图片（仿新浪，网易，百度等切换图片）...
  9. Combres库 学习小结以及部分源码分析
  10. 实践单元测试-Using NUnit 大纲