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