前端基础01——HTML

准备

关于HTML的DTD区别

DTD：三种文档类型：S（Strict）、T（Transitional）、F（Frameset）。 
html5没有XHTML 1.0 Transitional严格的要求，并且简化了很多东西可以直接使用 <!DOCTYPE HTML>

DTD类型	使用环境
Strict	如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用
Transitional	DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时使用
Frameset	DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD

HTML与XHTML区别

最主要的不同：

XHTML 元素必须被正确地嵌套
XHTML 元素必须被关闭
标签名必须用小写字母
XHTML 文档必须拥有根元素

一、关键字和页面描述

设置页面描述：

1	<meta name="Description" content="描述内容"/>

定义关键词：

1	<meta name="Keywords" content="关键词">

二、基本标签以及属性

标签（文本级：只含文字、图片、表单）	属性
img	src：相对路径 alt：图片出错提示
a （文本级）	href：超链接地址 title：鼠标悬停文本 target：是否新标签打开（_blank）锚点：href=”#xxx” (xxx为其他a标签的name或id属性)

三、定义表格

<!-- dt和dd都是容器级标签 -->
<dl>
    <dt>定义标题</dt>
    <dd>描述</dd>
    
    <dt>定义标题</dt>
    <dd>描述1</dd>
    <dd>描述2</dd>
</dl>

四、div和span

标签	类型
div	容器级
span	文本级

五、表单

<form action="提交路径" method="post">
    文本框：<input type="text" value=“xxx”/>
    密码框：<input type="password" />
    单选框：<input type="radio" name="sex" checked="checked"/>
    复选框：<input type="checkbox" name="hobby"/>
    
    下拉框：
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
    
    文本域：<textarea cols="30" rows="10"></textarea>
</form>

六、三种按钮

1
2
3

普通按钮：<input type="button" value="确定" />
提交按钮：<input type="submit" />
重置按钮：<input type="reset" />

七、label标签

1
2
3

请选择性别：
<input type="radio" name="sex" id="male"><label for="male">男</label>
<input type="radio" name="sex" id="female"><label for="female">女</label>

八、转义字符

常用字符：

字符	转义（分号结尾）	实体编号（分号结尾）
<	&lt	&#60
>	&gt	&#62
©	&copy	&#169
空格	&nbsp	&#160
&	&amp	&#38
""	&quot	&#34

其他特殊字符：

字符	转义（分号结尾）	实体编号（分号结尾）
'	&apos	&#39
￥	&yen	&#165
®	&reg	&#174
§	&sect	&#167
£	&pound	&#163
×	&times	&#215
÷	&divide	&#247
¢	&cent	&#162
_	_	&#95
*	*	&#42

九、html废弃标签介绍

字体：<font size="1~7" color="red"></font>

<!-- 现作为css钩子使用 -->
加粗：<b></b>
斜体：<i></i>
下划线：<u></u>
强调：<strong><strong>
强调：<em></em>

水平线：<hr/>
换行（p替代）：<br>