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元素旨在包含作者.网站所有者.版权数据.网站规章 ...
随机推荐
- 小程序从后台输出的代码为HTML实体字符如何解决？
最近在做一个小程序的考试系统,从后台调出的数据是这个样子的 那么我遇到这个问题的时候想到的微信小程序的富文本即(wxParse),使用过wxParse的都知道,富文本必须得具体到单个的数据上才能使用, ...
- 嵌入Python | 调用Python模块中有参数的函数
开发环境Python版本:3.6.4 (32-bit)编辑器:Visual Studio CodeC++环境:Visual Studio 2013 需求说明前一篇<在C++中嵌入Python|调 ...
- 百度搜索(jsonp)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>百 ...
- arcis api for js 值 3.17 本地部署
1. 引言 在学习 ArcGIS API 的过程中,如果我们引用在线的 API,在没有网络或者网络差的情况下,会影响到我们的学习效率,本篇文章就是为了解决这个问题.下载 ArcGIS API 之后,部 ...
- DB2 存储过程创建、系统表
前段时间做了数据表拆分,进行数据迁移,用到一些SQL命令,语句记录下来 db2look是DB2用于生成数据库DDL语句的一个工具: 命令:db2look -d DBname -a -e -p -i u ...
- spring配置文件中context:property-placeholder导入多个独立的配置文件
spring中 context:property-placeholder 导入多个独立的 .properties配置文件? Spring容器采用反射扫描的发现机制,在探测到Spring容器中有一个 o ...
- window安装mysql5.7解压版（解决乱码问题）
♣安装mysql两种方法 ♣下载mysql5.7解压版 ♣配置步骤 ♣解决服务无法启动 ♣解决乱码 1.安装mysql两种方法 MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果 ...
- 第四章——训练模型（Training Models）
前几章在不知道原理的情况下,已经学会使用了多个机器学习模型机器算法.Scikit-Learn很方便,以至于隐藏了太多的实现细节. 知其然知其所以然是必要的,这有利于快速选择合适的模型.正确的训练算法. ...
- 如何深度复制一个javascript对象
前言 最近有人问我,如何将一个对象复制一份,因为他遇到了一个需求,需要将后端获取的数据,保存一份,原始数据会因为交互而发生变化,最终需要对比两份数据的异同. 他是一个刚入行的小朋友,他的实现方式就是新 ...
- git回退到某个历史版本
1. 使用git log命令查看所有的历史版本,获取某个历史版本的id,假设查到历史版本的id是139dcfaa558e3276b30b6b2e5cbbb9c00bbdca96. 2. git res ...