HTML
-
前端的组成:html(内容)+css(排版和样式)+JavaScript(网页特效和表单验证)
-
前端编译(解析)器:浏览器(每个浏览器内核不同,所以有兼容性问题)
-
前端开发工具:记事本,Dreamweaver,HBuilder,WebStorm,eclipse,myeclipse,idea.
-
h t m l : 超 文 本 标 记 语 言 . 后 缀 名 : . h t m l 或 . h t m h t m l 由 标 签 组 成 的 语 言 , 且 它 的 标 签 全 部 已 经 定 义 好 , 我 们 不 可 以 自 定 义 . \textcolor{red}{html:超文本标记语言.后缀名:.html 或 .htm html由标签组成的语言,且它的标签全部已经定义好,我们不可以自定义.} html:超文本标记语言.后缀名:.html或.htmhtml由标签组成的语言,且它的标签全部已经定义好,我们不可以自定义.
-
x h t m l 规 范 : \textcolor{red}{xhtml规范:} xhtml规范:
- 每 个 x h t m l 页 面 必 须 有 根 标 签 < h t m l > < / h t m l > \textcolor{red}{每个xhtml页面必须有根标签<html></html>} 每个xhtml页面必须有根标签<html></html>
- x h t m l 不 区 分 大 小 写 , 但 是 提 倡 标 签 名 和 属 性 名 小 写 . \textcolor{red}{xhtml不区分大小写,但是提倡标签名和属性名小写.} xhtml不区分大小写,但是提倡标签名和属性名小写.
- x h t m l 必 须 正 确 嵌 套 . e g : < 标 签 名 1 > < 标 签 名 2 > < / 标 签 名 2 > < / 标 签 名 1 > \textcolor{red}{xhtml必须正确嵌套.eg:<标签名1><标签名2></标签名2></标签名1>} xhtml必须正确嵌套.eg:<标签名1><标签名2></标签名2></标签名1>
- x h t m l 元 素 必 须 被 关 闭 。 \textcolor{red}{xhtml元素必须被关闭。} xhtml元素必须被关闭。
- x h m t l 元 素 标 签 的 属 性 值 必 须 用 引 号 . \textcolor{red}{xhmtl元素标签的属性值必须用引号.} xhmtl元素标签的属性值必须用引号.
- 标 签 名 不 能 自 定 义 , 已 经 规 定 了 每 个 标 签 的 含 义 \textcolor{red}{标签名不能自定义,已经规定了每个标签的含义} 标签名不能自定义,已经规定了每个标签的含义
-
x h t m l 组 成 : 文 档 声 明 + h t m l 的 基 本 结 构 组 成 \textcolor{red}{xhtml组成:文档声明+html的基本结构组成} xhtml组成:文档声明+html的基本结构组成
-
xhtml的三种文档声明:
-
严格型文档声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
过渡型文档声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
框架型文档声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
-
-
h t m l 基 本 结 构 : \textcolor{red}{html基本结构:} html基本结构:
<html> <head> </head> <body> </body> </html>
-
html中头部常用标签:
-
页 面 标 题 标 签 : \textcolor{red}{页面标题标签:} 页面标题标签:
<title>标题内容</title>
-
页 面 内 容 类 型 和 编 码 方 式 \textcolor{red}{页面内容类型和编码方式} 页面内容类型和编码方式
<meta http-equiv="contentType" content="text/html;charset=gb2312"/>
-
搜索关键字
<meta name="keyword" content="关键字"/>
-
网站描述
<meta name="description" content="描述内容"/>
-
几 秒 跳 转 到 网 页 \textcolor{red}{几秒跳转到网页} 几秒跳转到网页
<meta http-equiv="refresh" content="时间;url=页面网址"/>
-
-
h t m l 中 b o d y 常 用 标 签 : \textcolor{red}{html中body常用标签:} html中body常用标签:
-
块级标签:独占一行.
-
内容标题标签:h1~h6
-
段落标签:
-
水平线标签:
-
列表
-
有序列表
<ol type="I"> <li>王者荣耀</li> <li>英雄联盟</li> <li>超级玛丽</li> <li>消消乐</li> </ol>
-
无 序 列 表 \textcolor{red}{无序列表} 无序列表
<ul type="square"> <li>肠粉</li> <li>油条豆浆</li> <li>蒸米粉</li> </ul>
-
自 定 义 列 表 \textcolor{red}{自定义列表} 自定义列表
<dl> <dt>java</dt> <dd>java是一种强类型的语言</dd> <dd>java是一种高级语言</dd> <dd>java是一种面向对象的跨平台语言</dd> </dl>
-
-
-
表 格 标 签 : 跨 行 r o w s p a n = " 行 数 " c o l s p a n = " 列 数 " \textcolor{red}{表格标签:跨行rowspan="行数" colspan="列数"} 表格标签:跨行rowspan="行数"colspan="列数"
<table border="1px" width="300px" height="400px"> <!--行--> <tr> <!--列--> <td>姓名</td> <td>年龄</td> <td>专业</td> </tr> <tr> <!--跨列--> <td colspan="2">张三</td> <td>软件专业</td> </tr> <tr> <!--列--> <td rowspan="2">李四</td> <td>24</td> <td>软件专业</td> </tr> <tr> <!--列--> <td>24</td> <td>软件专业</td> </tr> </table>
-
(了解)功能性表格
<table border="1px" width="400px" height="500px"> <!--标题--> <caption>年终水电报表</caption> <!--表头--> <thead> <!--行--> <tr> <!--列--> <th>宿舍号</th> <th>水费</th> <th>电费</th> </tr> </thead> <!--表的主体--> <tbody> <!--行--> <tr> <!--列--> <td>101</td> <td>100</td> <td>500</td> </tr> <!--行--> <tr> <!--列--> <td>102</td> <td>200</td> <td>600</td> </tr> <!--行--> <tr> <!--列--> <td>103</td> <td>100</td> <td>400</td> </tr> </tbody> <!--表尾--> <tfoot> <!--行--> <tr> <!--列--> <th>总计</th> <th>400</th> <th>1500</th> </tr> </tfoot> </table>
-
-
行 级 标 签 ( 内 联 标 签 ) : 内 容 有 多 大 占 多 大 位 置 . \textcolor{red}{行级标签(内联标签):内容有多大占多大位置.} 行级标签(内联标签):内容有多大占多大位置.
-
框架集:
将整个页面划分多个模板,每个模板引入一个页面.页面要么不用框架集,要么全用框架集.
优点:方便页面布局,及页面利用.
缺点:灵活性比较差,加载速度慢.
注意:框架集与body不共存;<html> <head> <title>框架集的使用</title> <meta http-equiv="contentType" content="text/html;charset=gb2312"/> </head> <!--框架集--> <frameset rows="20%,60%,*"> <!--第一部分--> <frame src=""/> <!--第二部分--> <frameset cols="20%,60%,*"> <!--左边部分--> <frame src=""/> <!--中边部分--> <frame src=""/> <!--右边部分--> <frame src=""/> </frameset> <!--第三部分--> <frame src=""/> </frameset> </html>
-
内 联 框 架 : \textcolor{red}{内联框架:} 内联框架:
内联框架:在页面中直接引入另一个页面作为当前页面的一部分.
优点:灵活性好,实现页面利用.
<iframe src="2.1超链接的使用.html"></iframe>
-
特殊符号
< 小于号 > 大于号 & 与字符 " 引号 ® 己注册 © 版权 ™ 商标 空格