htmlcssjs实现快递单打印_前端基础⼊门⼀（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语⾔来实现⽹页的动态效果。
手机上可以打html与css的app最开始渲染引擎和 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" 的格式
⽐如:
<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为在新窗⼝中打开⽅式。
注意：
2.内部链接 直接链接内部页⾯名称即可 ⽐如 < a href="index.html"> ⾸页

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