HTML

　　　　　　　　　　HTML

1.网页的基本格式

 

 1 <!-- 声明网页的版本(文档类型) -->
 2 <!doctype html>
 3 <!-- 唯一的根元素 -->
 4 <html>
 5     <!-- 有且只有2个子元素 -->
 6     <!-- 用来对网页做出声明 -->
 7     <head>
 8         <!-- 声明网页的编码 -->
 9         <meta charset="utf-8"/>
10         <!-- 声明网页的标题 -->
11         <title>第1个网页</title>
12     </head>
13     <!-- 用来写网页的内容 -->
14     <body>
15         HTML真棒.
16     </body>
17 </html>

 

2. 基本元素

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>Insert title here</title>
  6 </head>
  7 <body>
  8     <!-- 1.标题 -->
  9     <h1>苍老师</h1>
 10     <h2>范传奇</h2>
 11     <h3>王克晶</h3>
 12     <!-- 2.段落 -->
 13     <p>范传奇暗恋王克晶</p>
 14     <!-- 7.2.1将超链接链到锚点上 -->
 15     <p><a href="#cang">苍老师</a>吃醋</p>
 16     <!-- 3.列表 -->
 17     <!-- 1)有序列表 -->
 18     <ol>
 19         <li>河北省</li>
 20         <li>河南省</li>
 21         <li>湖南省</li>
 22     </ol>
 23     <!-- 2)无序列表 -->
 24     <ul>
 25         <li>北京</li>
 26         <li>上海</li>
 27         <li>广州</li>
 28     </ul>
 29     <!-- 3)嵌套列表 -->
 30     <ol>
 31         <li>
 32             河北省
 33             <ul>
 34                 <li>石家庄</li>
 35                 <li>保定</li>
 36                 <li>廊坊</li>
 37             </ul>
 38         </li>
 39         <li>
 40             山东省
 41             <ul>
 42                 <li>济南</li>
 43                 <li>青岛</li>
 44                 <li>烟台</li>
 45             </ul>
 46         </li>
 47     </ol>
 48     <!-- 4.行内元素 -->
 49     <p>
 50         北京市<i>海淀区</i>北<b>三环</b>西路甲<u>18</u>号<span style="color:red;">中鼎大厦</span>B座8层
 51     </p>
 52     <!-- 5.空格折叠 -->
 53     <p>
 54         那是一个&nbsp;&nbsp;&nbsp;秋天,<br>
 55         看着传奇&nbsp;&nbsp;&nbsp;跑偏.<br>
 56         奔着克晶&nbsp;&nbsp;&nbsp;而去,<br>
 57         误入老苍&nbsp;&nbsp;&nbsp;心间.<br>
 58     </p>
 59     <!-- 6.图片 -->
 60     <!-- 1)绝对路径
 61         从盘符开始写出完整的存储路径和名称,如
 62         d:/images/01.jpg
 63         /home/soft01/01.jpg -->
 64     <!-- 2)相对路径(*)
 65         只需要写出图片和网页的相对关系
 66         平级: 01.jpg
 67         下级: i/02.jpg
 68         上级: ../03.jpg
 69         ../是返回到上级目录的意思
 70      -->
 71     <p>
 72         <img src="01.jpg"/>
 73         <img src="i/02.jpg"/>
 74         <img src="../03.jpg"/>
 75         <!-- 一般这样用 -->
 76         <img src="../images/04.jpg"/>
 77     </p>
 78     <!-- 7.超链接 -->
 79     <!-- 7.1链接到其他网站 -->
 80     <p>
 81         <a href="http://www.tmooc.cn" target="_blank">达内</a>
 82         <a href="http://doc.tedu.cn">文档</a>
 83     </p>
 84     <!-- 7.2链接到锚点(位置) -->
 85     <!-- 7.2.1将指定位置做成锚点 -->
 86     <p>
 87         <a name="cang">刘苍松</a>不是苍井空,他是苍井空的苍,他是苍井空的松.
 88     </p>
 89     <!-- 7.2.3链接到顶部:
 90         顶部默认就是锚点,并且没有名称. -->
 91     <p>
 92         <a href="#">顶部</a>
 93     </p>
 94     <!-- 8.表格 -->
 95     <!-- 8.1普通的表格 -->
 96     <table border="1" cellspacing="0" width="30%">
 97         <tr>
 98             <td>苍老师</td>
 99             <td>范传奇</td>
100         </tr>
101         <tr>
102             <td>王克晶</td>
103             <td>程祖红</td>
104         </tr>
105     </table>
106     <!-- 8.2跨列 -->
107     <table border="1" cellspacing="0" width="30%">
108         <tr>
109             <td colspan="2">苍老师</td>
110             <!-- <td>范传奇</td> -->
111         </tr>
112         <tr>
113             <td>王克晶</td>
114             <td>程祖红</td>
115         </tr>
116     </table>    
117     <!-- 8.3跨行 -->
118     <table border="1" cellspacing="0" width="30%">
119         <tr>
120             <td rowspan="2">苍老师</td>
121             <td>范传奇</td>
122         </tr>
123         <tr>
124             <!-- <td>王克晶</td> -->
125             <td>程祖红</td>
126         </tr>
127     </table>
128     <!-- 8.4行分组 -->
129     <table border="1" cellspacing="0" width="40%">
130         <thead>
131             <tr>
132                 <td>编号</td>
133                 <td>名称</td>
134                 <td>金额</td>
135             </tr>
136         </thead>
137         <tbody style="color:red;">
138             <tr>
139                 <td>1</td>
140                 <td>鼠标</td>
141                 <td>100</td>
142             </tr>
143             <tr>
144                 <td>2</td>
145                 <td>键盘</td>
146                 <td>200</td>
147             </tr>
148         </tbody>
149         <tfoot>
150             <tr>
151                 <td colspan="2">合计</td>
152                 <td>300</td>
153             </tr>
154         </tfoot>
155     </table>    
156 </body>
157 </html>

