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:[email protected]">联系我们</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>

你可能感兴趣的:(html)