【基础-1】HTML基础整理

本文是对HTML基础的简单整理。
参考教程：基础语法、NEC方案HTML规范

一、NEC规范

========================================================================

第一节：整体结构

1.基础模板

<!DOCTYPE html>
		<html>
		<head>
			<meta charset="utf-8"/>
			<title>NEC：更好的CSS方案</title>
			<meta name="keywords" content=""/>
			<meta name="description" content=""/>
			<meta name="viewport" content="width=device-width"/>
			<link rel="stylesheet" href="css/style.css"/>
			<link rel="shortcut icon" href="img/favicon.ico"/>
			<link rel="apple-touch-icon" href="img/touchicon.png"/>
		</head>
		<body>

		</body>
		</html>

2.结构顺序和视觉顺序基本保持一致

1.从上到下、从左到右
2.div代替table布局，适当使用table

3.结构、表现、行为三者分离，避免内联

head：<link rel="stylesheet" type="text/css" href=""/>
body：<script type="text/javascript" src=""></script>

4.保持良好的简洁的树形结构

第二节：代码格式

1.说明文案的注释方法：
2.代码本身的注释方法
3.HTML注释在IE6中的BUG
4.严格的嵌套：内联元素不包含块级、标签正确闭合
5.严格的属性：属性和值全部小写有值加双引号
6.常用的标签
内联元素：a、button、img、input、label、span、textarea
修饰元素：br、del、em、strong、sub、sup
结构元素：title、meta、link、style、script
块级元素：div、dl、dt、dd、form、h1~h6、iframe、ol/ul>li、select>option、p、table>tbody+td+tfoot+th+thead+tr

第三节：内容语义

1.内容类型决定使用的语义标签
2.加强“资源型”内容的可访问性和可用性
3.加强“不可见”内容的可访问性
4.适当使用实体

第四节：邮件内容

1.邮件环境
2.避免被嵌套在不正确的容器里
3.避免css冲突或被覆盖
4.避免盒模型错误

二、实用知识

========================================================================

第一节：meta部分设置：基础语法、常用设置

1、基础语法

1.name属性：描述网页，参数值有以下9种

keywords(关键字)
description(网站内容的描述)
viewport(移动端的窗口)
robots(定义搜索引擎爬虫的索引方式)
author(作者)
generator(网页制作软件)
copyright(版权)
revisit-after(搜索引擎爬虫重访时间)
renderer(双核浏览器渲染方式)

2.http-equiv属性：http的文件头作用，参数值有以下6种

content-Type(设定网页字符集)(推荐使用HTML5的方式)
X-UA-Compatible(浏览器采取何种版本渲染当前页面)
cache-control(指定请求和响应遵循的缓存机制)
expires(网页到期时间)
refresh(自动刷新并指向某页面)
Set-Cookie(cookie设定)

2、常用设置

1.基础

关键字搜索：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
页面描述：<meta name="description" content="Free Web tutorials on HTML and CSS">

2.可选

1.每30秒刷新页面：<meta http-equiv="refresh" content="30">
2.优先使用IE最新版本和Chrome，避免IE使用兼容模式：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3.设置360浏览器渲染模式：<meta name="renderer" content="webkit|ie-comp|ie-stand">
4.启动或禁用自动识别页面中的电话号码：<meta name="format-detection" content="telephone=no">
5.设置缓存：<meta http-equiv="Cache-Control" content="no-cache" />
6.百度禁止转码：<meta http-equiv="Cache-Control" content="no-siteapp" />

3.移动端

1.移动端的窗口：<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
2.winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉：<meta name="msapplication-tap-highlight" content="no">
3.顶部状态栏背景色：<meta name="apple-mobile-web-app-status-bar-style" content="black" />
4.删除苹果默认的工具栏和菜单栏：<meta name="apple-mobile-web-app-status-bar-style" content="black" />

第二节：重要元素：li、a、img、input

1、列表li

1.需要重置样式：ul,ol,li{ list-style:none; }
2.实现三级导航联动效果

2、超链接a

1.需要重置样式：a{ text-decoration: none; color: #333; }
2.不需要地址是写#或者javascript:; ，留空会刷新页面
3.实现锚点点击转动到指定元素位置
4.实现Tab切换效果

3、图片img

1.需要重置样式：img{ border:0;border:none; }
2.设置alt图片显示失败文本、title鼠标经过文本
3.图片与文本对齐：vertical-align: top | middle | bottom
4.图片位置：left、right
5.图片之间、图片与行内元素，会产生间隙，2个方法解决
1.align=“left”
2.float：left
6.图片与块级元素，会产生间隙，2个方法解决
1.align="top" 或 align="center"
2.display: block / vertical-align: top; / vertical-align: bottom;
7.实现手风琴效果
8.实现轮播图效果

4、表单input

1.需要重置样式：`input,textarea,button,select { border:0;border:none;outline:0;resize:0;border-radius:0; }`

2.解决问题

1.改变输入框placeholder的颜色值

::-webkit-input-placeholder {color: #999;}
input:focus::-webkit-input-placeholder{color:#999;}

2.textarea去掉右侧滚动条，去掉右下角拖拽
<textarea style= "overflow:hidden; resize:none;"></textarea>

3.根据input的type来控制css样式

input[type="text"]{ background-color:#FFC;}
input{ background-color:expression(this.type=="text"?'#FFC':'');}

4.使用appearance改变webkit浏览器的默认外观
input,select {-webkit-appearance:none;appearance: none;}

5.winphone下，使用伪元素改变表单元素默认外观

6.禁用select默认箭头，::-ms-expand修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰
select::-ms-expand {display:none;}

7.禁用radio和checkbox默认样式，::-ms-check修改表单复选框或单选框默认图标，设置隐藏并使用背景图片来修饰
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check {display:none;}

8.禁用pc端表单输入框默认清除按钮，::-ms-clear修改清除按钮，设置隐藏并使用背景图片来修饰
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear {display:none;}

3.实现美化效果

第三节：引入模块3种方法对比：load()、include、iframe

1.load()，存在跨域问题，本地不能调试,需要在服务器环境

<div id="Header"></div>
<script>$("#Header").load("Header.html");</script>

2.include，存在跨域，本地不可调试,需要在服务器环境

<include src="Header.html"></include>

3.模块引入：iframe,不存在跨域问题，本地可用

<iframe marginwidth=0 marginheight=0 width="100%" height="68px" scrolling=no frameborder=0 src="Header.html" mce_src="Header.html"></iframe>