微学网

热门关键词:   as  thinkphp  ecshop  xxx  php分页  商务通
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

HTML5学习心得总结(推荐)

发布时间:2020-03-05 来源:未知 点击:

Html学习总结ThcHTML5中文学习网 - HTML5先行者学习网

1.什么是html:HyperTextMarket language,超文本标记语言,是用来描述网页语言,html使用标记标签来描述网页,html不是编程语言,是一种标记语言。ThcHTML5中文学习网 - HTML5先行者学习网

2.经历过得版本:HTML2.0、HTML3.2、HTML4.0、HTML4.0.1、HTML5ThcHTML5中文学习网 - HTML5先行者学习网

3.H5新特性: ThcHTML5中文学习网 - HTML5先行者学习网

•用于绘画的 canvas 元素ThcHTML5中文学习网 - HTML5先行者学习网
•用于媒介回放的 video 和 audio 元素ThcHTML5中文学习网 - HTML5先行者学习网
•对本地离线存储的更好的支持ThcHTML5中文学习网 - HTML5先行者学习网
•新的特殊内容元素,比如 article、footer、header、nav、sectionThcHTML5中文学习网 - HTML5先行者学习网
•新的表单控件,比如 calendar、date、time、email、url、searchThcHTML5中文学习网 - HTML5先行者学习网

4.html都是由标签组成的ThcHTML5中文学习网 - HTML5先行者学习网

5.html的基本格式:ThcHTML5中文学习网 - HTML5先行者学习网

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2.     <head>  
  3.         放置一些属性信息,辅助信息。   
  4.         引入一些外部的文件。(css,javascript)   
  5.         它里面的内容会先加载。   
  6.         meta:提供关于文档的信息   
  7.         link:定义与外部资源的关系(css样式)   
  8.         style:在文档内容定义样式   
  9.         script:定义脚本程序,或者外联脚本文档   
  10.         noscript:包含浏览器禁用脚本,或不支持脚本时显示的内容   
  11.     </head>  
  12.     <body>  
  13.         存放真正的数据。   
  14.     </body>  
  15. </html>  

- DOCTYPE:声明文档的版本ThcHTML5中文学习网 - HTML5先行者学习网
- meta:告诉浏览器一些关于该文档的信息1.html注意事项:ThcHTML5中文学习网 - HTML5先行者学习网

•多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。ThcHTML5中文学习网 - HTML5先行者学习网

•想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。ThcHTML5中文学习网 - HTML5先行者学习网

•属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定书写规范。ThcHTML5中文学习网 - HTML5先行者学习网

h5全局属性:ThcHTML5中文学习网 - HTML5先行者学习网
ThcHTML5中文学习网 - HTML5先行者学习网

ThcHTML5中文学习网 - HTML5先行者学习网

文本元素ThcHTML5中文学习网 - HTML5先行者学习网

XML/HTML Code复制内容到剪贴板
  1. - br 换行   
  2. - wbr 软换行,在英文文章中,扩大缩小浏览器的时候,遇到某一个长单词的时候,<wbr>可以规定这个单词从哪里切开。  

<a> 超链接,属性:

XML/HTML Code复制内容到剪贴板
  1. 1. href:url。   
  2.   
  3. 2. targert:页面打开方式_blank新建页面打开   
  4.   
  5. 3. 锚点:也就是回到顶部那种。先在顶部定义一个id,然后在超链接中使用锚点跳去,href="#id";   
  6.   
  7. 4. 如果href中指定的协议,浏览器不能解析,就会调用应用程序,可以解析的程序就可以打开。  

•abrr 缩略语ThcHTML5中文学习网 - HTML5先行者学习网
•b 不带任何强调意义的标记一段文字,加粗ThcHTML5中文学习网 - HTML5先行者学习网
•strong 表示重要内容,加粗ThcHTML5中文学习网 - HTML5先行者学习网
•em 表示着重强调一段文字,倾斜ThcHTML5中文学习网 - HTML5先行者学习网
•i 不带任何强调意义的标记一段文字,倾斜ThcHTML5中文学习网 - HTML5先行者学习网
•cite 表示作品标题,将作品名倾斜ThcHTML5中文学习网 - HTML5先行者学习网
•del 表示从文档中删除的文字ThcHTML5中文学习网 - HTML5先行者学习网
•s 表示文字已经不再准确,也是删除线ThcHTML5中文学习网 - HTML5先行者学习网
•u 不带强调意义的给一段文字加下划线ThcHTML5中文学习网 - HTML5先行者学习网
•ins 表示加入文档的文字,也是下划线ThcHTML5中文学习网 - HTML5先行者学习网
•small 表示小号字体ThcHTML5中文学习网 - HTML5先行者学习网
•sub 表示下标文字ThcHTML5中文学习网 - HTML5先行者学习网
•sup 表示上标文字ThcHTML5中文学习网 - HTML5先行者学习网
•q 表示引自其它的内容,被q标签修饰的自己加了引号表示引用ThcHTML5中文学习网 - HTML5先行者学习网
•pre 表示格式化一段文字,也可以用来引入一段代码ThcHTML5中文学习网 - HTML5先行者学习网
•span css中使用的添加样式的模块ThcHTML5中文学习网 - HTML5先行者学习网
•div会换行,span不会换行ThcHTML5中文学习网 - HTML5先行者学习网
•<!-- -->注释ThcHTML5中文学习网 - HTML5先行者学习网

html实体ThcHTML5中文学习网 - HTML5先行者学习网

也就是在网页中使用<,>,空格等。ThcHTML5中文学习网 - HTML5先行者学习网

&lt;&gt;&nbsp;ThcHTML5中文学习网 - HTML5先行者学习网

嵌入元素ThcHTML5中文学习网 - HTML5先行者学习网

1. 嵌入图像ThcHTML5中文学习网 - HTML5先行者学习网
- img标签嵌入图像ThcHTML5中文学习网 - HTML5先行者学习网
- src属性:表示图像的路径ThcHTML5中文学习网 - HTML5先行者学习网
- alt属性:表示图像若显示不出来显示的内容ThcHTML5中文学习网 - HTML5先行者学习网
- width/height属性:设置图像的宽和高ThcHTML5中文学习网 - HTML5先行者学习网

2. 嵌入一张网页ThcHTML5中文学习网 - HTML5先行者学习网
- iframe标签表示嵌入一张网页ThcHTML5中文学习网 - HTML5先行者学习网
- src属性:表示超链接文档的地址ThcHTML5中文学习网 - HTML5先行者学习网
- width/height:该区域的宽和高ThcHTML5中文学习网 - HTML5先行者学习网
- name:给iframe命名,方便以后a标签的target属性调用&lt;a href="shiti_test.html" target="iframe"&gt;进入实体页面&lt;/a&gt;ThcHTML5中文学习网 - HTML5先行者学习网

3. 视频/音频 video/audioThcHTML5中文学习网 - HTML5先行者学习网
- scr:路径ThcHTML5中文学习网 - HTML5先行者学习网
- autoplay:自动播放视频ThcHTML5中文学习网 - HTML5先行者学习网
- controls:显示播放控件ThcHTML5中文学习网 - HTML5先行者学习网
- loop:循环播放ThcHTML5中文学习网 - HTML5先行者学习网
- width/heightThcHTML5中文学习网 - HTML5先行者学习网

4. 进度条ThcHTML5中文学习网 - HTML5先行者学习网
- progress标签ThcHTML5中文学习网 - HTML5先行者学习网
- max属性:规定任务一共需要多少工作 100%ThcHTML5中文学习网 - HTML5先行者学习网
- value属性:规定已经完成了多少任务 80%分组元素ThcHTML5中文学习网 - HTML5先行者学习网

1. p 段落标签,在开始和结束的位置上都会留下一段空行 ThcHTML5中文学习网 - HTML5先行者学习网
- 属性:align,对齐方式ThcHTML5中文学习网 - HTML5先行者学习网

2. hr 分割线ThcHTML5中文学习网 - HTML5先行者学习网
- 属性:width宽度 100px或者30%ThcHTML5中文学习网 - HTML5先行者学习网
- align:对齐方式ThcHTML5中文学习网 - HTML5先行者学习网
- size:粗细ThcHTML5中文学习网 - HTML5先行者学习网
- color:颜色ThcHTML5中文学习网 - HTML5先行者学习网

3. 有序列表ol  liThcHTML5中文学习网 - HTML5先行者学习网
- type:列表前的序标号ThcHTML5中文学习网 - HTML5先行者学习网
- start:从第几个开始ThcHTML5中文学习网 - HTML5先行者学习网

4. 无序列表ul liThcHTML5中文学习网 - HTML5先行者学习网

5. 自定义列表ThcHTML5中文学习网 - HTML5先行者学习网
- dl:表示自定义列表ThcHTML5中文学习网 - HTML5先行者学习网
- dd:表示自定义列表项ThcHTML5中文学习网 - HTML5先行者学习网
- dt:表示自定义列表标题ThcHTML5中文学习网 - HTML5先行者学习网

6. 区域ThcHTML5中文学习网 - HTML5先行者学习网
- div:声明一块区域ThcHTML5中文学习网 - HTML5先行者学习网
- span:声明一块区域 一般用于用户名密码之后的提示,例如:该用户名已被注册。ThcHTML5中文学习网 - HTML5先行者学习网
- div与span的区别:div一长列,自动换行,span一短列,不换行。ThcHTML5中文学习网 - HTML5先行者学习网

7. 图片区域ThcHTML5中文学习网 - HTML5先行者学习网
- figure图片区域,里边套img标签和figcaption和a标签等ThcHTML5中文学习网 - HTML5先行者学习网
- figcaption:表示对图片的描述<a href="http://item.jd.com/2600210.html" target="_blank"><figcaption><font size="2" color="red">华为P9:3999带回家</font></figcaption></a>8. pre:格式化一段文字或者添加代码表格元素(重要)ThcHTML5中文学习网 - HTML5先行者学习网
- 作用:格式化数据ThcHTML5中文学习网 - HTML5先行者学习网

- table 声明一个表格属性:ThcHTML5中文学习网 - HTML5先行者学习网
1.border 边框 border=1ThcHTML5中文学习网 - HTML5先行者学习网
2.width 宽度ThcHTML5中文学习网 - HTML5先行者学习网
3.cellpadding 文字与内边框的距离 cellpadding=10ThcHTML5中文学习网 - HTML5先行者学习网
4.cellspacing 单元格间距 cellspacing=0ThcHTML5中文学习网 - HTML5先行者学习网

•tr 行ThcHTML5中文学习网 - HTML5先行者学习网
1.align:对齐方式ThcHTML5中文学习网 - HTML5先行者学习网

•td 列ThcHTML5中文学习网 - HTML5先行者学习网
1.width/heightThcHTML5中文学习网 - HTML5先行者学习网
2.colspan 合并列ThcHTML5中文学习网 - HTML5先行者学习网
3.rowspan 合并行ThcHTML5中文学习网 - HTML5先行者学习网

•th 表头,会加粗,并且会居中ThcHTML5中文学习网 - HTML5先行者学习网

•caption 表格的标题ThcHTML5中文学习网 - HTML5先行者学习网

•给表格划分区域(不常用)ThcHTML5中文学习网 - HTML5先行者学习网

1.thead、tbody、tfootThcHTML5中文学习网 - HTML5先行者学习网

语义元素(不多用)ThcHTML5中文学习网 - HTML5先行者学习网

•h1~h6:表示标题ThcHTML5中文学习网 - HTML5先行者学习网
•header:表示头部ThcHTML5中文学习网 - HTML5先行者学习网
•nav:表示导航ThcHTML5中文学习网 - HTML5先行者学习网
•footer:表示尾部ThcHTML5中文学习网 - HTML5先行者学习网
•address:表示文档或article的联系信息ThcHTML5中文学习网 - HTML5先行者学习网
•aside:表示侧边栏ThcHTML5中文学习网 - HTML5先行者学习网
•section:表示主题区域ThcHTML5中文学习网 - HTML5先行者学习网
•article:表示一段独立的内容ThcHTML5中文学习网 - HTML5先行者学习网

XML/HTML Code复制内容到剪贴板
  1. <article>  
  2.         <h3>Internet Explorer 9</h3>  
  3.         <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>  
  4. </article>  
  5.   
  6.     <!--header的使用方法-->  
  7.     <header>  
  8.         <h3>Welcome to my home page</h3>  
  9.         <p>My name is Luogg</p>  
  10.     </header>  
  11.   
  12.    <!--section的使用方法-->  
  13.     <font color="blue" size="4">3.<section>的定义</font><br/>  
  14.     <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。<br/><br/>  
  15.   
  16.     <!--footer的使用方法-->  
  17.     <font color="blue" size="4">4.<footer>的使用方法:</font>  
  18.     <footer>  
  19.         <p>作者 : Luogg</p>  
  20.         <p>联系我 : <a href="http://www.cnblogs.com/luogg">luogg.blog.com</a></p>  
  21.     </footer>  
  22.   
  23.     <!--新特性之nav导航标签的使用-->  
  24.     <nav>  
  25.         <a href="../right.html">回到主页</a>  
  26.     </nav>  

框架(就是在一个页面中展示多个页面),框架标签不能写在body标签当中或下面。不然浏览器无法解析。ThcHTML5中文学习网 - HTML5先行者学习网

