码迷,mamicode.com
首页 > Web开发 > 详细

html学习笔记

时间:2015-05-11 10:47:32      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:html

整理自某学习视屏(具体也忘了,或许是兄弟连,或许是其他人的)

<!-- 
语法一
“元素:一个整体,是一个对象  
<标记名><、标记名>成对的标签,也称为容器
标记中可以嵌套其他的标签
<br/> <hr />独立标签
如: <a href="http://www.baidu.com">example</a>
html用标记来描述元素,而html文档就是由元素和标记组成的文件

语法二
标签属性:
    1,<tag>content<tag>
    2,<tag><tag2>content<tag2><tag>
    3,<tag />
    4,<tag pro="value" pro="value" ...>
        content
      </tag>
      属性在标记中使用,属性值可以使用单引号,双引号,不加引号
      例:<font color="red" size="7">
      属性是标记功能的扩展或行为的修饰,每一个属性几乎都是可选的

语法三
HTML标记不区分大小
    如:<div><Div><DIV>都是有效的<div>标签
HTML的注释:开头"<!--"  结尾"-->" 中间的既是注释
注释中不能再包含注释
注释不能在标记中使用

语法四
    html的代码格式
        任何回车或空格在源代码中都不起作用
        所以要使用回车或空格进行代码排版
语法五
    html字符实体
        一些字符在html中拥有特殊含义,
        实体插入分三部分
            1:以&开头
            2,以一个实体名或使用#和一个实体的编码
            3,以分号;结束
            例如:< 是&lt;
                  > 是&gt;
                  空格是&nbsp;
                  & 是amp;
                  " 是&quot;
                  ‘ 是&apos;
                  版权符号是&copy;
                  注册商标是&reg;
                  *是&times;
                  / 是&divide;
语法六
    HTML中颜色的设置
    设置颜色可以是一个关键字或RGB的数字格式
    以#开头的数字格式:如#FF(0-255)从而RGB的表示是#FFFFFF


html的主体结构
    三部分:<html> 是网页文件的最外层标记
            <head> 之间的文本是头信息,头信息不会在浏览器窗口中显示
                   包括网页的基本描述,整个网页公共的属性
                   可以放得标签包括
                   <title>只能有一个
                       显示在浏览器的标题栏中
                       一般为公司名称+公司产品
                       搜索引擎收录网页时有用,是在搜索引擎中的标题
                   <base>只能有一个
                        用于设定浏览器中文件等的据对路径
                    网页中的文件只需要写下文件的相对路径即可
                    那这个路径就是base中指定下的路径
                    一般很少是使用 
                <link>可以有多个
                        设置外部文件的连接标记
                    用于确定本页面和其他的文档的关系
                    外部样式表的  
                   <meta name="" content="">可以有多个
                        用于在网页中加入一些描述信息,如网页的关键字,有利于搜索引擎查找分类
                    name不是自己定义的值,是固定的值,如
                    keywords:网页的关键字,让搜索引擎收录
                    description:网页的描述,让搜索引擎显示
                    robots:index(是否允许网页被放到搜索引擎数据库中) noindex follow(允许通过此链接访问其他人的房爷) nofollow all(前两者) none
                        默认是all
                    author:作者(不常用)
                    copyright:版本(不常用)

                   <meta http_equiv="" content="">(两种形式)
                    用于在HTML文档中模拟HTTP协议的的相应消息头,例如,告诉浏览器是否缓存页面
                    content-type :字符编码方式
                    refresh:用于刷新页面,如果content带上参数(time),即time秒后刷新,如果content="3:http://www.baidu.com" 那么三秒后就会转到百度网站,
                    expires:过去时间,content="时间值",缓存到什么时间,设置为0,则意味着禁止使用缓存
                    windows-target
                        分针技术
                    pragma
                    page-enter页面进入的时候,可以设置一种特效,23种特效
                        content="revealtrans(transition=5,ouration=1.000)"
                    page-exit页面出来的时候,可以设置一种特性
                   <script>
            </head>
            <body>
                是网页的主体部分,即正文,包括文字,图片,连接,视频,表单

            </body>
        </html>html文件的结束点

语法七
    DTD
        文档类型定义
            xml文档必须的
html常用标签:
    格式标签:用于定义把网页中的文本的布局,缩进,位置,换行,列表等(所有的格式都可以由css完成)
        <br> 换行
            <p> 段落
        <center>内容居中,基于上一层标签居中,不一定是基于网页居中
        <pre>保留文子在源代码中的格式,即原型输出
        <ul>无序的列表,配合<li>
        <li>列表项
        <ol><li> 有序的列表,有序就是前面有1,2,3等等
        <hr> 水平分割线
    文本格式:
        <h1>
        ...
        <h6>
        <b> 粗体
        <i> 斜体
        <u>下划线
             三者可以结合使用
        <font face="字体" color="" size="">
        <tt>打印机字体</tt>
        <cite>引用,例证字体</cite>
        <em>强调的斜体字</em>
        <strong>强调的粗体字</strong>
        <small>小型字体</small>
        <big>输出大型的字体</big>
