HTML介绍??1.什么是 html:hypertext markup language?????????????? 用来编写网页的语言,后缀是.html/.htm
HTML介绍
?
?1.什么是 html:hypertext markup language
?????????????? 用来编写网页的语言,后缀是.html/.htm
??????????????
?????????????? 编写方式:任何文本编辑器
?????????????? 运行方式:浏览器解释运行
????
???? 2.浏览器
?????????????? IE/Firefox/Chrome/Safari/Opera
??????????????
???? 3.html文档的结构
?????????????? 版本信息:
???????????????????????? 严格型:xhtml1.0
???????????????????????? 过渡型:trans
???????????????????????? 框架型:支持框架元素
?????????????? <head>
?????????????? <body>
????
???? 4.head:与当前文档相关的整体设置
??????????????????? title:标题
??????????????????? meta:元数据
???????????????????????? http-equiv="refresh" content="3"
?????????????????????????????????? 定期刷新(数据的实时性):留言论坛/动态更新的新闻
??????????????????? style:
??????????????????? link:
??????????????????? script:
???????????????????
????????? body:文档的主体,包含页面的主要内容
??????????????????? 文本标记/超级链接和图像/表格/表单/列表/框架元素
????
???? 5.html 的基础语法
??????????????????? 双标记:<name></name>
??????????????????? 单标记: <name>
??????????????????????????????????????? <name />
??????????????????? 带属性的标记:<name attrname="value"></name>
???????????????????
??????????????????? 通用属性:几乎所有的元素都有的属性
????????????????????????????? title:添加提示文本信息
????????????????????????????? id:
????????????????????????????? style:
????
?????????????? 练习1:创建一个html文档,使用head中的元素
????
???? 6.文本标记
?????????????? 标题:h1--h6
?????????????? 段落标记:p----自成一个段落,保留段落间距
?????????????? 换行元素:br----回车换行,间距较小
?????????????? 特殊字符:转义符
?????????????? 分组元素:将一些元素分组，以实现样式的定义或者js代码的添加
??????????????????? div:独占一行--------块级元素
??????????????????? span:不会改变原有的布局---行内元素
????
???? 7.超级链接和图片
?????????????? 图像:<img src="http://www.dsfds/image/cat.jpg">
???????????????????????? <img src="../image/cat.jpg" title="">
????????????????????????????? 绝对路径/相对路径
?????????????? 超级链接:去往其他的url---页面间的切换
???????????????????????? <a href="url">text</a>
???????????????????????? target:设置新页面在哪个窗口打开
?????????????????????????????????? _self:当前窗口
?????????????????????????????????? _blank:新窗口或者新页签
??????????????????????????????????
???????????????????????? <a href="mailto:wangcm@tt.com.cn">联系我们</a>
???????????????????????? <a href="javascript:method();">click</a>
????????????????????????
???????????????????????? 同一个页面上不同部分之间的跳转:
?????????????????????????????????? 定义链接:<a href="#top">to top</a>
?????????????????????????????????? 定义锚点:<a name="top"></a>
??????????????
?????????????? 图像映射
???????????????????????? 为一幅图像添加一个链接:<a href=""><img></a>
???????????????????????? 为一幅图像添加多个链接
??????????????????? <map name="aaa">????
???????????????????????? <area shape="rect" coords="0,0,100,100" href="a.html">
???????????????????????? <area shape="circle" coords="50,150,50" href="b.html">
???????????????????????? <area shape="poly" coords="x1,y1,x2,y2,..">
??????????????????? </map>
???????????????????
??????????????????? <img src="cat.jpg" usemap="#aaa">???????????????????
???????????????????
???? 8.表格:结构化的数据
?????????????? 表格的基本结构:table包含 tr包含? td
?????????????????????????????????? 数据文本等内容位于td中
?????????????? 表格的属性:
???????????????????????? border:内外边框的宽度都设置为1
???????????????????????? cellspacing:单元格之间以及单元格和外边框之间的间距
???????????????????????? cellpadding:单元格和文本内容之间的空间
???????????????????????? width/height
????????????????????????
?????????????? td的属性:
???????????????????????? width/height
???????????????????????? align:left/center/right
???????????????????????? valign:top/middle/bottom
????????????????????????
?????????????? 表格的完整结构:
???????????????????????? caption:为表格定义标题
???????????????????????? 行分组元素:将某些行分组,用于实现样式不同
?????????????????????????????????? thead
?????????????????????????????????? tbody
?????????????????????????????????? tfoot
??????????????????????????????????
?????????????? 不规则表格:用于页面的布局
??????????????????? td元素colspan属性:跨列
??????????????????? ????? rowspan属性:跨行
??????????????????? ?????
?????????????? 表格的嵌套:复杂布局
??????????????
??????????????
???? 9.表单
??????????????????? 表单元素:<form></form>
????????????????????????????? 承载控件,输入或者选择
????????????????????????????? 提交:以表单为单位
?????????????????????????????
????????????????????????????? <form action="login.jsp" method="post">
?????????????????????????????????? <input type="text">
?????????????????????????????????? <input type="submit">
????????????????????????????? </form>
?????????????????????????????
??????????????????? 表单中可以包含控件元素
????????????????????????????? input 元素:输入
??????????????????????????????????????? type="":依靠type属性的不同取值创建不同类型的控件
???????????????????????????????????????
??????????????????????????????????????? 文本框
????????????????????????????????????????????????? text:单行文本框
????????????????????????????????????????????????? password:密码文本框
?????????????????????????????????????????????????
????????????????????????????????????????????????? value属性:设置初始值
??????????????????????????????????????? 按钮
????????????????????????????????????????????????? submit:提交
????????????????????????????????????????????????? reset:重置--恢复到初始加载时
????????????????????????????????????????????????? button:普通按钮
????????????????????????????????????????????????? image:图像按钮
?????????????????????????????????????????????????
????????????????????????????????????????????????? value属性:设置按钮上的文本
?????????????????????????????????????????????????
??????????????????????????????????????? 单选框和复选框(核选框)
????????????????????????????????????????????????? checkbox:复选框
????????????????????????????????????????????????? radio:单选框
?????????????????????????????????????????????????
????????????????????????????????????????????????? value属性:提交给服务器的数据
????????????????????????????????????????????????? checked属性:默认是否选中
????????????????????????????????????????????????? name属性:设置为同一组
?????????????????????????????????????????????????
??????????????????????????????????????? 文件域:
????????????????????????????????????????????????? file:选择上传的文件
?????????????????????????????????????????????????
??????????????????????????????????????? 隐藏域:
????????????????????????????????????????????????? hidden:记载那些不需要被用户看见的关键数据,比如id
?????????????????????????????????????????????????
????????????????????????????? 其他元素:
??????????????????????????????????????? textarea:多行文本框
?????????????????????????????????????????????????????? cols/rows
??????????????????????????????????????? label:文本标记
?????????????????????????????????????????????????????? for属性:关联的控件的id
??????????????????????????????????????? 选择框:下拉框/列表框
???????????????????????????????????????????? select
?????????????????????????????????????????????????????? size属性:区分下拉框或者列表框
?????????????????????????????????????????????????????? multiple属性:允许多选,只用于列表框
???????????????????????????????????????????? option
?????????????????????????????????????????????????????? value属性:记载提交的数据
??????????????????????????????????????? 控件分组元素
????????????????????????????????????????????????? fieldset:将控件分组
????????????????????????????????????????????????? legend:为分组定义标题
?????????????????????????????????????????????????
???? 10.列表
?????????????? ul:无序
?????????????? ol:有序
?????????????? li:列表项
?????????????? 嵌套的列表+CSS样式:菜单的效果
??????????????
???? 11:浮动框架:用于在一个html页面上嵌入另一个html页面
?????????????? <iframe></iframe>
