1-1-1了解XHTML【我赢职场】
一、网页开发
1、HTML基础
HTML[HyperText Markup Language]：超文本标记语言, “超文本”就是指页面内可以包含图片、链接，甚至音乐、视频、程序等非文字元素；“标记”指的是页面元素，比如：a标签，body标签等，浏览器就是通过这些“标记”，来解析包含在“标记”中的内容的。
1.0 2.0 3.0 4.0
XHTML[eXtensible HyperText Markup Language]:可扩展的超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。XHTML 1.0在2000年1月26日成为W3C的推荐标准。常用的共有50多个标记。
HTML5：HTML5 是下一代的 HTML
开发工具：
记事本
FrontPage
Dreamveaver
2、标记（按标记中是否包含子元素或者内容来划分）
1》单标记：<标记名称/> 例如：<img/>
2》双标记：<标记名称>内容</标记名称> 例如：<title>网页标题</title>
注意：
1》单标记一定要封死/
2》标记一定要顺序嵌套，不能交叉嵌套。例如：正确<a><b></b></a> 错误<a><b></a></b>
3》代码习惯一定要养成，每次写一对标记
3、属性（对象的特征描述）
1》<标记名称 属性名称=”值” 属性名称=”值” ……/>
2》<标记名称 属性名称=”值” 属性名称=”值” ……></标记名称>
注意：
属性不是必须的
属性的值写在引号之间
属性是不区分先后顺序的
标记的属性不能随意创造，写这个标记具有的已经存在的
3》核心属性（除了HTML、HEAD、link、base等）
Id：唯一标识符号
Class：类标识符
Style：行内样式
Title：注释
1-1-2XHTML的标准架构【我赢职场】
4、XHTML的标准架构
<!DOCTYPE html DTD>
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-CN" lang="zh-CN">：根元素
<head>：头部标记
<title>网页标题</title>：网页标题
<meta http-equiv=”content-type” content=”text/html;charset=utf-8”/>
</head>
<body>
网页主体
</body>
</html>
1》DTD[Document Type Defination]:文档类型定义是一套关于标记符的语法规则，定义文档的根元素是谁，子标记有哪些，子标记的属性有哪些
严格类型（strict）：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
过渡类型（Transitional）:
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
框架集（Frameset）:
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Frameset //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd">
2》meta标记
<meta http-equiv=”content-type” content=”text/html;charset=utf-8”/>
Meta标记告诉我们浏览器以什么编码方式来解析我们指定的文档类型。
所有的文档类型或者编码方式，统一使用UTF-8编码
3》xmlns：命名空间，解决命名冲突的
1-1-3文本标记【我赢职场】
5、文本标记
加粗：<b>内容</b>
加粗：<strong>内容</strong>
倾斜：<em></em>
倾斜：<i></i>
下划线：<u>下划线</u>
删除线：<s>删除线</s>
删除线：< strike >删除线</strike>
上标：<sup>上标</sup>
下标：<sub></sub>
代码标记：<code>代码标记</code>
字体标记：<font>字体标记</font>
我<fontsize="5" face="方正舒体"color=”red”>是</font>
1-1-4段落和换行标记
6、段落和换行标记
<p>段落标记</p>
换行：<br/>
7、W3C（www.w3.org）
验证地址：http://validator.w3.org/
8、标题
<h1>我是标题1</h1>
<h2align="left">我是标题2</h2>
<h3align="center">我是标题3</h3>
<h4align="right">我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
1-1-5网页中图片的添加【我赢职场】
9、图片
<img src=”图片的URL” alt=”注释”/>
图片必有属性src和alt
当alt值不为空时候，加上title。解决浏览器的兼容性问题
<img src="图片路径 " alt="注释"title="注释"border="0" width="300px" height="300px"/>
1-1-6路径问题与列表
路径问题：
1》绝对路径：带盼复的C:\Users\Administrator\Desktop\demo 开发中不用绝对路径
2》相对路径：从当前文档开始的路径
<img src="image/a.jpg"alt="注释" title="注释" border="0" width="300px"height="300px"/>
3》根相对路径：以“/”开始的路径
10、列表：
1》无序列表
<ul type=”disc|square|cirle”>
<li type=”disc|square|cirle”>内容</li>
<li>内容</li>
</ul>
2》有序列表
<ol type=”1|a|A|i|I” start=”起始点”>
<li>内容</li>
<li>内容</li>
</ol>
3》定义列表
<dl>
<dd></dd>
<dt></dt>
</dl>
1-1-7定义列表与表格
11、表格
<table width=”950|50%” border=”数值” bgcolor=”背景颜色”background=”背景图片” cellpadding=”内边距” cellspacing=”内边距” align=”left|right|center”>
<tr>
<td align=”left|right|center”></td>
<td collspan=”合并列”></td>
<td rowspan=”合并行”></td>
</tr>
</table>
1-1-8表格制作团购网导航【我赢职场】
1-1-9制作拉手团购的主体部分我赢职场
1-1-10水平分隔线的使用【我赢职场】
12、<hr width="宽度" size=”高度” align="center" color="gray"/>
13、HTML实体
当你需要显示这些特殊符号的时候，一定要写成HTMLENTITIES
<小于号：<（less than）
>大于号：> （great than）
‘单引号：'
“双引号："
&连接符：&
不间断空格：
注册商标：®
版权符号：©
1-1-11超链接标记之网页链接我赢职场
1-1-12超链接标记之发邮件我赢职场
14、超链接：页面跳转
文本元素、图片元素、热点
超链接标记：
<a href=”目标文档的url” target=”窗口形式”>内容</a>
Target形式：
1) _self：在自身窗口中打开
2) _blank：在新窗口中打开
3) _parent:在父窗口中打开
4) _top:在顶层窗口中
Href：目标文档的类型
1》连接到网页
2》连接到下载文件
3》发送邮件
<a href=”mailto:ddd@sohu.com”>给我发邮件</a>
4》连接到JavaScript
<a href=”JavaScript:alert(‘哈哈哈’);”>点击我</a>
5》空连接
<a href=”#”>我是空连接</a>
<a href=”JavaScript:void(0);”>保留原位置的空连接</a>
6》锚点
定义锚点：<a name=”锚点名称”></a>
如何连接锚点：<a href=”#锚点名称”></a>
连接不同页面锚点：
<a href=”目标文档的URL#锚点名称”></a>
1-2-1form表单做登录注册页面我赢职场
一、表单
1、表单的作用：收集客户端信息，发送到服务器端。
2、表单标记：
<form action=”服务器端的接收页面URL” method=“发送方式（POST|GET）” name=”名称” id=””>
</form>
Post:将表单信息隐藏在我们的请求的header中
信息量：理论上是没有限制的
Get：将信息以键值对的形式附加在URL上。
对表单中信息的数据量有限制，大概255字节
表单的书写：表单中的控件
1》文本框
单行文本框：
<input type=”text” value=”文本框默认值” name=””/>
多行文本框：
<textarea rows="行高" cols="列宽">欢迎光临</textarea><br/>
密码框：<input type=”password”value=”” name=””/>
单选框：
<input type=”radio” value=”” name=””cheked=”checked”/>男
多选框：
<input type=”checkbox” value=”” name=””/>苹果
2》列表框
<select name=”” size=””>
<option selected="selected">内容1</option>
<option>内容1</option>
<option>内容1</option>
</select>
分组
单选
<select name="sel"size="0">
<optgrouplabel="直辖市">
<optionvalue="beijing">北京</option>
<option>上海</option>
<option>重庆</option>
<option>深圳</option>
</optgroup>
<optgrouplabel="自治区">
<optionvalue="xinjiang">新疆</option>
<option>宁夏</option>
</optgroup>
</select><br/>
多选
<select multiple=“mutiple”>
<optgrouplabel="直辖市">
<optionvalue="beijing">北京</option>
<option selected="selected">上海</option>
<option>重庆</option>
<option>深圳</option>
</optgroup>
<optionvalue="xinjiang">新疆</option>
</select><br/>
4》按钮
提交按钮：
<input type=”submit” name=”” vlue=”值”/>
重置按钮：
<input type=”reset” name=”” vlue=”值”/>
自定义按钮：
<input type=”button” name=”” vlue=”值”/>
<button name=”” type=”submit|reset|button”></button>
图像按钮
<input type=”image” alt=”” src=”” name=””/>
1-3-1框架集的基本应用我赢职场
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>框架集测试</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <frameset rows="100,*"> <frame src="top.html" name="" noresize="noresize"/> <frameset cols="120,*"> <frame src="menu.html" name="" noresize="noresize"/> <frame src="content.html" name="content" noresize="noresize"/> </frameset> </frameset> <noframes> <body> 对不起您的浏览器不支持框架集 </body> <noframes> </html> |
扫一扫
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