超链接标签
    URL="协议 主机 端口 文件 附加资源"
        比如:http://www.lamp.com:80/web/index.php?username=zhangsan&age=12&sex=male
    对图片 文本 声音 影视的引用
    相对URL
        相对当前目录(访问同一个网站)
            比如:image/logo.gif
                ../css/demo.css
    绝对URL
        访问外部的网站
    <a href="URL" target=""></a>
        target:_self
             _blank 打开一个新页面
锚点超链接
    锚点:定义文章内容间的连接
    <a name="maodianname">内容</a>
        :名字可以自己选取
    使用:<a href="#maodianname">内容</a>
        这里的#表示当前页面,
         <a href="#">内容</a>
        表示返回此页的首行
         <a href="maito:example@example.com?subject=lamp?hello?chaongsonggei@qq.com">给我留言</a>
         上面的语句会启动本机的发送客户端
图像标签:
    超链接是网站的灵魂
    <img>
        src:图片的URL
        border:
        alt:第一个作为一个tooltip作用;第二个当图片不能显示时,可以显示一个图片提示;可以搜索引擎可以通过它指定的文字搜索该图片
        width:
        height:
        注:当图片做成当连接后,会默认在图片上加上一个边框,此时可以设置border的属性值为0,去除边框
        等比例缩放,只要任意给出width 或height
图像地图:
    一个图像只能作为一个a标签,做一个超链接
    如果把一个图像分成多个区域,每一个区域作为一个连接,每一个连接成为一个热点
    首先将一个图片设置为一个连接,然后指定一个usemap参数为mapname
    定义一个map
    <map name="mapname">
        <area shape="" coords="" href="">
            shape指定形状rect,poly,circle
            coords指定大小,rect用对角线确定,poly用顶点决定,circle用圆心和半径确定
            href指定连接
    </map>
    弊端:
        1,加载慢
        2,搜索引擎找不到
HTML的表格标签
    传统的使用表格进行页面排版
    <table></table>
        属性:align 基于上一层标签的位置left center right
              border 指定边线
              width
              height
              cellspacing:表格单元格间的宽度
              cellpadding:表格单元格内容与单元格边缘的宽度
        定义标题:
            caption:
                属性:align
                      valign
                      放在<tr>之前
            <caption>放在table之内
            这样标题和table就会成为一体,一起移动,如果是以<center>标题</center>制作的,标题和表格不是一体
        定义列名;
            <th></th>
            专门用来定义字段名,和<td>用法一致,但是<th>文字是粗体和居中显示
    行:<tr></tr>

    列:<td><td>
        align
        valign
        bgcolor
        colspan:作用跨列
        rowspan:作用跨行
    服务器的输出可以使用table
<form>
    action
    method   post  有数据限制
    target  
    title   起提示作用
    enctype  指示浏览器使用哪种编码方法将表单提交给www服务器
        两种取值:application/x-www-form-urlencoded(默认)
              multipart/form-data
    文本域
        text: 指定属性为readonly
        password
    按钮
        submit
        button
        reset
        image   图片按钮
    上传文件:
        file
    下拉列表
        select
            option  列表项
        可以模拟列表,多选列表,可以代替复选框
    多行文本区 
        textarea
            cols  rows wrap
    lable
        定义快捷键
        <label for id accesskey="">
        每一个标签都可以指定一个id(字符串)
HTML窗口分帧
    把一个浏览器文档窗口分隔成多个窗口,每一个窗口都可以显示一个独立的网页页面,每一个帧都自己的url
    通常用在后台的首页
    分帧不利于浏览器
    <frameset>标签
        属性:rows,cols,可以使用固定值,也可以使用百分比和*三种
              border   边线宽度
              frameborder  告诉标签是否显示边框,取值0和1
        <frameboder>标签可以嵌套,嵌套之后,外围的frameborder将会影响内部的frameborder,而修改内部的frameborder不会影响外围的frameborder
        注意:分帧不能和body体(即使只有一个文本字符)共存
        <a href="" target="">
            _blank _self _top _parent 
    <frame>标签
        属性:src:指定本窗体只用的页面
              name: 用于在各个窗体之间转换时的一个标记,用在target属性中
              scrolling:取值为yes 或no,可以实现隐藏一部分东西
              noresize:是否可以调动尺寸
    <noframes>
    <iframe>
        跟<frame>的用法一样,实现画中画的效果,与 body共存
            一般用在浏览器端,而frameset是用在后台

-->

html学习笔记

标签:html

原文地址:http://blog.csdn.net/havedream_one/article/details/45641125

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!