HTML5的初步认识

WebHTML5的学习(1)

首先
#认识前后端的关系和内容
在这里插入图片描述
前端中包括了手机和电脑的网页,也有对ios和android的区分,同时还有小程序,嵌入式操作平板和大屏仪表盘等,需要学的知识包含html,css,jQuery等。在这里插入图片描述

#document的编程可以将html文件具体分为三要素html是名词,css是用来修饰名词的形容词,而JavaScript则是名字发生动画的动词。

我接下来进入到HTML的学习中。

(1)什么是HTML
HTML是HyperTextMarkupLanguage(超文本标记语言)的简写,他不是一种编程语言,而是一种标记语言,用于告诉浏览器如何构造你的页面。他可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
HTML也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。
浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为html文件的后缀名(扩展名)

(2)B/S架构(Browser/Server,浏览器/服务器模式)
1.B/S结构是WEB兴起后的一种网络结构模式,WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端,将系统功能实现的核心部分集中到服务器上,简化了系统的开发、维护和使用。

注:C/Sclient/server客户端/服务器模式

(3)http协议(HyperTextTransportProtocol)
HTTP是超文本传输协议的缩写,它用于传送WWW方式的数据。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求,请求头包含请求的方法、URL、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应,响应的内容包括消息协议的版本,成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。

(4)URL(UniformResourceLocator)
URL就像每家每户都有一个门牌地址一样,每个网页也都有一个Internet地址。当你在浏览器的地址栏中输入一个URL或者单击一个超链接时,URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP),将Web服务器上站点的网页代码提取出来,并翻译成漂亮的网页。
URL的格式如下协议://ip:port/path
在这里插入图片描述

(5)Html元素(HTMLelement)
一个Html元素是由一个开始标签,一个结束标签,以及内容。结束标签与开始标签类似,不过结束标签在尖括号内多了一个斜线。标签决定了其内容的特性。如下,标签内的问题以段落形式进行显示。
#把script放在body最后节点把动态放在最后浏览器编译的顺序

(6)Html属性(Attributes)
元素也可以拥有属性,与元素相关的特性称为属性,属性由键值对组成。属性信息不会出现在你的实际内容里。比如添加一个class属性用于识别元素,稍后也可以根据该属性进行一些样式信息的设定或者其他事情。属性是由属性名和属性值组成,属性名与属性值之间使用等于号“=”分割,属性与属性之间使用空格“”分开,属性值通常使用单引号或者双引号括起来。
在这里插入图片描述
核心属性:大多数元素都可以使用的属性
1.id唯一标识
2.class标识一类元素
3.style样式
4.title描述信息
在这里插入图片描述
(7)Html语法
1.空白在文档中无论出现多少个空白或者换行,浏览器都解析为一个空白实体在HTML中,某些字符是预留的。例如:不能使用小于号<和大于号>,这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在HTML源代码中使用——
2.字符实体(characterentities),实体以&符开始以;结尾。以下是常见的实体
在这里插入图片描述

3.注释注释会被浏览器忽略而不被解析,用户无法看到,注释的作用是让程序员表明代码的含义,方便以后再看的时候能看明白。
< !–这是一段注释–> #注释快捷键ctrl+/
在这里插入图片描述
(8)超链接(a)
超链接可以允许我们从当前文档链接到任意其他文档(其他资源),也可以链接到文档的某个特定部分。
<ahref="http://www.baidu.com"target=“blank”>百度一下

href表示跳转的目的地,取值如下
1.ID值用于锚点跳转
2.URLURL使用path来定位文件path又分为相对路径和绝对路径
3.emial<ahref=“mailto:xxxxxxx”>Sendemailtonowhere
4.target规定在何处打开链接文档_blank_self_parent_top
在这里插入图片描述

(9)图片 img
在Html文档中代表图片。
<imgsrc="images/phone.jpg"alt="图片找不到了…“width=”200px”>
src表示图片的URL地址(必须)
alt表示替换图片的文本内容,当url地址出错时,将会显示alt的内容
width设置图片的宽度,单位为pxlheight设置图片的高度,单位为px
在这里插入图片描述
(10)表格 table
在Html文档中代表表格,通过二维数据表表示数据。Table标签经常需要配合一起使用。

thead表示表头,包含了tr以及td。
Tfoot表示表脚,包含了对表的总结信息。
tbody表示表格的表体,包含了很多caption表示表格的标题信息。
tr表示表格的行,包含td,th。

属性有1.colspan跨列数2.rowspan跨行数3.width宽度
在这里插入图片描述

1.table-align表格应该如何在文档中对齐,可以取值:
2.left,center,right•border设定表格边框特性,取整数为值,单位为px
3.cellpadding设定内容与单元格之间的距离
4.cellspacing设定单元格与单元格之间的距离
5.width设定表格的宽度
6.bgcolor设定表格的背景色
7.colgroup定义一个表中的一组列,只能作为table的子元素,位于caption元素后,其他元素之前。
8.col定义一个表中的列,并用于在所有公共单元上定义通用语义,经常作为colgroup元素的子元素。
9.span跨列数,即规定有几列可以作为同一列

