<!DOCTYPE html><!-- 约束，申明--> <html lang="zh_CN" xmlns="http://www.w3.org/1999/html"><!-- html标签表示html的开始 lang = “zh_CN” 表示中文 html标签中一般分为两部分head 和body--> <head><!-- 表示头部信息，一般包含三部分内容，title 标签，css样式，js代码--> <meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集--> <title>标题</title><!--标题--> </head> <body bgcolor="antiquewhite" onclick="alert('一个界面相应')"><!--body是整个html页面显示的主题内容--> hello <!--标题标签 标题标签 ：h1 到 h6 h1最大，h6最小 align 对齐属性，默认左对齐 --> <h1 align="left">标题1</h1> <h2 align="right">标题2</h2> <h3 align="center">标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--a标签 超链接 href 属性设置链接的地址 target属性设置那个目标进行跳转 _self 当前页面跳转 _blank 打开新界面跳转 --> <a href="http://www.baidu.com" >百度</a><br/> <a href="http://www.baidu.com" target="_self" >百度</a><br/> <a href="http://www.baidu.com" target="_blank">百度</a><br/> <!--列表标签 有序列表、无序列表 order list: ol标签： 有序列表 unorder list :ul标签 ：无序列表 list item ：li标签：列表项 复制的快捷键 ：ctrl+d --> <ul> <li>java</li> <li>python</li> <li>mysql</li> <li>jdbc</li> </ul> <!--图片标签 img标签： 图片标签，用来显示图片 src属性设置图片的路径 width属性图片的宽度 height属性设置图片的高度 border属性设置图片的边框 alt属性 设置找不到图片时，替代的文本内容 在javase中的路径分为相对路径和绝对路径 相对路径： 从工程名开始 绝对路径：从盘符:/目录/文件名 在web中路径分为相对路径和绝对路径 相对路径： . 表示当前文件所在的目录 .. 表示当前文件所在的上一级目录 文件名 表示当前文件所在目录的文件，相当于./文件名, ./可以省略 绝对路径： 格式是： http://ip:part/工程名/资源路径 --> <img src="./src/img1.jpg" width="300" height="200" border="1" alt ="无法找到图片"/> <!--表格标签 table标签表示表格 border 设置表格边框 width 设置表格宽度 height 设置表格高度 align 设置表格相对与额面的对齐方式 cellspacing 设置单元格间距 tr 行标签 th 表头标签 td 单元格标签 colspan 跨列合并 rowspan 跨行合并 b 加粗标签 align 设置单元格文本对齐方式 --> <!--示例 ：五行五列表格，第一行行合并两个单元格，第二、三行合并第一列单元格--> <table align="center" border="1" width="300" height="300" cellspacing="0"> <tr> <td align="center" colspan="2"><b>1.1</b></td> <td align="center"><b>1.3</b></td> <td align="center"><b>1.4</b></td> <th>1.5</th> </tr> <tr> <td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> <td>3.4</td> </tr> <tr> <td>4.1</td> <td>4.2</td> <td>4.3</td> <td colspan="2" rowspan="2">4.4</td> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> </tr> </table> <!--iframe标签可以在页面上开辟一个小区域显示一个单独页面 iframe和a标签组合使用的步骤 1.在iframe标签中使用name属性定义一个名称 2.在a标签的target属性上设置iframe的name的属性值 --> <iframe src="hell0.html" width="300" height="300" name="abc"></iframe> <a href="http://www.baidu.com" target="abc">百度</a> <!--表单：html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器 form标签 表单标签 nput type="text" 是文件输入框 value设置默认显示内容 input type="password" 是密码输入框 input type="radio" 是单选框 name属性可以对其进行分组 checked ="checked" 表示默认选择 input type="checkbox" 是复选框 select 标签是下拉列表框 option 标签是下拉列表框的选项，selected="selected" 设置默认选中 textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值） rows 属性设置文本行的行数（高度） cols 属性设置每行显示几个字符 input type="reset" 是重置按钮 value属性修改按钮上文本 input type="submit" 是提交按钮 value属性可以修改文本 input type="button" 是按钮 input type="file" 是文件上传域 input type="hidden" 是隐藏域，当我们需要发送某些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器） form 标签是表单标签 active 属性设置提交的服务器地址 method 属性设置提交的方式get（默认）或post 表单提交的时候，数据没有发送给服务器的三种情况 1.表单项没有name属性 2.单选、复选（下拉列表中的option标签）都需要添加value属性，一遍发送给服务器 3.表单项不在form标签中 get请求的特点： 1.浏览器地址栏中的地址是：action属性[+?+请求参数] 请求参数的格式是：name=value&name=value……(action=login) 2.不安全 3.具有数据长度的限制 post请求的特点 1.浏览器地址栏中只有action属性值 2。相对于get请求安全 3.理论上米有数据长度的限制 --> <form action="http://www.baidu.com" method="get"> <input type="hidden" name="action" value="login"/> <table align="center"> <tr> <td>用户名称：</td> <td><input type="text" value="默认值"/></td> </tr> </table> </br> 用户密码：<input type="password" value="abc"/></br> 确认密码：<input type="password" value="abc"/></br> 性别： <input type="radio" name="sex" checked ="checked"/>男 <input type="radio" name="sex"/>女 兴趣爱好：<input type="checkbox"/>java <input type="checkbox"/>c++ <input type="checkbox"/>python<br/> 国籍：<select> <option>请选择国籍</option> <option selected="selected">中国</option> <option>美国</option> </select></br> 自我评价：<textarea rows="10" cols="20"></textarea> <input type="reset"/> <input type="submit"/> <input type="button" value="按钮" name="abc"/><br/> <input type="file"/></br> <input type="hidden" name="abc" value="abcname"/></br> </form> <!--div标签，默认独占一行 span标签：长度是封装数据的长度 p 默认会在段落的上方或下方各空出一行（有就不再空） --> <div>标签1</div> <div>标签2</div> <span>span1</span> <span>span2</span> <p>p1</p> <p>p2</p> </body> </html> <!-- html的书写规范 <html> 表示整个html页面的开始 <head> 头信息 <title>标题 </title> </head> <body> 页面主题内容 </body> </html> 表示整个html页面的结束 标签拥有自己的属性 1.基本属性 ： bgcolor="antiquewhite" --修改背景颜色 2.事件属性： onclick="" 表示点击事件，可以直接设置时间响应后的代码 alert() :是javaScript语言提供的一种警告框函数，可以接受任意参数，参数就是警告框的函数星系 标签：单标签，双标签 单标签格式： <标签名/> ：br 换行，hr 水平线 双标签格式： <标签名></标签名> 特殊字符表示 < 用 < > 用> 空格 用  -->
css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 方式二： style标签用来定义css样式代码 --> <style type="text/css"> /*css里的标签*/ div{ border:1px solid red; } span{ border:1px solid red; } </style> <!--方式三--> <link rel="stylesheet" type="text/css" href="Cssstyle.css"> <style type="text/css"> #id001{ border: 1px solid yellow; color: aqua; font-size: 1px; } #id002{ border: 1px solid yellow; color: aqua; font-size: 1px; } </style> </head> <body> <!-- css 语法规则： 选择器 { 属性 : 值 ; } 标签名选择器,可以决定哪些标签被动的使用这个样式； id选择器，可以通过id属性选择性的去使用这个样式 #id属性值{ 属性: 值; } class选择器，可以通过class属性有效的选择性地去使用样式 .class{ 属性: 值; } 组合选择器： 选择器1，选择器2，选择器n{ 属性: 值; } 修改div标签的样式为：边框一个像素，实现，红色 --> <!--方式一--> <div style="border:1px solid red">div标签1</div> <div style="border:1px solid red">div标签2</div> <span style="border:1px solid red">span1</span> <span style="border:1px solid red">span2</span> <!--方式二--> <div >div标签3</div> <div >div标签4</div> <span >span3</span> <span >span4</span> <!--方式三--> <div >div标签5</div> <div >div标签6</div> <span >span5</span> <span >span6</span> <div id="id001">div标签1</div> <div id="id002">div标签2</div> </body> </html>
div{ border:1px solid red; } span{ border:1px solid red; }