html取modelandview值_前端基础⼊门⼀(HTML)
学习⼤纲
了解常⽤浏览器
掌握WEB标准
理解标签语义化
掌握常⽤的排版标签
掌握常⽤的⽂本格式化图像链接等标签
掌握三种列表标签
掌握表格标签
掌握表格标签
掌握表单标签
HTML
能够写出基本的页⾯(⾥⾯包含图⽚、各种标签和链接)
开发⼯具
我们主要⽤的开发⼯具有chrome、hbuilder、Photoshop
浏览器显⽰
浏览器是⽹页显⽰、运⾏的平台,常⽤的浏览器有IE、⽕狐(Firefox)、⾕歌(Chrome)、Safari和Opera等。我们平时称为五⼤浏览器。
浏览器内核(理解)
渲染引擎 :它负责取得⽹页的内
JS 引擎。渲染引擎
渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎
浏览器内核⼜可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)
容(HTML、XML、图像等等)、整理讯息(例如加⼊ CSS 等),以及计算⽹页的显⽰⽅式,然后会输出⾄显⽰器或打印机。浏览器的内核的不同对于⽹页的语法解释会有不同,所以渲染的效果也不相同。JS 引擎
JS 引擎 则是解析 Javascript 语⾔,执⾏ javascript语⾔来实现⽹页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独⽴,内核就倾向于只指渲染引擎。有⼀个⽹页标准计划⼩组制作了⼀个 ACID 来测试引擎的兼容性和性能。内核的种类很多,如加上没什么⼈使⽤的⾮商业的免费内核,可能会有10多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。
了解⼀点:移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android⼿机⽽⾔,使⽤率最⾼的就是Webkit内核,⼤部分国产浏览器宣称的⾃⼰的内核,基本上也是属于webkit⼆次开发。
iOS以及WP7平台上,由于系统原因,系统⼤部分⾃带浏览器内核,⼀般是Safari或者IE内核Trident的
Web标准
web标准的好处
1、让Web的发展前景更⼴阔
2、内容能被更⼴泛的设备访问
3、更容易被搜寻引擎搜索
4、降低⽹站流量费⽤
5、使⽹站更易于维护
6、提⾼页⾯浏览速度
web标准的结构
结构标准:结构⽤于对⽹页元素进⾏整理和分类,咱们主要学的是HTML。 最重要
表现标准:表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式,主要指的是CSS。
⾏为标准:⾏为是指⽹页模型的定义及交互的编写,咱们主要学的是 Javascript
HTML初识
HTML(英⽂Hyper Text Markup Language的缩写)中⽂译为“超⽂本标签语⾔”。是⽤来描述⽹页的⼀种语⾔。
所谓超⽂本,因为它可以加⼊图⽚、声⾳、动画、多媒体等内容,不仅如此,它还可以从⼀个⽂件跳转到另⼀个⽂件,与世界各地主机的⽂件连接。
<h1> 我是⼀个⼤标题 </h1>
注意: 体会 ⽂本 标签 语⾔ ⼏个词语
HTML 指的是超⽂本标记语⾔ (Hyper Text Markup Language)
HTML 不是⼀种编程语⾔,⽽是⼀种标记语⾔ (markup language)
标记语⾔是⼀套标记标签 (markup tag)
总结: HTML 作⽤就是⽤标记标签来描述⽹页,把⽹页内容在浏览器中展⽰出来。
HTML⾻架格式
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
⾻架结构解析
1 HTML标签:
作⽤所有HTML中标签的⼀个根节点。 最⼤的标签 根标签
2 head标签: ⽂档的头部
⽂档的头部描述了⽂档的各种属性和信息,包括⽂档的标题、在 Web 中的位置以及和其他⽂档的关系等。绝⼤多数⽂档头部包含的数据都不会真正作为内容显⽰给读者。
注意在head标签中我们必须要设置的标签是title
3.title标签: ⽂档的标题
作⽤:让页⾯拥有⼀个属于⾃⼰的标题。
4.body标签:⽂档的主体 以后我们的页⾯内容 基本都是放到body⾥⾯的
body 元素包含⽂档的所有内容(⽐如⽂本、超链接、图像、表格和列表等等。)
HTML标签分类
在HTML页⾯中,带有“< >”符号的元素被称为HTML标签,如上⾯提到的 HTML、head、body都是HTML⾻架结构标签。所谓标签就是放在“< >” 标签符中表⽰某个功能的编码命令,也称为HTML标签或 HTML元素
1.双标签
<;标签名> 内容 </标签名>
该语法中“<;标签名>”表⽰该标签的作⽤开始,⼀般称为“开始标签(start tag)”,“</标签名>” 表⽰该
标签的作⽤结束,⼀般称
为“结束标签(end tag)”。和开始标签相⽐,结束标签只是在前⾯加了⼀个关闭符“/”。
⽐如 <body>我是⽂字 </body>
2.单标签
<;标签名 />
单标签也称空标签,是指⽤⼀个标签符号即可完整地描述某个功能的标签。
⽐如 <br />
HTML标签关系
标签的相互关系就分为两种:
1.嵌套关系
<head> <title> </title> </head>
2.并列关系
<head></head>
<body></body>
HTML常⽤标签
⾸先 HTML和CSS是两种完全不同的语⾔,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。
HTML标签有很多,这⾥我们学习最为常⽤的,后⾯有些较少⽤的,我们可以查下⼿册就可以了。
排版标签
标题标签(熟记)
单词缩写: head 头部. 标题 title ⽂档标题
为了使⽹页更具有语义化,我们经常会在页⾯中⽤到标题标签,HTML提供了6个等级的标题,即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
其基本语法格式如下:
<hn> 标题⽂本 </hn>
段落标签(熟记)
<p> ⽂本内容 </p>
⽔平线标签(认识)
<hr />是单标签
换⾏标签(熟记)
<br />
div span标签(重点)
div span 是没有语义的 是我们⽹页布局主要的2个盒⼦ css+div
div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合⽹页。
span, 跨度,跨距;范围
语法格式:
<div> 这是头部 </div> <span>今⽇价格</span>
⽂本格式化标签(熟记)
在⽹页中,有时需要为⽂字设置粗体、斜体或下划线效果,这时就需要⽤到HTML中的⽂本格式化标签,使⽂字以特殊的⽅式显⽰。
b i s u 只有使⽤ 没有 强调的意思 strong em del ins 语义更强烈
标签属性
使⽤HTML制作⽹页时,如果想让HTML标签提供更多的信息,可以使⽤HTML标签的属性加以设置。其基本语法格式如下:
<;标签名属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
在上⾯的语法中,
1.标签可以拥有多个属性,必须写在开始标签中,位于标签名后⾯。
2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值,省略该属性则取默认值。
采取 键值对 的格式 key="value" 的格式
⽐如:
html ul标签
<hr width="400" />
属性 是 宽度
值 是 400
图像标签img (重点)
单词缩写: image 图像
HTML⽹页中任何元素的实现都要依靠HTML标签,要想在⽹页中显⽰图像就需要使⽤图像标签,接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下:
该语法中src属性⽤于指定图像⽂件的路径和⽂件名,他是img标签的必需属性。
<img src="图像URL" />
链接标签(重点)
单词缩写: anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的
在HTML中创建超链接⾮常简单,只需⽤标签环绕需要被链接的对象即可,其基本语法格式如下:
<a href="跳转⽬标" target="⽬标窗⼝的弹出⽅式">⽂本或图像</a>
href:⽤于指定链接⽬标的url地址,当为标签应⽤href属性时,它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超⽂本引⽤
target:⽤于指定链接页⾯的打开⽅式,其取值有self和blank两种,其中self为默认值,blank为在新窗⼝中打开⽅式。
注意:
1.外部链接 需要添加 www.baidu

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。