(11)Html5新增标签
header:描述了文档的头部区域,于定义内容的介绍展示区域,header是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含搜索表单或logo。

nav:是一个可以用作页面导航的链接组,其中导航元素链接到其他页面或当前页面的其他部分。

section:定义文档中的节(section、区段),作为Html文档独立的功能。比如章节、页眉、页脚或文档中的其他部分,section通常包含了一组内容及其标题。

article:代表文档,页面或应用程序中独立的,完整的,可以独自被外部引用的内容,也可以嵌套使用。可以是一篇博客或者报刊中的文章,一篇论坛帖子,一段用户评论或者独立的插件,或其他任何独立的内容。

aside:元素用来表示当前页面或文章的附属信息部分,它可以包含当前页面或主要内容相关的引用,侧边栏,广告,导航条,以及其他类型的有别于主要内容的部分。

figure:标签规定独立的流内容(图像、图表、照片、代码等等)figure元素是一种元素的组合,带有可选标题,figure元素表示网页上一块独立内容,将其从网页上移除后不会对网页上的其他内容产生任何影响,figure元素所表示的内容可以是图片,统计图或代码示例,也可以是音频插件,视频插件,统计表格等。

figcaption:figcaption元素表示figure元素的标题,它从属于figure元素,必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素,但是允许放置多个其他元素。

footer:文档的底部区域,一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等。元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者,相关阅读连接以及版权信息等。与header类似,一个页面中也未限定footer元素的个数。

address:用来在文档中呈现联系信息,包括文档作者或文档维护者名字,他们的网站链接,电子邮箱,真实地址,电话号码,以及跟文档相关的联系人的所有联系信息。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 5 特性 官方详细的文档是寻找 HTML5 特性的最好地方,当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性: • 语义化标记 • Form 表单增强功能 • 视频 / 音频 • 画布(Canvas) • 可编辑内容 • 拖放 • 稳健的数据存储 检测浏览器支持 在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走: • 何时能用 • 网页设计师的浏览器支持列表 • HTML5 测试 • 布局引擎对比 你还可以运行 Javascript(用Javascript 检测浏览器特性)来检测 HTML5 特性的支持。你还应该用用Modernizr: 一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。 你可能也会想留意不断变化的"浏览器市场份额分享" — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。 值得注意的变更点 除了新的特征,你还应该记下这些重要的变更点: • 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型:<!DOCTYPE html>。它有意不使用版本,因此文档将会适用所有版本的HTML。 • 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang="en"> 将对 HTML5 有效。 • 简单易记的编码类型 你现在可以在 meta 标签中使用 "charset":<meta charset="utf-8″ /> • 不需要闭合标签 在 HTML5 中,空标签(如:br、img 和 input )并不需要闭合标签。 • 废弃的标签 下面这些标签并不被 HTML5 支持: <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp> 简单代码示例: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Document</title> </head> <body> </body> </html> 你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。 语义化标记 HTML5 新增的一些新标签除了不仅仅是更具语义的 <div> 标签的替代品,并不提供额外的功能。这些都是新增的标签:<article>、<section>、<aside>、<hgroup>、<header>,<footer>、<nav>、<time>、<mark>、<figure> 和 <figcaption>。 这些标签被除了IE 外的所有现代浏览器(Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+)支持。Javascript 提供了document.createElement(tagName) 的方法,让你可以用来创建新的 HTML5 标签。代替自己创建这些元素,你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。 你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset: • HTML5 Reset CSS • Reset5 简单代码示例: 兼容 IE 的 HTML5 页面布局 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Markup Demo: Cross Browser</title> <link rel="stylesheet" href="html5reset.css" type="text/css" /> <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> [removed][removed] <![endif]--> </head> <body> <header> <hgroup> <h1>Page Header</h1> <h2>Page Sub Heading</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <article> <header> <h1>Article Heading</h1> <time datetime="2010-05-05" pubdate>May 5th, 2010</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <section> <header> <h1>Section Heading</h1> </header> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p> <footer> <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p> </footer> </section> <section> <header> <h1>Section Heading</h1> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <figure> <img src="item-1.png" alt="Club"> <img src="item-2.png" alt="Heart"> <img src="item-3.png" alt="Spade"> <img src="item-4.png" alt="Diamond"> <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption> </figure> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p> <footer> <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p> </footer> </section> <footer> Article Footer </footer> </article> <aside> <header> <h1>Siderbar Heading</h1> </header> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p> </aside> <footer> Page Footer </footer> </body> </html> 注意:没有一个 div 标签,id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值