HTML01

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表单的笔记见博客，其他元素的笔记请自行查阅文档

posted @ 2017-03-31 20:55  寻渝记  阅读(200)  评论(0)  编辑  收藏  举报