欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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综合演示

Html5知识点
  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>
简单登陆注册模板.html

演示结果:

Html5知识点