美文网首页
自己总结的HTML5知识点(一)

自己总结的HTML5知识点(一)

作者: 50153465fcd8 | 来源:发表于2016-10-08 20:41 被阅读0次
    • nternet 互联网:将全球的计算机连接起来所形成的网络

    • web 万维网:通俗的说就是网页,把各类信息通过网页的形式提供给用户

    • web与Internet的关系:web是internet上的一个应用

    • web工作原理:用户使用浏览器通过HTTP协议访问web服务器,web服务器通过HTTP协议反馈相应的信息到浏览器供用户使用

    • HTML:超文本标记语言

    • 单标记/空标记:

       <input />
      
    • 双标记

      <body></body>
      

      <!doctype html>
      <html>
      <head>
      <title>文档标题</title>
      <body>
      <h1 align="center">标题</h1>
      <p valign="center">段落</p>

      </body>

      </head>
      </html>

    • <b></b>加粗<i></i>倾斜<u></u>下划线<s></s>删除线
      上标下标
      <div></div>块分区<span></span>行内分区<pre></pre>预格式化
    • 插入图片:

       <img src="1.jpg"/  width="100">  (绝对路径)
      
      <img src="../1.jpg"/ height="200">   (相对路径)
      
      width/height:设置图片宽/高,只能设置一个,否则图片会失真
      
    • 插入链接:

        <a href="http://www.------网址------">网址链接</a>
      
      <table border="1" bgcolor="red" width="10" height="10"
      cellspacing="0" cellpading="2">
      <!--创建表格/增添表格线/设置表格边框颜色/设置宽/设置高/设置边框粗细/设置内容与边框距离-->
        <caption>表格标题</caption>         <!--设置表格标题-->
        <tr >                                   <!--创建行-->
            <td>第一行,第一列</td         ><!--创建单元格-->
            <td>第一行,第二列</td>
            <td>第一行,第三列</td>
         </tr>
      </table>
    
    • 行分组:

        - <thead></thead>表头行分组
      
        - <tbody></body>表主体行分组
      
        - <tfoot></tfoot>表尾行分组
      
    • 单元格跨行:

        - <td rowspan="2"></td>   <!--跨两行-->
      
    • 单元格跨列:

        - <td colspan="3"></td><!--跨两列-->
      
    • 表格嵌套:

    ...

      <td>
         <table>
             ....
         </table>
      </td>
    

    ...

    • 有序列表
    <ol type="列表类型" start="起始编号">
        ...
       <li>...</li>
        ...
       <li>...</li>
       ...
    </ol>
            type类型
            1,数字(默认)
            a,小写字母
            A,大写字符
            i,小写罗马数字
            I,大写罗马数字
    
    • 无序列表

        <ul type="列表类型">
                ...
            <li>...</li>
                ...
             <li>...</li>
                 ...
        </ul>
            type类型
            disc:实心圆(默认)
            circle:空心圆
            square,实心矩形
      
    • 定义列表

      • dl:标记定义一个定义列表

      • dt:标记定义了定义列表中的一个术语

      • dd:标记对定义列表中的术语提供定义

    • 表单
      <form><!--定义表单-->
        <!--主要属性 action:定义表单被提交时发生的动作,通常包含服务方脚本的URL;
        method:指出表单数据提交的方式,取值为get或者post;
        enctype:表单数据进行编码的方式;
        name:表单名称-->
        <input type="text"><!--文本框-->
        <input type="password"/><!--密码框-->
                                        <!--主要属性
                                          name:名称
                                          value:由访问者自由输入的任何文本
                                          maxlength:限制输入的字符数
                                          readonly:设置文本控件只读-->
    
    • <input type="radio"/><!--单选框-->
      <input type="checkbox"/><!--复选框-->
                                        <!--主要属性
                                         name:设置名称,并用于分组,一组单选框或者复选框的名称必须相同
                                      value:文本,当提交form时,如果选中了此单选按钮,那么value就被发送到服务器
                                         checked:设置默认被选中-->
      
    • <input type="submit"/><!--提交按钮-->
      <input type="reset"/><!--重置按钮-->
      <input type="button"/><!--普通按钮-->
                                        <!--name:名称
                                        value:按钮的标题文字-->
      
    • <input type="hidden"/ name="" value=""><!--隐藏域-->
      <input type="file"/ name=""><!--文件选择框-->
      <!----><input type="checkbox" name="chkHid" id="chkHid" />
      <label for="chkHid">不要公开我的信息</label>
        <!--将文本与控件联系在一起后,单击文本,效果就同单击控件一样-->
       </form>
      
    • 选项框

      • select:创建选项框

      • name:选项框命名

      • size:大于1,则为滚动列表

    • multipe:设置多选

    • 通用选择器 *{ }

    • 元素选择器 h1 { } 权值为1

    • 类选择器 .color { } 权值为10

    • id选择器 #num { } 权值为100

    • 内联样式 < p styple=""> 权值为 1000

    • 群组选择器 .color,#num,h1 { }

    • 后代选择器 body p { }

    • 子代选择器 body>h2>p { }

    相关文章

      网友评论

          本文标题:自己总结的HTML5知识点(一)

          本文链接:https://www.haomeiwen.com/subject/batpyttx.html