Html5知识点
程序员文章站
2022-12-24 10:51:17
学习资料:http://how2j.cn/p/1036 周期:3天 总结:采用的都是html的知识,有过时的结束请忽略.初学者还是练一遍有个印象即可. 1.html中文问题 2.标签 3.元素 4.属性 5.注释 6.标题 7.段落 8.粗体--斜体 9.预格式显示Java代码 10.删除--下划线 ......
学习资料:http://how2j.cn/p/1036
周期:3天
总结:采用的都是html的知识,有过时的结束请忽略.初学者还是练一遍有个印象即可.
1.html中文问题
<head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> </head>
2.标签
<p> 这是一个开始标签 </p> 这是一个结束标签 <p> hello world </p> 标签之间的文本叫做内容 <h1>大标题</h1> <h2>小一点的标题</h2> <h3>再小一点的标题</h3> <h4>更小一点的标题</h4>
3.元素
<html> 头标签 <body> 身体标签 <h1>标题</h1> <br/> 换行 <hr/> 水平线 <p>段落表示</p> </body> </html>
4.属性
<h1 align="center">居中标题</h1> 写在开始标签里的 align="center" 就叫属性 align 是属性名 center 是属性值 属性值应该使用双引号括起来
5.注释
<!--注释内容-->
6.标题
<h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题5</h6>
7.段落
<p>段落1 </p> <p>段落2 </p> <p>段落3 </p>
8.粗体--斜体
<b>b标签粗体效果</b> <strong>strong标签粗体效果</strong> <br/> <!--推荐使用--> <i>使用 i 标签带来的斜体效果</i> <em>使用 em 标签带来的斜体效果</em> <!--推荐使用-->
9.预格式显示java代码
<pre>
public class helloworld {
public static void main(string[] args) {
system.out.println("hello world");
}
}
</pre>
10.删除--下划线
<del>使用del标签实现的删除效果</del> <ins>使用ins标签实现的下划线效果</ins>
11.图像
<img src="图片路径"/> <!--图像大小--> <img width="200" height="200" src="图片路径"/> <!--图像位置--> <div align="left"> <img src="http://how2j.cn/example.gif"/> </div> <div align="center"> <img src="http://how2j.cn/example.gif"/> </div> <div align="right"> <img src="http://how2j.cn/example.gif"/> </div> <!--替换图片文字,加载不出图片时显示文字--> <img src="http://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />
12.超链接
<a href="http://www.12306.com">12306</a> <!--target属性表示在新页面打开超链接--> <a href="http://www.12306.com" target="_blank">http://www.12306.com</a> <!--超链接上显示文字--> <a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a> <!--图片超链接--> <a href="http://www.12306.com"> <img src="http://how2j.cn/example.gif"/> </a>
13.表格
<!--
table:表格
tr:行
td:列
border:带边框的表格
width:表格高度,px及像素的意思
td-width:单元格宽度绝对值,也可用百分比显示(50%)
algin:单元格水平对齐(left,right,center)
valgin:单元格垂直对齐(top,middle,bottom)
colspan:水平合并
rowspan:垂直合并
bgcolor:背景颜色
-->
<table border="1" width="200px">
<tr>
<td width="50px">1</td>
<td algin="center">居中</td>
<td algin="left">靠左</td>
<td algin="right">靠右</td>
<td width="80%">1</td>
<td valign="middle" >中间</td>
<td valign="top" >顶部</td>
<td valign="bottom" >底部</td>
<td colspan="2" >1，2</td>
<td rowspan="2">1,3</td>
<td bgcolor="pink">b</td>
</tr>
</table>
14.列表
<!--ul无序,ol有序--> <ul> <li>无序</li> <li>列表</li> </ul> <ol> <li>有序</li> <li>列表</li> </ol>
15.div域span
<!-- div是块元素，即自动换行 常见的块元素还有h1,table,p span是内联元素，即不会换行 常见的内联元素还有img,a,b,strong 业界通常结合css来控制页面布局 --> <div> 第一个div </div> <div> 第二个div <!--换行--> </div> <span> 第一个span </span> <span> 第二个span <!--不换行--> </span>
16.字体
<!--color表示颜色,size表示字体大小--> <font color="blue" size="+2">蓝色大2号字体</font>
17.内联框架
<!-- iframe相当于浏览器里面有个小浏览器，在这个小浏览器中，打开另一个网页 --> <iframe src="http://how2j.cn/" width="600px" height="400px"> </iframe>
18.文本框
<!--普通文本框--> <input type="text"> <!--设置文本框长度--> <input type="text" size="10"> <!--初始值文本框--> <input type="text" value="有初始值的文本框"> <!--有背景文字的文本框,使用属性placeholder--> <input type="text" placeholder="请输入账号">
19.密码框
<!--输入的数据会自动显示为星号--> <input type="password">
20.表单
<!-- action获取数据提交后的页面,初学者体验效果就好 get和post的区别 get 是form默认的提交方式 如果通过一个超链访问某个地址，是get方式 如果在地址栏直接输入某个地址，是get方式 提交数据会在浏览器显示出来 不可以用于提交二进制数据，比如上传文件 post 必须在form上通过 method="post" 显示指定 提交数据不会在浏览器显示出来 可以用于提交二进制数据，比如上传文件 --> <form action="http://how2j.cn/study/login.jsp"> 账号：<input type="text" name="name"> <br/> 密码：<input type="password" name="password" > <br/> <input type="submit" value="登陆"> </form>
21.单选框
<!--两个单选，都可以同时选中。但不能取消--> 单选1 <input type="radio" > 单选2 <input type="radio" > <!--checked默认选中--> 默认选中 <input type="radio" checked="checked" > <!--多个可单选框,activity参数--> 学习java<input type="radio" name="activity" value="学习java" > <br/> java<input type="radio" checked="checked" name="activity" value="tokyohot" > <br/> dota<input type="radio" name="activity" value="dota" > <br/> lol<input type="radio" name="activity" value="lol"> <br/>
22.复选框
<!--复选框,checkbox--> 学习java<input type="checkbox" value="学习java" > <br/> 学习<input type="checkbox" checked="checked" name="activity" value="tokyohot" > <br/> dota<input type="checkbox" value="dota" > <br/> lol<input type="checkbox" value="lol"> <br/>
23.下拉列表
<!-- <select> 即下拉列表 需要配合<option>使用 size:表示显示高度 multiple:可以用ctrl多选中 selected:默认选中 --> <select size="2" multiple="multiple > <option >1</option> <option >2</option> <option selected="selected" >3</option> </select>
24.文本域
<!-- 文本域可以有多行，并且可以有滚动条 cols:显示宽度 rows:显示行数 --> <textarea cols="30" rows="8">abc def </textarea>
25.普通按钮
<!--参数button,普通按钮不具备提交from表单的效果--> <input type="button" value="一个按钮">
26.提交按钮
<!-- <input type="submit"> 即为提交按钮 用于提交form，把数据提交到服务端 --> <form action="/study/login.jsp" method="get"> 账号:<input type="text" name="name"> <br/> 密码:<input type="password" name="password" > <br/> <input type="submit" value="登陆"> </form>
27.重置按钮
<!-- <input type="reset"> 重置按钮 可以把输入框的改动复原 --> <form action="/study/login.jsp"> 账号：<input type="text" name="name"> <br/> 密码：<input type="password" name="password" > <br/> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
28.图像提交
<!--<input type="image" > 即使用图像作为按钮进行form的提交--> <form action="/study/login.jsp"> 账号：<input type="text" name="name"> <br/> 密码：<input type="password" name="password" > <br/> <input type="image" src="http://how2j.cn/example.gif"> </form>
29.按钮
<!-- <button></button>即按钮标签 与<input type="button">不同的是，<button>标签功能更为丰富 按钮标签里的内容可以是文字也可以是图像 如果button的type=“submit” ，那么它就具备提交form的功能 --> <form action="/study/login.jsp"> 账号：<input type="text" name="name"> <br/> 密码：<input type="password" name="password" > <br/> <button type="submit">登陆</button> </form>
30.html综合演示
1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=gb2312"> 4 </head> 5 <body> 6 7 8 <table width="100%" > 9 <tr> 10 <td align="right"><font color="#ff0000">*</font>用户名:</td> 11 <td><input type="text" size="30"/> <font color="red">用户名不得小于3个字符</font></td> 12 </tr> 13 <tr> 14 <td align="right"><font color="#ff0000">*</font>密码:</td> 15 <td><input name="text" type="text" size="30"/></td> 16 </tr> 17 <tr> 18 <td align="right"><font color="#ff0000">*</font>确认密码:</td> 19 <td><input name="text2" type="text" size="30"/></td> 20 </tr> 21 <tr> 22 <td align="right"><font color="#ff0000">*</font>email:</td> 23 <td><input name="text3" type="text" size="30"/></td> 24 </tr> 25 <tr> 26 <td align="right"><font color="#ff0000">*</font>真实姓名:</td> 27 <td><input name="text4" type="text" size="30"/></td> 28 </tr> 29 <tr> 30 <td align="right"><font color="#ff0000">*</font>性别:</td> 31 <td> 32 <select> 33 <option>男</option> 34 <option>女</option> 35 </select> 36 </td> 37 </tr> 38 <tr> 39 <td align="right"><font color="#ff0000">*</font>生日:</td> 40 <td><select name="select"> 41 <option>1980</option> 42 <option>1981</option> 43 <option>1982</option> 44 <option>1983</option> 45 <option>1984</option> 46 <option>1985</option> 47 <option>1986</option> 48 <option>1987</option> 49 <option>1988</option> 50 <option>1989</option> 51 <option>1990</option> 52 <option>1991</option> 53 </select> 54 <select name="select2"> 55 <option>1</option> 56 <option>2</option> 57 <option>...</option> 58 <option>12</option> 59 </select> 60 <select name="select3"> 61 <option>1</option> 62 <option>2</option> 63 <option>...</option> 64 <option>31</option> 65 </select></td> 66 </tr> 67 <tr> 68 <td align="right"><font color="#ff0000">*</font>手机:</td> 69 <td><input name="text7" type="text" size="30"/></td> 70 </tr> 71 <tr> 72 <td align="right"><font color="#ff0000">*</font>居住地:</td> 73 <td><select name="select4"> 74 <option>四川省</option> 75 <option>河南省</option> 76 <option>广东省</option> 77 <option>河北省</option> 78 <option>黑龙江省</option> 79 <option>海南省</option> 80 <option>安徽省</option> 81 <option>内蒙古省</option> 82 <option>广西省</option> 83 <option>湖南省</option> 84 <option>湖北省</option> 85 <option>浙江省</option> 86 </select> 87 <select name="select5"> 88 <option>成都市</option> 89 <option>重庆市</option> 90 <option>...</option> 91 <option>北京市</option> 92 </select> <select name="select6"> 93 <option>成华区</option> 94 <option>龙泉驿区</option> 95 <option>...</option> 96 <option>金牛区</option> 97 </select> <select name="select7"> 98 <option>三圣乡</option> 99 <option>星辉路</option> 100 <option>...</option> 101 <option>蜀都大道</option> 102 </select></td> 103 </tr> 104 <tr> 105 <td align="right"><font color="#ff0000">*</font>qq:</td> 106 <td><input name="text9" type="text" size="30"/> 107 <br /> 108 <font size="-1" color="#0099ff">设置我的qq在线状态</font> 109 </td> 110 </tr> 111 </table> 112 113 114 </body> 115 </html>
演示结果: