首页 > > 网页制作 > css >

html与html5 总结

2018-06-24 02:08:27来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

时间:于2017年12月3日 19:35:18开始

用于: 这文章用于个人技术总结(全文转发请标明出处,小段摘抄随意)

HTML笔记
1、html标签不区分大小写，但是建议小写
2、常用标签：
可用在head部分：
　　<head>
　　　　<title>...</title> //网页标题
　　　　<meta charset="UTF-8"> //提供有关页面信息
　　　　<link rel="stylesheet" type="text/css" href="theme.css"> //链接一个外部样式表
　　　　<style>...</style> //内部样式表
　　　　<script>...</script> //内部js代码
　　</head>
　　<body>
　　　　<p>段落文本</P> //文章段落放到<p>标签里
　　　　<h1>...<h6> //文章的标题,一到六个等级的标题
　　　　<b></b> //无意义的加粗,仅文本表现加粗(没有语义)
　　　　<strong></strong> //有意义的加粗,对搜索引擎友好
　　　　<i></i> //无意义的斜体(没有语义)
　　　　<em></em> //有意义的斜体,对搜索引擎友好
　　　　<span></span> //用来组合文档中的行内元素(没有语义)
　　　　<q></q> //短文本引用(文本不需要加双引号)
　　　　<blockquote></blockquote>//长文本引用
　　　　<br/> //换行标签
　　　　<hr/> //分割线标签
　　　　$nbsp; //特殊字符空格(分号必不可少)
　　　　<address>地址</address> //地址标签,默认是斜体
　　　　<code>代码</code> //单行代码标签
　　　　<pre>代码</pre> //多行代码标签(会保留空格和换行符)
　　　　<ul> //无序列表(list-style:none;样式去前面的点)
　　　　　　<li>信息</li>
　　　　　　<li>信息</li>
　　　　</ul>
　　　　<ol> //有序列表
　　　　　　<li>...</li>
　　　　　　<li>...</li>
　　　　</ol>
　　　　<div></div> //容器标签
　　　　<table>定义表格
　　　　<thead>表头
　　　　<tbody>表格主体
　　　　<tfoot>表格页脚(脚注或表注)
　　　　<tr>表格行
　　　　<th>表头
　　　　<td>表格单元格
　　　　<caption>表格标题
　　　　<col>为表格定义属性值
　　　　<colgroup>对表格的列进行组合
　　　　<table> //表格标签   
　　　　<caption>大标题</caption>
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>小标题</th>
　　　　　　　　<th>小标题</th>
　　　　　　　　<th>小标题</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>内容</td>
　　　　　　　　<td>内容</td>
　　　　　　　　<td>内容</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>内容</td>
　　　　　　　　<td>内容</td>
　　　　　　　　<td>内容</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>内容</td>
　　　　　　　　<td>内容</td>
　　　　　　　　<td>内容</td>
　　　　　　</tr>
　　　　</tbody>
　　　　</table>
　　　　<a href="网址">链接显示的文本</a> //超链接标签
　　　　<img src="图片地址" alt="图片不显示时的替换文本" title="提示文本"/> //插入图片
　　　　<form method="get/post" action="服务器文件(save.php)"></form> //表单标签
　　　　<input type="test/password" name="名称" value="值"/> //输入框
　　　　<textarea rows="行数" cols="列数">文本</textarea> //在表单中大段文字用
　　　　<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
　　　　/*单选框radio与复选框checkbox checked="checked"为默认选中*/
　　　　<option value="提交值">选项</option> //下拉框
　　　　<form action="save.php" method="post">
　　　　<label for="a">爱好</label> //为input元素定义标注(for与input的id绑定,点击label也可以触发控件)
　　　　<select id="a"> //下拉框例子
　　　　<option value="看书">看书</option>
　　　　<option value="旅游" selected="selecred">旅游</option>
　　　　<option value="运动">运动</option>
　　　　<option value="购物">购物</option>
　　　　</select>
　　　　</form>
　　　　<input type="submit" value="提交"/> //表单提交按钮
　　　　<input type="reset" value="重置"/> //表单重置按钮
　　</body>
3.语义化的作用:更容易被搜索引擎收录.
4.html的注释:<!--这是html的注释-->

 

5.HTML5新增表单元素

 　　<form action="#" method="get">    　　//表单元素  action属性指这个表单要用哪个后台文件执行   method属性指要用“get”或者“post”方法传表单

　　　　<input type="email" name="user_name" id="">       //会检测用户是否输入email格式  如图：
                                               
　　　　<input type="url" name="user_url" id="">       //url格式输入    如图：
                                                                
　　　　<input type="number" name="user_number" value="1" max="100" min="1" step="10">       //数字格式输入  max最大值  min最小值  step按一次加多少
                                                                           

              <input type="range" name="user_range" value="1" max="100" min="1" step="10">   //滑动块    与number相识  只是显示的效果不同

                                                               　　　　

　　　　<input type="date" name="user_date" >         //日期  如图：
　　　　                                             　　

　　　　/*与之类似的还有 month week time 这里我就不一一举例了*/

　　　　<input type="search" name="user_search" >   //搜索  与一般Input相比多了一个x

 　　　　　　　　　　　　　　　　　　　

　　　　<input type="tel" name="user_tel" >        //电话号码的输入 （除了语义，与普通input比看不出有什么区别）

　　　　<input type="color" name="user_color" >    //颜色   （很强大）

　　　　　　　　                      

 

　　　　<input type="file" name="user_file" >    //提交文件
　　　　<input type="img" name="user_img" >    //提交图片
　　　　<input type="submit" value="提交">              //必不可少的提交表单  <button type="email">提交<button> 相同效果
　　</form>

 <datalist>元素    与<input>元素中的list属性 配套使用,例子:

　　<form action="#" method="get">
　　　　请输入:<input type="text" list="list1">
　　　　<datalist id="list1">
　　　　　　<option label="1" value="IE"></option>
　　　　　　<option label="2" value="火狐"></option>
　　　　　　<option label="3" value="谷歌"></option>
　　　　　　<option label="4" value="欧朋"></option>
　　　　　　<option label="5" value="苹果"></option>
　　　　</datalist>
　　　　<button type="submit">提交</button>
　　</form>
                              

  6.HTML5新增表单属性

autocomplete="on"||autocomplete="off" //自动完成功能 例子:
　　<form action="#" method="get">
　　　　用户名: <input type="text" name="username" autocomplete="on"/> <br/>
　　　　密码: <input type="text" name="password" autocomplete="off"/> <br/>
　　</form>

                         

 

autofocus="on" //默认获得焦点(加载页面后该属性所在的元素默认获得焦点)

multiple          //提交多份文件或者图片

pattern="" //自定义正则表达式
placeholder="文本框提示信息" //文本框提示信息

  　　

required="required"           //不能为空

7.canvas画布

<canvas>这里的文字会在浏览器不支持canvas的时候显示</canvas>   //默认画布是width:300,height:150

由于canvas需要用到js  这里就不详细说明了  到时候在js总结里说  或者重新再写一个专门讲canvas的

 

*这篇html小结 大致就写到这里了,没基础的同学还是需要看书或者看视频详细的写一下并试着coding,这篇小结主要还是用于回顾一下学过的知识,加深影响. 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Task4

下一篇：CSS实现响应式布局(自动拆分几列)

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签