自己总结的HTML5知识点（一）

2016-10-08 本文已影响0人 50153465fcd8

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知识点（一）

猜你喜欢

热点阅读