前端
1.HTML
XML:可扩展标记语言
XHTML:可扩展的超文本
标记语言
1. HTML 概述
HTML:超文本标记语言
网页组成:文字 + 图片 + 表格 + 表单 + 链接 + 视频 + 音频
网页文件的格式:htm ,html
网页的注释:<!-- 注释的内容 -->
html 结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>头部标题</title>
</head>
<body>
网页内容所在位置
</body>
</html>
2. 标记
-
标记的语法
<起始标签 属性名="值" ......> 被标记的内容</结束标签>
注意:
- 不区分大小写(个别浏览器区分)
- 一般标记都是成对出现,极少数单独出现
- 标签可以相互嵌套,但不可交叉嵌套(属性如果其冲突,就近原则)
-
标签分类:
- 块级标签:有换行,有宽高,外边距正常,块级标签和行级标签都可以放
- 行内标签:没有换行,宽高无效,上下外边距无效,只能放文字和行级标签,不能放块级标签
如果要给服务端提交数据,表单中的组件必须有 name 和 value 属性。用于
给服务端获取数据方便
-
特殊字符
空格 > > < < " " & & © 版权© ® 注册®
-
标记
-
常用标记
标题:<hn="1...6" align="left|center|right" ></hn> 段落:<p align="left|center|right"></p> 字体:<font size="1-7" color="颜色" face="字体风格[黑体]"></font> <i>斜体</i> <em>斜体</em> <b>加粗</b> <strong>加粗</strong> <u>下划线</u> <ins>下划线</ins> <s>删除线(贯穿线)</s><del>删除线</del> <sub>下标标识</sub> <sup>上部标识</sup> 换行:<br/> 居中:<center></center> 元信息:<meta /> 预定义:<pre></pre> 地址:<address></address> 音频:<embed src=""></embed> 水平线:<hr size="粗细" color="颜色" width="长度" align="center|left|right" noshade(3D 凹凸效果)/> 滚动:<marquee direction="left|right|down|up" scrollamount="滚动速度" behavior="scroll(重复)|slide(不重复)|alternate(来回滚动)" loop="滚动次数-1" scrolldelay="两次之间的有延迟 值越大越明显的停顿"> </marquee> 页面排版:<div> </div>
-
图片标记:
img
<img src="路径" width="长度" height="高度 px" alt="加载失败" title="标题"/>
-
链接标记:
a
-
文本链接
<a href="路径" target="_self|_blank(新窗口打开)" title="提示">百度</a>
-
图片链接:可做
图片按钮
<a href="链接路径" title="提示"><img src="图片路径" alt="图片加载失败" title="提示"/></a>
-
锚连接:一般用于当前页面位置的跳转
<a name="锚名字" href="">首页</a> <a href="#锚名字">跳转到首页</a>
-
-
表格
-
完整版
<table> <caption>标题</caption> <thead> <tr><th></th></tr> <thead> <tbody> <tr><td></td></tr> </tbody> <tfoot> <tr><td></td></tr> </tfoot> </table>
-
属性
-
table 表格
border: 边框粗细 bordercolor:边框颜色 width: 宽度 height: 高度 bgcolor: 背景颜色 background: 背景图片 cellspacing:单元格与单元格之间的距离 cellpadding:单元格与数据之间的距离
-
tr 行
align:left|center|right 水平位置 valign:middle 中|top 上|bottom 下 垂直位置 height: width: bgcolor: background:背景图片
-
td|th 列 (th 列属于首列,自动居中加粗)
align:left|center|right 水平位置 valign:middle 中|top 上|bottom 下 垂直位置 height: width: bgcolor: background: 背景图片 rowspan: 合并行 colspan: 合并列 # 合并行列:数格子,数过的格子不能再数
-
-
-
列表
-
有序列表
<ol type="1|A|a|I|i" start="阿拉伯数字从哪里开始"> <li type="1|A|a|I|i"></li> </ol>
-
无序列表
<ul type="disc(实心圆)|circle(空心圆)|square(正方形)"> <li></li> </ul>
-
自定义列表
<dl> <dt> 小标题 </dt> <dd> 内容 </dd> </dl>
-
-
表单
form、input、select、textarea
表单:是页面提供客户端输入信息的元素的统称,包括
表单
和表单元素
如果要给服务端提交数据,表单中的组件必须有 name 和 value 属性,用于
给服务端获取数据方便
<form action="url 提交地址" method="get|post" name="formname"> <fieldset> <legend>基本信息</legend> 文本框:<input type="text" name="" size="" maxlength="" value="默认值"/> 密码框:<input type="password" name="" size="" maxlength="" value="默认值"/> 单选框:<input type="radio" name="sex" value="" checked="checked"/>提示符 多选框:<input type="checkbox" name="" value="" checked="checked"/> 提示文字 隐藏文本:<input type="hidden" name="" value=""/> 上传文件:<input type="file" name=""/> </fieldset
-