1.文件结构:
HTML文件的固定结构:
<html>
<head>...</head>
<body>...</body>
</html>
html是根标签
head定义文档头部,包含: title, script, style, link, meta
body是网页主要内容,包含:h1,h2-h6, p, a, img
html标签建议使用小写。
空标签加斜杠是更长远的保障,如<br />。
语义化,标签的使用要遵循语义化。
2.文档头部
<head>
<meta charset="utf-8"> 文档字符解码格式,防止乱码
<meta name="keywords" content="关键词"> 提供给搜索引擎使用
<meta name="description" content="描述"> 提供给搜索引擎使用
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 移动端浏览器的宽度与缩放
<title>...</title> 文档标题
<base href="" target=""> 定义页面中所有链接默认的目标地址
<link rel="" href=""> 引入样式表css文件、favicon文件
<style></style> 样式
<script></script> js代码
<noscript></noscript> 不支持js代码时候执行
</head>
3.html属性
html元素可以设置属性。
属性位于开始标签。
属性可以为元素添加附加信息。
属性总是以名称/值对的形式出现,属性值用双引号括起来,值中有双引号的用单引号。如href="www.love.com"。
如class,id,style,title
4.body部分
<!DOCTYPE html> 文档声明
<html>
<html>
<head>...</head>
<body>
<h1>这是一个标题</h1> 最重要的标题,后面以此类推。
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>
<p>这是段落</p>
<a href="链接地址" target="定义链接的文档在何处显示">这是链接,可以是文本,也可以是图片</a>target可以取值_blank,_self
<img src="" alt="图片无法加载时候的替代文本" width="" height="" /> 图片
<map></map>图像地图,可以设置图片哪里可以点击哪里不能点击,使用<area shape="" coords="" alt="" href="">
<hr /> 水平线
<!--这是注释--> 注释可以提高代码可读性,使代码更容易被理解,浏览器会忽视注释。
<br /> 折行
html文本标签
<b></b> 粗体文字
<i></i> 斜体文字
<em></em> 着重,表现为斜体
<strong></strong> 强调,表现为粗体
<small></small> 小号字
<sub></sub> 定义下标字
<sup></sup> 定义上标字
<ins></ins> 定义插入字
<del></del> 定义删除字
计算机输出标签
<code></code> 计算机代码
<kbd></kbd> 地址
<samp></samp> 计算机代码样本
<var></var> 变量
<pre></pre> 预格式文本,这个很重要。可以保存空格等全部格式
html引文,引用,标签定义
<abbr></abbr> 定义缩写
<address></address> 定义地址
<bdo></bdo> 定义文字方向
<q></q> 短引用
<blockquote></blockquote> 长引用
<cite></cite> 定义引用、引证等
<dfn></dfn> 定义一个定义
表格
<table border="1"> 表格
<caption></caption> 表格标题
<colgroup> 定义表格列的组
<col span="2" style="background-color:red"> 定义表格列的属性
<col style="background-color:yellow">
</colgroup>
<thead> 表格页眉
<tr> 表格里的行
<th></th> 表格表头的单元格,粗体居中
<th></th>
</tr>
</thead>
<tbody> 表格主体
<tr>
<td></td> 表格里的单元格
<td></td>
</tr>
</tbody>
<tfoot> 表格页脚
<tr>
<td></td> 表格里的单元格
<td></td>
</tr>
</tfoot>
</table>>
列表
有序列表
<ol>
<li></li>
<li></li>
</ol>
无序列表
<ul>
<li></li>
<li></li>
</ul>
自定义列表
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
<div></div> 定义一块区域,块级元素
<span></span> 需要添加样式时候使用,内联元素
表单
<form> 定义表单, input定义输入域
<input type="txet" name="" value=""> 文本框
<input type="password" name=""> 密码框
<input type="radio" name="" value=""> 单选按钮,属于同一组的单选按钮name相同
<input type="checkbox" name="" value=""> 复选框,同一组按钮的name相同
<input type="submit" value=""> 提交按钮
<input type="reset" name="">
<textarea rows="" cols=""></textarea> 文本域
<select name=""> 下拉列表
<option value=""></option> 下拉列表的选项
<option value=""></option>
<option value="" selected></option> selected表示预选项
</select>
</form>
<label></label> label标签为 input 元素定义标注(标记),可以和input一起使用
<button type="button"></button> 定义按钮,在 <button> 元素内部,可以放置文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。
框架
<iframe src="" width="" height=""></iframe>
html颜色,由红绿蓝混合而成。
颜色名 red blue white black green gray
颜色十六进制 #FFFFFF 0到F
颜色RGB rgb(255,255,255) 0到255
字符实体(不要忘记分号!!!)
实体名称 显示效果 描述 实体编号
空格  
< < 小于号 <
> > 大于号 >
& & 和号 &
" " 引号 "
© 版权 ©
™ 商标 ™
® 注册商标 ®
× 乘号 ×
÷ 除号 ÷
¥ 日元 ¥
</body>
</html>
<html>
<head>...</head>
<body>...</body>
</html>