Html5知识点
2019-03-13 23:33:07来源:博客园 阅读 ()
学习资料: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>
演示结果:
原文链接:https://www.cnblogs.com/bencoper/p/10520462.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 1.html5概述 2020-05-25
- 初级Web前端工程师掌握这些知识点,月薪8000妥妥滴 2020-05-18
- [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读 2020-05-07
- 小白转前端,学习哪些知识点才能不走弯路? 2020-04-20
- HTML5开发工具有哪些?准备的这些HTML5开发工具赶紧了解一下! 2020-04-07
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash