HTML,CSS,Javascript系列回顾

一.HTML基础

1.1 DTD背景及作用

html全程HyperText Markup Language，简称超文本标记语言

种DOCTYPE指定是一种DTD（document type definition）声明，即文档类型声明，

因为html发展至今有很多不同的版本，如下所示

HTML 2：<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01 Strict：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.1 plus MathML plus SVG：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

注：HTML4.01是基于SGML（标准通用标记语言）的，需要以<!DOCTYPE>声明引用一个DTD（文档类型定义），用来保证浏览器按照DTD指定的标记规则解析网页内容！HTML5不基于SGML，所以不需要指定DTD。

一个最简单的原始html如下所示

<!DOCTYPE html>
<html lang='zh'>
    <head>
        <meta charset='UTF-8'>
        <title>title</title>
    </head>
    <body>
    </body>
</html>

其中写在html标签中的lang属性作用：声明当前页面的语言类型，一般是告诉搜索引擎当前网页的语言类型

1.2 HTML页面移动端适配

什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

1.3 IE浏览器兼容性问题

< meta http-equiv = “X-UA-Compatible” content = “IE=edge” />

这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如人见人烦的IE6)，以此来解决部分兼容问题，例如模拟IE7的具体方式如下：

< meta http-equiv = “X-UA-Compatible” content = “IE=EmulateIE7” />

扫描二维码关注公众号，回复： 12648322 查看本文章

进行了IE兼容和移动端适配后的html一个简单的案例如下：

<!DOCTYPE html>
<html lang='zh'>
    <head>
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <meta charset='utf-8'>
        <title>最简单的原始网页</title>
        
    </head>
    <body>
        <p>简单的一句话</p>
    </body>
</html>

其中指定的移动端虚拟窗口（viewport）的大小为设备device的物理尺寸，然后放缩比例为1，最大放缩尺寸为1，即不允许放缩

1.4 Html标签基础

h1-h6
<a>标签，其中a标签的target属性，指定的是标签跳转窗口的打开方式，例如
<a href=‘https://www.baidu.com’ target=’_blank’>标识跳转窗口在一个新窗口中打开
<br> 换行标签

常用的标签属性： class(类属性), id（id唯一属性）, style（样式属性）
字体样式属性设置font-family（字体），color（颜色），和font-size（字体大小）
设置字体相关属性时如果只用一个font属性时，属性顺序为

字体：font-style：italic；斜体
font-weight：bold；加粗
font-size：30px；大小
line-height：30px；行高
font-family：“SimHei”；字体

以上必须按顺序来，有些可以不写；

表格属性

table,tr,td,th{
    
    
                border:1px solid #000000;
                border-collapse: collapse;
            }

其中表格本身，表头，表体均有边框，然后设置边框样式为单边框，即相邻边框合并