•frameset:框架结构ThcHTML5中文学习网 - HTML5先行者学习网
•ros:将页面分为n行ThcHTML5中文学习网 - HTML5先行者学习网
•cols:将页面分为n列ThcHTML5中文学习网 - HTML5先行者学习网
•frame:放在框架中的每个html文档ThcHTML5中文学习网 - HTML5先行者学习网
ThcHTML5中文学习网 - HTML5先行者学习网

XML/HTML Code复制内容到剪贴板
  1. <frameset rows="20%,*">  
  2.        <frame src="top.html">  
  3.        <frameset cols="15%,*">  
  4.            <frame src="left.html">  
  5.            <frame src="right.html" name="right">  
  6.        </frameset>  
  7. </frameset>  

表单元素(重点)ThcHTML5中文学习网 - HTML5先行者学习网

•作用:可以和服务器进行交互ThcHTML5中文学习网 - HTML5先行者学习网

中的属性:ThcHTML5中文学习网 - HTML5先行者学习网

1.action:定义一个URL,当点击提交按钮时,向这个URL发送数据ThcHTML5中文学习网 - HTML5先行者学习网
2.method(get/post):用于向action URL发送数据的HTTP方法。默认是get。ThcHTML5中文学习网 - HTML5先行者学习网

get和post区别:ThcHTML5中文学习网 - HTML5先行者学习网

1)get方式表单封装的数据直接显示在url上。post方式数据不显示在url上。ThcHTML5中文学习网 - HTML5先行者学习网
2)get方式安全级别较低,post级别较高。ThcHTML5中文学习网 - HTML5先行者学习网
3)get方式数据的长度,post支持大数据。•input 标签:定义输入字段,用户可在其中输入数据。ThcHTML5中文学习网 - HTML5先行者学习网

input 中 type属性:ThcHTML5中文学习网 - HTML5先行者学习网

1)type=text 文本框 ThcHTML5中文学习网 - HTML5先行者学习网
2)type=password 密码 ThcHTML5中文学习网 - HTML5先行者学习网
3)type=radio 单选按钮 name属性 ThcHTML5中文学习网 - HTML5先行者学习网
4)type=checkbox 多选按钮    ThcHTML5中文学习网 - HTML5先行者学习网

单选和多选都有默认值:checked="checked"ThcHTML5中文学习网 - HTML5先行者学习网

5)type=reset  重置按钮ThcHTML5中文学习网 - HTML5先行者学习网
6)type=submit 提交按钮ThcHTML5中文学习网 - HTML5先行者学习网
7)type=file  上传文件的输入项ThcHTML5中文学习网 - HTML5先行者学习网
8)type=button 按钮 ThcHTML5中文学习网 - HTML5先行者学习网
9)type=image 图片(也是提交按钮,)ThcHTML5中文学习网 - HTML5先行者学习网
10)type=hidden 隐藏标签(用户不用看到的,但是咱们开发时必须要使用的,可以把数据封装到隐藏标签中,和表单一起提交到后台)ThcHTML5中文学习网 - HTML5先行者学习网

选择标签ThcHTML5中文学习网 - HTML5先行者学习网

select /select>选择下拉框 option 表示内容 /optionThcHTML5中文学习网 - HTML5先行者学习网

文本域textareaThcHTML5中文学习网 - HTML5先行者学习网
 textarea 文本内容 /textareavalue属性:ThcHTML5中文学习网 - HTML5先行者学习网
对于按钮、重置按钮和确认按钮:定义按钮上的文本。ThcHTML5中文学习网 - HTML5先行者学习网

对于图像按钮:定义传递向某个脚本的此域的符号结果。ThcHTML5中文学习网 - HTML5先行者学习网

对于复选框和单选按钮:定义 input 元素被点击时的结果。ThcHTML5中文学习网 - HTML5先行者学习网

对于隐藏域、密码域以及文本域:定义元素的默认值。ThcHTML5中文学习网 - HTML5先行者学习网

注释:不能与 type="file" 一同使用。ThcHTML5中文学习网 - HTML5先行者学习网

注释:与 type="checkbox" 和 type="radio" 一同使用时,此元素是必需的。•name属性:为 input 元素定义唯一的名称。ThcHTML5中文学习网 - HTML5先行者学习网

以上这篇HTML5学习心得总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持程序员学习网ThcHTML5中文学习网 - HTML5先行者学习网

原文地址:http://www.cnblogs.com/luogg/p/5649398.htmlThcHTML5中文学习网 - HTML5先行者学习网


这就是微学网-程序员之家为你提供的"HTML5学习心得总结(推荐)"希望对你有所帮助.
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信公众号 | 框架 | 小程序 | 服务器 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

电脑版 | 移动版