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

HTML01

时间:2017-03-31 21:40:52      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:输入密码   list   ace   行内元素   body   for   div   img   用户名   

1 WEB三要素

  1.1 浏览器: 向服务器发送请求,下载服务器中的网页(HTML文件),然后执行HTML文件,从而显示内容

  1.2 服务器:接收浏览器的相应请求,并作出相应的回应

  1.3 http协议:服务器和浏览器之间的通讯协议

 

2 HTML工作原理

  2.1 HTML是部署在服务器上的文本文件

  2.1 根据http协议,浏览器向服务器发出请求,服务器作出响应,给浏览器返回一个HTML文件

  2.3 浏览器解释THML文件中的内容,从而显示出解释出来的内容

 

技术分享
  1 <!doctype html> <!-- 指定html文件的版本,默认是html5 -->
  2 
  3 <html>
  4 
  5 <!-- head元素是所有头部元素的容器,title/meta/link/style/script都可以放到head元素里面 -->
  6 <head>
  7     <title>我是标题</title> <!-- 设定文档标题 -->
  8     <meta charset = "utf-8" /> <!-- 这顶文档编码 -->
  9     
 10     <!-- 内部样式 -->
 11     <style type="text/css"> 
 12        /* *{
 13             margin: 0;
 14             padding: 0;
 15         }*/
 16         ul{
 17             list-style: none;
 18         }
 19     </style>
 20 </head>
 21 
 22 <body>
 23     <!-- 文本元素 -->
 24         <!-- 标题、段落、列表、分区、行内元素 统称为文本元素 -->
 25     <h1>主标题,每个文档只能出现一次</h1>
 26     <p>我是段落<p/>
 27     <ol>
 28         <li>我是列表选项1</li>
 29         <li>我是列表选项2</li>
 30         <li>我是列表选项3</li>
 31     </ol>
 32 
 33     <ol>
 34         <li>
 35             Web三要素
 36             <ul>
 37                 <li>服务器</li>
 38                 <li>浏览器</li>
 39                 <li>http协议</li>
 40             </ul>
 41         </li>
 42     </ol>
 43 
 44     <div>我是块分区元素</div>
 45     <span>我是行内分区元素</span>
 46     <hr />
 47 
 48     <!-- 元素显示方式 -->
 49         <!-- 块级元素:默认情况下单独占一行(即:会自动换行), p div hr 
 50         行内元素:默认情况下不会换行,可以同其它行内元素位于同一行,span a img -->
 51     <span>行内元素有:span i em b strong del u br 实体代换 空格</span>
 52     <hr />
 53 
 54     <!-- 图像和超链接 -->
 55     <span>图像:img</span>
 56     <div>
 57         <img src="异常树.png" alt="" width = 300px height = 300px />
 58     </div>
 59     <span>超链接:a 利用a标签可以这只锚点</span>
 60     <hr />
 61 
 62     <!-- 表格 -->
 63     <table border="1px solid red">
 64         <thead>
 65             <tr>
 66                 <td colspan="3" align="center">这是表头</td>
 67             </tr>
 68         </thead>
 69         <tbody>
 70             <tr>
 71                 <td>表格内容1</td>
 72                 <td>表格内容2</td>
 73                 <td>表格内容3</td>
 74             </tr>
 75             <tr>
 76                 <td>表格内容1</td>
 77                 <td>表格内容2</td>
 78                 <td>表格内容3</td>
 79             </tr>
 80         </tbody>
 81         <tfoot>
 82             <tr >
 83                 <td colspan="3" align="center">这是表尾</td>
 84             </tr>
 85         </tfoot>
 86     </table>
 87     <hr />
 88 
 89     <!-- 表单 -->
 90     <form action="">
 91         用户名:<input type="text" placeholder="请输入用户名" />
 92         <br />
 93         密&nbsp;&nbsp;&nbsp;码:<input type="password" placeholder="请输入密码" />
 94         <br />
 95 
 96         <ol>
 97             <li>
 98                 爱好
 99                 <ul>
100                     <li><input id="l" type="checkbox" /><label for="l">篮球</label></li>
101                     <li><input id="z" type="checkbox" /><label for="z">足球</label></li>
102                     <li><input id="p" type="checkbox" /><label for="p">乒乓球</label></li>
103                 </ul>
104             </li>
105             <li>
106                 学科
107                 <select name="" id="">
108                     <option value="">Java</option>
109                     <option value="">Python</option>
110                     <option value="">MySQL</option>
111                 </select>
112             </li>
113         </ol>
114 
115         <table border="1px solid red">
116             <tr>
117                 <td rowspan="2">性别</td>
118                 <td><input name="g" id="m" type="radio"><label for="m">男</label></td>
119             </tr>
120             <tr>
121                 <td><input name="g" id="f" type="radio"><label for="f">女</label></td>
122             </tr>
123         </table>
124 
125     </form>
126 
127 </body>
128 </html>
代码示例

form表单的笔记见博客,其他元素的笔记请自行查阅文档

HTML01

标签:输入密码   list   ace   行内元素   body   for   div   img   用户名   

原文地址:http://www.cnblogs.com/NeverCtrl-C/p/6653499.html

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