Html5知识点
周期:3天
github:https://github.com/BenCoper/Html5欢迎大家去Star以及Fork
总结:采用的都是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综合演示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<body>
<table width="100%" >
<tr>
<td align="right"><font color="#FF0000">*</font>用户名:</td>
<td><input type="text" size="30"/> <font color="red">用户名不得小于3个字符</font></td>
</tr>
<tr>
<td align="right"><font color="#FF0000">*</font>密码:</td>
<td><input name="text" type="text" size="30"/></td>
</tr>
<tr>
<td align="right"><font color="#FF0000">*</font>确认密码:</td>
<td><input name="text2" type="text" size="30"/></td>
</tr>
<tr>
<td align="right"><font color="#FF0000">*</font>Email:</td>
<td><input name="text3" type="text" size="30"/></td>
</tr>
<tr>
<td align="right"><font color="#FF0000">*</font>真实姓名:</td>
<td><input name="text4" type="text" size="30"/></td>
</tr>
<tr>
<td align="right"><font color="#FF0000">*</font>性别:</td>
<td>
<select>
<option>男</option>
<option>女</option>
</select>
</td>
</tr>
<tr>
<td align="right"><font color="#FF0000">*</font>生日:</td>
<td><select name="select">
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
</select>
<select name="select2">
<option>1</option>
<option>2</option>
<option>...</option>
<option>12</option>
</select>
<select name="select3">
<option>1</option>
<option>2</option>
<option>...</option>
<option>31</option>
</select></td>
</tr>
<tr>
<td align="right"><font color="#FF0000">*</font>手机:</td>
<td><input name="text7" type="text" size="30"/></td>
</tr>
<tr>
<td align="right"><font color="#FF0000">*</font>居住地:</td>
<td><select name="select4">
<option>四川省</option>
<option>河南省</option>
<option>广东省</option>
<option>河北省</option>
<option>黑龙江省</option>
<option>海南省</option>
<option>安徽省</option>
<option>内蒙古省</option>
<option>广西省</option>
<option>湖南省</option>
<option>湖北省</option>
<option>浙江省</option>
</select>
<select name="select5">
<option>成都市</option>
<option>重庆市</option>
<option>...</option>
<option>北京市</option>
</select> <select name="select6">
<option>成华区</option>
<option>龙泉驿区</option>
<option>...</option>
<option>金牛区</option>
</select> <select name="select7">
<option>三圣乡</option>
<option>星辉路</option>
<option>...</option>
<option>蜀都大道</option>
</select></td>
</tr>
<tr>
<td align="right"><font color="#FF0000">*</font>QQ:</td>
<td><input name="text9" type="text" size="30"/>
<br />
<font size="-1" color="#0099FF">设置我的QQ在线状态</font>
</td>
</tr>
</table>
</body>
</html>
简单登陆注册模板.html
演示结果:
Html5知识点的更多相关文章
- HTML5知识点总结
HTML5知识点总结(一) 一.HTML新增元素 1.IE9版本以下支持HTML5的方法 <!--[if lt IE9]> <script src="http://cdn. ...
- HTML5 知识点
HTML5 知识点 (1)语义化标记 <header>,<footer>,<nav>,<article>,<section> ...
- html5知识点：DOM编程
DOM是Document Object Model的缩写,中文名称是文档对象模型. DOM是处理HTML页面的标准编程接口,DOM可被JavaScript用来读取.改变HTML的内容和结构. 前端三大 ...
- HTML5知识点汇总（1）
HTML5 1.html5是什么 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.-------h5并不是一门新的语言,而是html语言的第五次修订. 2.h ...
- HTML/HTML5 知识点思维导图
1 - 浏览器 | 浏览器页面构成 2 - 浏览器 | 浏览器内核相关知识点 3 - W3C | 对WEB标准以及W3C的理解与认识? 4 - 标签 | Doctype相关知识点 5 - 标签 | m ...
- HTML5知识点总结（一）
最近在复习前端的基础知识,在这里做一个总结,这是HTML5篇. 新特性 取消了过时的显示效果标记<font></font>和<center></center& ...
- Html5知识点以及兼容性
什么的HTNL5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供的 ...
- HTML5知识点笔记
1.HTML是一种标记语言 2.HTML元素不区分大小写 //可以在xss绕过waf时使用 3.<code></code>为空元素标签 <code/>为自闭合标签 ...
- html5知识点补充—footer元素的使用
使用footer元素创建脚注 顾名思义,footer元素通常位于页面的底部.尽管footer通常位于某个区域或者页面的底部,但并非总是如此.footer元素旨在包含作者.网站所有者.版权数据.网站规章 ...
随机推荐
- Robot Framework之测试用例分层实战
1.1 测试用例的第一层(交互层) 1. 创建项目资源(Resource). 操作步骤: 点”项目名称”->右键,选New Resource,在弹窗Name 输入框输入资源名称 mykeywo ...
- Java并发之ReentrantLock
一.ReentrantLock简介 ReentrantLock字面意义上理解为可重入锁.那么怎么理解可重入这个概念呢?或者说和我们经常用的synchronized又什么区别呢? ReentrantLo ...
- CDH简易离线部署文档
CDH 离线简易部署文档 文档说明 本文为开发部署文档,生产环境需做相应调整. 以下操作尽量在root用户下操作,避免权限问题. 目录 文档说明 2 文档修改历史记录 2 目录 3 ...
- 在Visual Studio中使用Debug Visualizers在C++中实现对原始类的自定义调试信息显示
在Visual Studio中使用Debug Visualizers在C++中实现对原始类的自定义调试信息显示 当我们在VS的C++中使用vector.list.map等这些STL容器,在开启调试的时 ...
- Java基础系列--桶排序
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/9045967.html 1.算法简介 桶排序可以算是最简单快速的排序算法了,只是限定条件要多 ...
- Spring Boot实战笔记（三）-- Spring常用配置（Bean的初始化和销毁、Profile）
一.Bean的初始化和销毁 在我们的实际开发的时候,经常会遇到Bean在使用之前或之后做些必要的操作,Spring对Bean的生命周期操作提供了支持.在使用Java配置和注解配置下提供如下两种方式: ...
- Java 8 异常该进
try-with-resources 这个特性是在JDK7中出现的,我们在之前操作一个流对象的时候大概是这样的: try { // 使用流对象 stream.read(); stream.write( ...
- maven使用与技巧
1.Pom文件介绍与基本组成 说明:全称是Project Object Model,通俗点的话说就是要对构建的项目进行建模. 组成的基本元素: 元素 描述 modelVersion 超级pom版本 g ...
- 基于Emit实现的C#版本的BeanCopier
在java的技术栈当中,著名的Cglib库里面有一个BeanCopier,这个类的功能就是可以完成两个对象的属性复制工作(哪怕属于两个不同的类). 今天本人通过.net内置的System.Reflec ...
- python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'解决办法
.原因是官网的是python2语法写的,看官手动把官网的HTMLTestRunner.py改成python3的语法: 参考:http://bbs.chinaunix.net/thread-415474 ...