3 . 分区

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 </head>
 7 <body>
 8     <!-- logo区 -->
 9     <div style="border:1px solid red;">
10         <p>这里将来要放一张logo图片</p>
11     </div>
12     <!-- 内容区 -->
13     <div style="border:1px solid red;color:blue;">
14         <h1>宫保鸡丁的做法</h1>
15         <p>先放油,加热至80度左右</p>
16         <p>放入鸡丁,爆炒一会</p>
17         <p>再放花生、葱段继续炒一会</p>
18         <p>放调料,再炒几下,出锅</p>
19     </div>
20     <!-- 版权区 -->
21     <div style="border:1px solid red;">
22         <p>版权所有、盗版必究。</p>
23     </div>
24 </body>
25 </html>

4. 表单元素

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>Insert title here</title>
  6 </head>
  7 <body>
  8     <!-- 1.表单元素:
  9         1)圈定表单的范围:
 10             只有在此元素之内输入
 11             的数据才能提交到服务器,之外输入的
 12             数据是无法提交给服务器的.
 13         2)声明表单提交的目标:action
 14         注:method和enctype属性将来再讲. -->
 15     <form action="http://www.tmooc.cn">
 16         <!-- 2.表单控件:用来输入数据.
 17             2.1 input元素:
 18                 共9个,通过type属性进行区分.
 19             2.2 其他元素:
 20                 共3个,它们的标签名不同. -->
 21         <!-- 2.1 input元素 -->
 22         <!-- 1)文本框
 23             value:设置默认值
 24             maxlength:设置最大长度
 25             readonly:设置只读 -->
 26         <p>
 27             账号:<input type="text" value="tarena"
 28                 maxlength="10" readonly/>
 29         </p>
 30         <!-- 2)密码框:属性同上 -->
 31         <p>
 32             密码:<input type="password"/>
 33         </p>
 34         <!-- 3)单选框
 35             name:组名,同一组radio彼此互斥
 36             checked:设置默认选中
 37             注:value属性将来再讲 -->
 38         <p>
 39             性别:
 40             <input type="radio" name="sex" checked/>男
 41             <input type="radio" name="sex"/>女
 42         </p>
 43         <!-- 4)多选框
 44             checked:设置默认选中
 45             注:name和value将来再讲 -->
 46         <p>
 47             爱好:
 48             <input type="checkbox" checked/>美食
 49             <input type="checkbox"/>社交
 50             <input type="checkbox" checked/>竞技
 51             <input type="checkbox"/>文学
 52         </p>
 53         <!-- 5)隐藏框:
 54             用来传递不希望被用户看到的数据.
 55             数据通过value属性进行默认的设置. -->
 56         <p>
 57             <input type="hidden" value="love"/>
 58         </p>
 59         <!-- 6)文件框 -->
 60         <p>
 61             头像:<input type="file"/>
 62         </p>
 63         <!-- 7)按钮(提交/重置/普通) -->
 64         <p>
 65             <input type="submit" value="注册"/>
 66             <input type="reset" value="重置"/>
 67             <input type="button" value="测试"/>
 68         </p>
 69         <!-- 2.2 其他元素 -->
 70         <!-- 1)label:用来管理表单中的文字,
 71             可以将文字与框绑定在一起,从而增加
 72             这个框的可点击面积,提高易用性.
 73             绑定的步骤:
 74             a.给框增加id,用于唯一标识此框
 75             b.在文字外增加label标签,加属性for="id"
 76             注:任何元素都可以有id,是它的唯一标识. -->
 77         <p>
 78             <input type="checkbox" id="c1"/>
 79             <label for="c1">我已阅读并自愿遵守此协议!</label>
 80         </p>
 81         <!-- 2)下拉选
 82             selected:设置默认选中
 83             value:将来再讲
 84             注:选项少时用单选,选项多时用下拉选 -->
 85         <p>
 86             城市:
 87             <select>
 88                 <option>请选择</option>
 89                 <option>北京</option>
 90                 <option>上海</option>
 91                 <option>广州</option>
 92                 <option>深圳</option>
 93                 <option selected>杭州</option>
 94                 <option>大连</option>
 95                 <option>郑州</option>
 96             </select>
 97         </p>
 98         <!-- 3)文本域
 99             cols:设置宽度
100             rows:设置高度
101             readonly:设置只读
102             注:双标签中间的文字是它的默认值 -->
103         <p>
104             简介:<textarea cols="30" rows="5">哈哈哈哈哈</textarea>
105         </p>
106     </form>
107 </body>
108 </html>

 

posted @ 2017-04-16 09:51  等你，在雨中  阅读(348)  评论(0)    收藏  举报