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元素旨在包含作者.网站所有者.版权数据.网站规章 ...
随机推荐
- Http协议、Tomcat、servlet
HTTP协议 Http,超文本传输协议是互联网上最广泛的一种网络协议,所有的www文件都必须遵守这个标准. Http协议由http请求和http响应组成 http请求: 1.请求行 请求方式 POST ...
- 第五章 MySQL函数
一.数学函数 (1) 绝对值函数:ABS(x) ABS(x) 用于返回 x 的绝对值 mysql> SELECT ABS(2), ABS(-2.3), ABS(-33); +--------+- ...
- mysql workbench EER图，里面的实线以及虚线的关系
ERWin里面线代表实体间的三种关系:决定关系(Identifying Relationship),非决定关系(None-Identifying Relationship),多对多(Many-To-M ...
- 利用Django进行Web开发
Web就是用来表示Internet主机上供外界访问的资源的.网页也统称为web资源.Internet上供外界访问的Web资源主要分为如下两类: 静态web资源:指web页面中供人们浏览的数据始终是不变 ...
- mysql 中 character set 与 collation 的理解
character set 和 collation 的是什么? character set, 即字符集. 我们常看到的 utf-8, GB2312, GB18030 都是相互独立的 character ...
- Java公开课-04.异常
一,异常的概念 程序在运行时,发生了我们没有预测的结果,它阻止了程序按照我们预期效果执行 二,怎么保证我们的程序在发生异常以后 ,代码继续执行? 异常处理机制 在程序发生异常以后,还能按照我们事先设定 ...
- is not eligible for getting processed by all BeanPostProcessors
BeanPostProcessor是控制Bean初始化开始和初始化结束的接口.换句话说实现BeanPostProcessor的bean会在其他bean初始化之前完成,BeanPostProcessor ...
- Spring-cloud (八) Hystrix 请求缓存的使用
前言: 最近忙着微服务项目的开发,脱更了半个月多,今天项目的初版已经完成,所以打算继续我们的微服务学习,由于Hystrix这一块东西好多,只好多拆分几篇文章写,对于一般对性能要求不是很高的项目中,可以 ...
- bash: scrapy: command not found
一.场景 执行 pip install scrapy 后,安装成功且执行 import scrapy 成功 二.问题 在shell中执行 scrapy 返回 bash: scrapy: comma ...
- killall 、kill 、pkill 命令详解
killall 命令 Linux系统中的killall命令用于杀死指定名字的进程(kill processes by name).我们可以使用kill命令杀死指定进程PID的进程,如果要找到我们需要杀 ...