Html5知识点

番茄西红柿发布于2019-04-23 11:46 / 1139人阅读

摘要：学习资料周期天欢迎大家去以及总结采用的都是的知识有过时的结束请忽略初学者还是练一遍有个印象即可中文问题标签这是一个开始标签这是一个结束标签标签之间的文本叫做内容大标题小一点的标题再小一点的标题更小一点的标题元素头标签身体标签标题换行水

学习资料:http://how2j.cn/p/1036

周期: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>标题1h1>
<h2>标题2h2>
<h3>标题3h3>
<h4>标题4h4>
<h5>标题5h5>
<h6>标题5h6>

　　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">12306a>


<a href="http://www.12306.com" target="_blank">http://www.12306.coma>


<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.coma>


<a href="http://www.12306.com">
<img src="http://how2j.cn/example.gif"/>
a>

　　13.表格



<table border="1" width="200px">
  <tr>
      <td width="50px">1td>
      <td algin="center">居中td>
      <td algin="left">靠左td>
      <td algin="right">靠右td>
      <td width="80%">1td>
      <td valign="middle"  >中间td>
      <td valign="top"  >顶部td>
      <td valign="bottom"  >底部td>
      <td colspan="2" >1，2td>
      <td rowspan="2">1,3td>
      <td  bgcolor="pink">btd>
  tr>
table>

　　14.列表


<ul>
<li>无序li>
<li>列表li>
ul>

<ol>
<li>有序li>
<li>列表li>
ol>

　　15.div域span


<div>
 第一个div
div>
 
<div>
 第二个div     
div>
 
<span>
 第一个span
span>
 
<span>
 第二个span   
span>

　　16.字体


<font color="blue" size="+2">蓝色大2号字体font>

　　17.内联框架


<iframe src="http://how2j.cn/" width="600px" height="400px">
iframe>

　　18.文本框


<input type="text">


<input type="text" size="10">


<input type="text" value="有初始值的文本框">


<input type="text" placeholder="请输入账号">

　　19.密码框


<input type="password">

　　20.表单


<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" >


默认选中 <input type="radio" checked="checked" >


学习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.复选框



学习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 size="2" multiple="multiple >
 
 
 >3option>
select>

　　24.文本域



<textarea cols="30" rows="8">abc
def
textarea>

　　25.普通按钮


<input type="button" value="一个按钮">

　　26.提交按钮



<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.重置按钮



<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.图像提交



<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.按钮



<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>1980option>
 42       <option>1981option>
 43       <option>1982option>
 44       <option>1983option>
 45       <option>1984option>
 46       <option>1985option>
 47       <option>1986option>
 48       <option>1987option>
 49       <option>1988option>
 50       <option>1989option>
 51       <option>1990option>
 52       <option>1991option>                                                
 53     select>
 54       <select name="select2">
 55         <option>1option>
 56         <option>2option>
 57         <option>...option>
 58         <option>12option>                
 59       select>
 60       <s

服务器托管专线服务 html5基础知识知识点重要知识点 linux知识点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1122.html

关于HTML5，最牛逼的10本书！

摘要：学武如此，学习移动开发又何尝不是呢最近微信推出小程序内测，未来方向的专业人才必定水涨船高。上半部分涵盖了能使各类网站，特别是移动网站变快的基本概念。　　金庸小说中涉及到剑法98种，刀法33种，鞭法12种，棍法及枪法23种，掌法及腿法206种，无属性功法20种。学会任何一种都能让你成为称霸一方的武林高手。但是，要成为威震天下笑傲江湖的绝顶高手，等闲武学是做不到的。最明显的例子就是慕容复...

niuxiaowei111 2019-08-05 10:15 评论0 收藏0
html5知识点补充—其他元素介绍

摘要：在中，元素得以重新定义，它现在用来显示不正确或不相关的内容。元素的变化对元素的定义进行了很大的修改。因此，在中，元素代表小打印体，如版权信息条款或许可法律信息。因为是内嵌元素，如果有需要，你可以将它嵌入其他元素中。使用s元素显示不准确或不相关的内容以前,s元素是特意用来显示带删除线的文字的。在HTML5中，s元素得以重新定义，它现在用来显示不正确或不相关的内容。这意味着可以使用它...

instein 2019-08-02 18:18 评论0 收藏0
html5知识点补充—其他元素介绍

摘要：在中，元素得以重新定义，它现在用来显示不正确或不相关的内容。元素的变化对元素的定义进行了很大的修改。因此，在中，元素代表小打印体，如版权信息条款或许可法律信息。因为是内嵌元素，如果有需要，你可以将它嵌入其他元素中。使用s元素显示不准确或不相关的内容以前,s元素是特意用来显示带删除线的文字的。在HTML5中，s元素得以重新定义，它现在用来显示不正确或不相关的内容。这意味着可以使用它...

BigNerdCoding 2019-08-01 14:52 评论0 收藏0
html5知识点补充—footer元素的使用

摘要：使用元素创建脚注顾名思义，元素通常位于页面的底部。与类似，元素可以在单个页面上多次使用，也可以将元素放在中。示例代码使用了一个站点范围的，还在中使用了嵌套的元素。规范中讲到，元素可以包含指向相关文档的链接。使用footer元素创建脚注顾名思义，footer元素通常位于页面的底部。尽管footer通常位于某个区域或者页面的底部，但并非总是如此。footer元素旨在包含作者、网站所有者...

妤锋シ 2019-08-02 18:18 评论0 收藏0
html5知识点补充—footer元素的使用

摘要：使用元素创建脚注顾名思义，元素通常位于页面的底部。与类似，元素可以在单个页面上多次使用，也可以将元素放在中。示例代码使用了一个站点范围的，还在中使用了嵌套的元素。规范中讲到，元素可以包含指向相关文档的链接。使用footer元素创建脚注顾名思义，footer元素通常位于页面的底部。尽管footer通常位于某个区域或者页面的底部，但并非总是如此。footer元素旨在包含作者、网站所有者...

geekidentity 2019-08-01 14:49 评论0 收藏0
前端知识点总结——H5

摘要：前端知识点总结新特性新的语义标签增强型表单音频和视频绘图绘图地理定位拖动增强型表单新新的表单元素新特性数据列表本身不可见为提供输入建议列表新特性进度条左右晃动进度条具有指定进度值进度条新特性刻度尺用于标示一个值所值的范围不前端知识点总结——H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地...

el09xccxy 2019-06-26 17:33 评论0 收藏0