品牌展示型网站有哪些,做交互设计的网站,南京个人做网站,wordpress 腾讯qq登陆一.初识HTML
1.1 HTML 简介 HTML 全称为 HyperText Mark-up Language#xff0c;翻译为超文本标签语言#xff0c;标签也称作标记或者元素。HTML 是目前网络上应用最为广泛的技术之一#xff0c;也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本翻译为超文本标签语言标签也称作标记或者元素。HTML 是目前网络上应用最为广泛的技术之一也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本HTML 文本可以说明文字、图形、动画、声音、表格、链接等。 超级文本标记语言是万维网Web编程的基础也就是说万维网是建立在超文本基础之上的。超 级文本标记语言之所以称为超文本标记语言是因为文本中包含了所谓“超级链接”和存在媒体文件也 就是超越了普通文本文件。 HTML 的结构包括头部Head、主体Body两大部分其中头部描述浏览器所需的信息而主 体则包含所要说明的具体内容。需要说明的是 HTML 不是编程语言而是一种描述性的语言用于描述 超文本中内容的显示方式。比如文字以什么颜色、大小显示图片以什么尺寸、位置来显示等。这些 描述都是用 HTML 标签来描述的。
1.2HTML历史 HTML 的前身是 SGML 语言SGML 的前身是 GML 语言。GMLGeneralized Markup Language通用 标签语言是一种 IBM 格式化文档语言用于就其组织结构、各部件及其之间的关系进行文档描述。GML 将这些描述标记为章节、重要小节和次重要小节通过标题的级来区分、段落、列表、表等。GML 是 SGMLStandardGeneralized Markup Language标准通用标记语言的先驱和基础SGML 是当 今创建结构化文档描述语言规则的战略集合。 HTML于1990年出现web之父 Tim Berners-Lee 发布了《HTML标签》 的论文借用SGML的标记语 法。 IETF互联网工程任务组推出HTML2.0并且在逐步的完善过程不同的组织对于HTML的语法标 记等都有不同的处理模式出现百家争鸣的现象。随着发展W3C 组织代替IETF组织成为了新的HTML标准后续HTML有了迅速的发展。至1999年HTML4.01标准的发布成为了HTML发展非常重要 的一个里程碑在web中大量使用沿用至今。 此后W3C组织发布XHTML1.0期望以XML的标准来约束HTML更加的规范对HTML进行了语法非 常严格的规范但是又没有增加新的标签或者特性。在某种程度上来说这是好事规范了HTML语法 的标准。但是接下来W3C非(sang)常(xin)大(bing)胆(kuang)的推出了它的XHTML2.0并且不向前兼 容以至于甚至不兼容HTML。这就是web的异常灾难了。 2004年以Opera公司的Lan Hickson发起了在HTML上的扩展和web应用适配的活动被W3C拒绝。 于是Opera、Apple、Mozilla自发组织WAHTWG组织开始就HTML的新标准进行自行维护并依托于web forms2.0和web app 1.0标准开始研发HTML5的语法标准。反观W3C在XHTML的道路上坎坷不断终于 在2010年前后W3C颁布发表停止了XHTML2的继续维护。开始以WAHTWG的研究为基础开发研发HTML 5语法标准。 发展至今HTML 5已经被大部分浏览器兼容并且大量应用于web网站中。如图1-1就是主要版本的 变迁过程。 图1-1
从初期的网络诞生后已经出现了许多HTML版本下图1-2就是主要版本发布的时间。 图1-2
在1990年万维网之父Tim Berners-Lee图1-3搭建了全球第一个web站点http://info.cern.c h/为了纪念到目前为止该站点还可以访问内容也是当年的那个页面图1-4。 图1-3 图1-4
1.3 HTML特点 简单灵活 可扩展 平台无关性 二.开发准备工作
2.1环境的安装和配置 任何技术或者编程语言在开始开发使用的时候首先都会进行环境的安装和配置HTML也不例 外那么HTML的开发需要哪些准备工作呢
2.1.1开发环境 HTML作为web开发的基石一直以简单著称所以开发HTML只需要简单的记事本工具即可如EditPlus、sublime、VSCode等等当然主流的编程IDE绝大多数都是支持HTML的开发的如eclipse、IntelliJ IDEA、pycharm等当然也有专门前端开发的IDE--WebStorm、Hbuilder等在开发的前期建议使 用记事本工具以便于练习代码的手感等基础功打好之后就可以使用这些IDE开发提高开发的效 率了。
2.1.2运行环境 HTML是web页面的基石所以运行环境就是主流的浏览器。建议使用Google公司的Chrome浏览 器。
2.2浏览器的历史 20世纪中后期互联网已经初具雏形。到20世纪90年代全球进入互联网时代浏览器成为人们获 取互联网信息不可或缺的工具。经过数十年发展浏览器技术已愈发成熟产品也呈现出多样化态势 主流的产品包括了微软公司的Internet Explorer、苹果公司的Safari、Mozilla开源社区的Firefox、Opera公 司开发的Opera浏览器以及Google公司推出的Chrome浏览器等。 简单地说浏览器是一种渲染和呈现网页的软件。互联网在形成之初浏览器只支持纯文本展示。 随着W3C对Web技术的推进与标准化现在的浏览器已经可以呈现丰富的多媒体信息如图像、声音、 视频和Flash动画等。同时通过对脚本语言的支持实现用户与网页之间的互动从而大大增强了网络信 息浏览的用户体验。 浏览器的历史要追溯到1990年那时的浏览器只能显示纯文本。1993年伊利诺斯州立大学的超级 计算应用国家中心发布了第一个支持图形渲染的浏览器—— Mosaic从那之后互联网开始呈爆炸性的 趋势增长Mosaic浏览器的诞生为图形化的网页设计奠定了基础。 1994年Netscape公司发布了Navigator浏览器。该浏览器继承了Mosaic建立起来的商业模式即在 网上免费发布产品以建立广泛的用户基础。Navigator迅速取代了Mosaic成为了用户的首选。 不过这种状态没有持续多长时间。不久微软看到了互联网的潜力1995年他们开发了IE(Internet Explorer)浏览器。由于微软将IE与流行的桌面操作系统Windows进行捆绑销售使得用户无须 安装第三方浏览器即可方便地进行网页浏览。随着Windows操作系统用户数量不断增多Internet Explorer的用户群开始持续增长不断蚕食Netscape公司所占有的浏览器市场第一次浏览器大战以微 软的IE浏览器大获全胜网景公司破产结束。 Netscape随后调整了自身战略开放其源代码成立了Mozilla来应对微软的挑战。此举虽然未能 挽回Netscape的市场占有率但却催生了今天广受欢迎的Firefox浏览器。在Mozilla成立的初期Mozilla项目吸引了大量开发者为之贡献代码和智慧至2002年它已发展成一个稳定而强大的互联网套件。Mozilla 1.0的出现被视为其里程碑同年衍生出Phoenix后改名Firebird最后又改为Firefox。之后 广为人知的浏览器Firefox 1.0终于在2004年正式发布。 另外开源浏览器引擎WebKit也被许多浏览器产品所使用。WebKit的前身是KDE项目的HTML渲染引 擎KHTML和JavaScript执行引擎。苹果公司将WebKit移植到了Mac OS上并于2003年发布了基于WebKit的Safari浏览器。Google于2008年推出的Chrome浏览器也采用了WebKit内核。 谷歌的掀起的第二次浏览器大战微软的IE浏览器失败谷歌的Chrome浏览器成为了大赢家。到了2010年随着移动互联网的发展微软也自己放弃了IE浏览器的开发和维护使用WebKit内核研发了全 新一代浏览器Edge浏览器试图重新打造自己的浏览器市场但是目前来看成功的概率不高。
2.3几款主要的浏览器 目前浏览器市场份额最高的是谷歌的Chrome浏览器其次是火狐浏览器Mozilla Firefox、微软 的Edge浏览器、微软的IE浏览器、Opera浏览器等。 在浏览器的发展历程中有几个主流浏览器是必定会被写入互联网发展史的。这些浏览器包括Mosaic浏览器、网景浏览器(Netscape Navigator)、IE浏览器Internet Explorer、Opera浏览器、Mozilla Firefox浏览器、Chrome等。 至于国内的360、搜狗这些双核浏览器其实质就是使用了Chrome的webkit内核和微软的IE内核的 包装品方便了普通用户的使用开发者建议使用谷歌的Chrome浏览器兼容性很高同时提供了方 便好用的程序员调试工具。
2.4W3C简介万维网联盟
2.4.1W3C的由来 万维网World Wide Web是作为欧洲核子研究组织的一个项目发展起来的在那里 Tim BernersLee 开发出万维网的雏形。Tim Berners-Lee - 万维网的发明人 - 目前是万维网联盟的主任。W3C 在 1994年被创建的目的是为了完成麻省理工学院MIT与欧洲粒子物理研究所CERN之间的协同工作 并得到了美国国防部高级研究计划局DARPA和欧洲委员会European Commission的支持。 万维网联盟World Wide Web ConsortiumW3C又称W3C理事会。1994年10月在麻省理工学院 计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯·李。 万维网联盟是国际最著名的标准化组织。1994年成立后至今已发布近百项相关万维网的标准对 万维网发展做出了杰出的贡献。目前万维网联盟拥有来自全世界40个国家的400多个会员组织已在 全世界16个地区设立了办事处。2006年4月28日,万维网联盟在中国内地设立首个办事处。 W3C 致力于实现所有的用户都能够对 web 加以利用不论其文化教育背景、能力、财力以及其身 体残疾。W3C 同时与其他标准化组织协同工作比如 Internet 工程工作小组Internet Engineering Task Force、无线应用协议WAP以及 Unicode 联盟Unicode Consortium。 W3C 由美国麻省理工学院计算机科学和人工智能实验室 (MIT CSAIL)总部位于法国的欧洲信息数学 研究联盟 (ERCIM) 和日本的庆应大学Keio University联合运作并且在世界范围内拥有分支办事处。
2.4.2.W3C的贡献 W3C为解决 Web 应用中不同平台、技术和开发者带来的不兼容问题保障 Web 信息的顺利和完整 流通万维网联盟制定了一系列标准并督促 Web 应用开发者和内容提供者遵循这些标准。标准的内容 包括使用语言的规范开发中使用的导则和解释引擎的行为等等。W3C也制定了包括XML和CSS等的众多 影响深远的标准规范。 但是W3C 制定的 web 标准似乎并非强制而只是推荐标准。因此部分网站仍然 不能完全实现这些标准。特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代 码。 W3C 最重要的工作是发展 Web 规范称为推荐Recommendations这些规范描述了 Web 的通 信协议比如 HTML 和 XHTML和其他的构建模块。每项 W3C 推荐的发展是通过由会员和受邀专家组 成的工作组来完成的。工作组的经费来自公司和其他组织并会创建一个工作草案最后是一份提议推 荐。一般来说为了获得正式的批准推荐都会被提交给 W3C 会员和主任。
2.4.3中国W3C大事件 2011年1月11日 腾讯公司签约加入万维网联盟World Wide Web ConsortiumW3C双方达成 战略合作关系将共同参与包括web App、HTML5等新互联网技术标准的研究和制定推动中国互联网 产业快速发展。 2011年9月15日消息百度纳斯达克证券代码BIDU已经加入万维网联盟W3C。百度在加 入万维网联盟之后将能够与全球500家IT和互联网企业联手共同研究和制定互联网开放平台及无线互 联网技术等相关的国际互联网网络标准。 2013年1月21日W3C宣布将北京航空航天大学(BUAA)加入其主机构列表中使其成为全球第四所 具备该机构主机资格的高校以及近15年来的首个全新加入的主要机构。北航成为继麻省理工学院、法国INRIA、日本庆应义塾大学之后的第四所高校主机机构。
2.5HTNL语法
语法结构HTML 标签。
标签 属性值内容标签 p是 HTML 中的段落标签下面以p为例来详细解释标签。 语法格式HTML 标签如图2-1所示 图2-1 语法解析 标签通常是成对出现的分为开始标签p和结束标签(/p)结束标签只是在开始标签前加一个斜 杠“/”。标签可以有属性align属性必须有值(center )。 开始标签与结束标签中包含的内容称之为区 域。标签不区分大小写p和P是相同的。
2.6网页分类
HTML 使用标签编写网页网页基本上可以分为 2 类。 静态网页 HTML 静态网页是指在不修改网页源文件的情况下网页无论在何时何地被浏览都将显示相同的内 容网页的内容不会发生变化。静态网页文件的扩展名包括 html,htm 等。 动态交互式网页 交互式网页是指用户可以提供给网站信息网站根据用户提交的信息响应用户的要求。如网上 注册、论坛、调查等等。在这门课的最后部分我们会体验交互式网页在第二学期将深入学 习。交互式网页文件的扩展名包括 aspxjspphpasp 等。 三.HTML的常用标签
3.1第一个HTML程序 |-- 第一步创建一个文本文档命名为xxx.html名称任意但是后缀名必须是HTML |-- 第二步使用工具打开这个文档在里面编写如下代码 !DOCTYPE htmlhtml langen
headmeta charsetUTF-8title我的第一个HTML页面/title
/head
bodyhello HTML,I am shuaigeliu/body
/html 运行代码使用浏览器打开页面结果如下图3-1 图3-1 在上面的例子中用到了 基本的5个标签除了doctype HTML头信息、meta、title标签外其余的三 个标签构成了 HTML文档的结构HTML 文档结构包括三个部分如图3-2所示。 图3-2 HTML标签 html标签表示网页文件的开始,应该把它放在文档的最外层doctype不算其他所有的标签都应 该放在html1和/html1之间。 HEAD 标签 head表示头部标签head标签中通常放title标签、meta标签、style标签等。所以head标签主要用 来放一下用来定义页面属性的标签。 BODY标签 body表示主体标签网页上所有要显示的内容都放在这个标签内。 代码演示HTML文档结构
!DOCTYPE htmlhtml ①head ②titleHTML 的标签/title ③/head ④body ⑤!—在这里写注释-- ⑥我的第一个网页/body ⑦/html ⑧
代码解析 ① html 表示网页的开始。 ② head 表示头部的开始。 ③ title 表示网页的标题标题内的文本将显示在浏览器的标题栏。 ④ 表示头部结束。 ⑤ 表示正文部分的开始。 ⑥ !-- -- 这对标签称为注释标签!-- 是注释的开始 --是注释的开始 -- 是注释的结束。它的作用是提醒自己 或帮助用户了解该文件的内容所以注释标签不会显示在浏览器中。 ⑦ 表示正文部分的结束。 ⑧ 表示网页结束。
META标签 网页的标签中除了包含 title 标签外还包括了 meta 标签 meta 标签提供了关于网页的 信息包括作者、关键字、网页编码、自动刷新等。
!DOCTYPE htmlhtml headmeta http-equivContent-Type contenttext/html; charsetUTF-8 charsetUTF-8/ ①titleHTML 简介/title/headbody使用 meta 标签确定编码格式。/body
/html
代码解析
① 这是meta标签标签中的 charset 表示当前网页的编码格式值 GB2312 表示简体中文编 码也就是说网页中的文字显示为简体中文这时就要求操作系统中安装 GB2312 字符集否则就会显 示乱码不过中文操作系统中已经安装了。如果在英文操作系统中浏览了 GB2312 编码的网页就会出现 乱码因为英文操作系统中没有GB2312 字符集。我们在浏览网页时偶尔会遇到网页显示乱码多数是 因为 META标签中的编码设置不正确。现在一般建议都设置为UTF-8这种Unicode编码。常见的编码见下 表表3-1 网页的常用编码有 GB2312、UTF-8、BIG5、GBK 1 GB2312 是简体中文字符集主要用于中国大陆和新加坡。 2. UTF -8 可以理解为通用字符集。 3 BIG5 是繁体中文字符集主要在台湾和香港地区使用。 4 GBK 是 GB2312 的后续标准添加了更多的汉字和特殊符号。 表3-1 doctype网页文档声明用来声明HTML遵循的标准建议都遵循HTML5这个标准。 网页注释HTML的标签使用 -- 这个里面的就是注释!-- 这个里面的就是注释 --。
3.2常用标签 HTML 中有很多的标签包括文本标签段落标签等下面我们介绍一些常用标签。见下表表3- 2。 表3-2
3.2.1strongb等标签 strong和b标签都是用来加错字体标签这两个标签显示效果一样但是其实质使用场景不同的。b标签就是加粗文本而strong有强调内容的意思但是一般我们不用关心这个问题对于我们开发者而 言效果一致所以一般都是使用b标签。 em、i标签都是加斜文本的标签现在我们一般使用i标签加斜问题em标签有存在强调的意思现 在随着css3的使用而慢慢的用来标注css的字体图标。 del标签用来加删除线u标签用来加下划线。
!DOCTYPE htmlhtmlheadmeta charsetutf-8 /title粗体 | 斜体 | 下划线/title/headbodyb粗体/b strong也是粗体/strongi斜体/iem也是斜体/emu下划线/udel删除线/del ①/body
/html 代码解析 ① b 粗体的开始/b 粗体的结束。 i 斜体的开始 /i斜体的结束。 u 下划线的开始 /u下划线的结束。 所示的效果如下图图3-3 图3-3 3.2.2br、hr标签 br 标签用来换行hr标签用来做水平分割线
!DOCTYPE htmlhtmlheadmeta charsetutf-8 /title换行 | 分割线/title/headbody!-- HTML中内容不会自动换行的需要使用br标签完成 --第一行br ①第二行hr width800 size1 noshade ②这个是一个分割线/body
/html 代码解析 ① br标签表示换行当浏览器遇到 br 标签时就另起一行来显示 br 后面的文字。 ② 水平线标签可以设置长度和宽度默认长度100% 运行结果如图3-4 图3-4
注意网页源代码中的回车在浏览器中并不表示换行。
3.2.3p标签
p标签表示段落
!DOCTYPE htmlhtmlheadmeta charsetutf-8 /title段落/title/headbodyp aligncenter ①font color#FF0000第一个段落/font ②/pp alignleft第二个段落/p/body
/html代码解析 ① p标签表示段落两个相邻的p标签之间会空一行。如图 3-5 所示的效果align是段落的对齐属 性有三个值“le“center”“right”,分别表示居左对齐居中对齐居右对齐。p与br有些相似都表 现出了换行br换行时行与行之间不空行。 ② font标签用来修饰字体color 属性表示字体的颜色#FF0000是颜色值。 图3-5 注意网页中的颜色用 # 开头连接 6 位十六进制数表示如 #336699。
3.2.4sub、sup、pre、span标签 SUB是下标标签 SUP是上标标签它们属于文本标签。pre用来原样输出内容。span标签是一个标 准行内标签一般用来装饰包裹的文本内容常见于装饰文本。
!DOCTYPE htmlhtmlheadmeta charsetutf-8 /title常见标签/title/headbodyp二的三次方2sup3/sup br数组a下标为2a[sub2/sub] brhrspan stylecolor: purple;font-size: 20px这个是一个标准的行内标签/spanbrpre静夜思 -- 李白床前明月光疑是地上霜。举头望明月低头思故乡。/pre/p/body
/html 代码运行结果如下图3-6 图3-6 行内标签指的是如a、span这些标签这种标签的特点是标签只占据内容部分不会占据其他部 分这样的话标签的内容如果可以在一行中展示则不会换行只到沾满一行后换行输出
3.2.5HN、div标签 hn标签指的是h1、 h2、 h3、 h4、 h5、 h6这六个标题标签。主要用来装饰标题。 div标签是一个标准的块标签主要用来布局。
!DOCTYPE htmlhtmlheadmeta charsetutf-8 /title常见标签/title/headbodyh11 号标题/h1h22 号标题/h2h33 号标题/h3h44 号标题/h4h55 号标题/h5h66 号标题/h6hrdiv这个是一个div/divdiv这个是第二个div标签/div/body
/html 运行结果如退3-7 图3-7 块标签指的是div、p、hr、hn这些标签这种标签和行内标签不同即便是内容不够一行也会 沾满一行这样就其他必须换行输出。
3.2.6 HTML5 提供的新标签 HTML5是HTML从传统的web端开始兼容移动互联网的重要标志h5为HTML提供了大量好用的标 签如布局使用的三个标签header、section、footer标签用来播放视频和音频的多媒体标签video、audio标签等参考表3-3。 标签名称 作用 header 定义页面的顶部页眉内容 article 主要是用来表示文章内容的 section 于对网站或者应用程序页面上的内容进行分块 nav 用作页面导航的链接组 aside 当前页面或文章的附属信息部分 footer 上层父级内容区块或是一个根区块的脚注 hgroup hgroup元素是将标题及其子标题进行分组的元素。hgroup 元素通常会将h1~h6 元素进 行分组譬如一个内容区块的标题及其子元素算一组 address address元素用来在文档中呈现联系信息包括文档作者或文档维护者的名字、 他们 的网站链接、电子邮件、真实地址、电话号码等 figure 网页上的一块独立元素在一个figure元素中只能放置一个figcaption元素表示 该 figure 元素的标题 figcaption figure元素块中的标题 details details元素主要用来列表一些关键的的元素在它中我们使用summary元素作为 details 元素的标题如果我们在details元素中不使用summary元素则默认出现“显 示 详细信息”。 summary 作为details元素的标题 mark 标注或者高亮一些我们需要的关键字词 progress 表示当前的完成进度情况 meter meter元素有六个属性value表示值min表示最小值max表示最大值low 表示下 限high表示上限optimum表示最佳值 cite 表示作品或文章中的标题 small HTML5中small元素被重新定义了small通常标签与正文无关的文字内嵌 在页面 上如标注版权信息网站备案等 canvas 画布标签用来在页面上画图案 表3-3
3.2.7特殊字符 除了标签外HTML 中的特殊字符也有重要的作用。例如要求在浏览器中显示br标签,如果将br标 签直接写在源代码中浏览器会将解释成换行而不会显示。特殊字符以 开始以 ; 结束。 常用的特殊字符见图3-8 图3-8
3.3多媒体标签
3.3.1在网页中使用图像
3.3.1.1常见的图片格式 目前在网页中使用的图片主要有 GIF、JPG、PNG、BMP 格式但以 GIF、PNG 和 JPG 使用居多。GIF 支持动画和背景透明同时图片通常比较小但仅支持 256 色以内的图像因此色彩不够丰富。JPEG 支持 1670 万种颜色但不支持动画和背景透明。当想要背景透明的时候一般会使用PNG格式的 图片所以我们可以根据两者的优缺点来选择图像的格式。
3.3.1.2在网页中插入图片 代码掩饰
!DOCTYPE htmlhtml headmeta charsetUTF-8title在网页中插入图片/title/headbody!-- img标签用来引入图片到页面中src是一个必须的属性该属性表示图片的地址如下面的就是表示在当前文件夹下有个images文件夹里面有个图片名称叫做rose.jpg这种叫做相对路径寻找法--img srcimages/rose.jpg!-- 当然也可以这样写和上面一个意思 --img src./images/rose.jpg!-- 这样写表示绝对路径查找一般很少这样写因为这个路径只是这台电脑的路径换一台电脑就没有这张图片了
--img srcc://images/rose.jpg!-- 如果路径是网络路径也可以滴哦~~ --img srchttp://www.xianoupeng.com/uploadfile/2019/0428/20190428101229423.png/body
/html 运行可以看出图片确实已经出现在了页面上。
3.3.1.3 img标签的常见属性 通过设置图片的属性可以灵活的控制图片在网页中的显示图片的常用属性见图3-9 图3-9 图片的宽和高width 和 height**可以通过width和height属性来跳转图片的宽和高但是一般 建议根据情况修改一个防止出现图片被拉升变形。 图片的边框border: 对插入的图片还可以在周围加上边框。 置 图片与文字的位关系align在网页中经常将图文混排这时要设置图片与文字的位置关系和 文字与图片的距离如图3-10所示。 图3-10 文字代替图片显示alt: 当浏览器不能显示所指定的图片这时可以设置让浏览器显示一段文字 以说明该图 片来代替图片的显示这是利用 img 标签的 alt 属性来完成的。 图片标题title用来显示描述图片的文字当鼠标放到图片上时出现注意如果alt默认没有 设置那么alt的值默认就是title的值。
3.3.1.4 资源路径问题 路径是指一个文件存储的位置分为相对路径和绝对路径。 相对路径是指以当前文件所在位置为参考点而建立的路径。假设有如图3-11所示的目录结构 图3-11 从上图可以看出 index.html 文件在 web 目录下rose.jpg 文件在 images 目录下而web 与 images目录同在 html 目录下。index.html 文件的源代码如下。
!DOCTYPE htmlhtml headmeta charsetUTF-8title在网页中插入图片/title/headbodyph1相对路径/h1img src../images/rose.jpg alt这是一朵玫瑰花 title这是一朵刺手玫瑰花/pdivh2绝对路径/h2img srcfile:///C:/html/images/rose.jpg title这是一朵刺手玫瑰花/div/body
/html3.3.2 在网页中使用视频和音频 在HTML5之前要在页面上播放视频或者音频麻烦因为不同的浏览器对于这个支持不同所以在h5之后w3c专门为HTML5提供了两个标签视频标签video和音频标签audio。
!DOCTYPE htmlhtml langen
headmeta charsetUTF-8title多媒体标签/title
/head
bodyvideo srcimg/a.mp4 styleheight: 500px; width: 800px;controlscontrols autoplay/video
!-- 兼容写法 --videosource srcimg/a.mp4source srcimg/a.avi/videoaudio srcimg/a.mp3 autoplay controls/audio
/body
/html需要注意的是video和audio标签都需要书写src属性表示视频或者音频的文件位置和img标签一 样使用即可。 需要注意的是controls和autoplay属性在HTML中以后会有大量这种键和值一致的属性这种属性 在h5的标准下都可以直接写名称即可如上面代码。 controls 表示显示播放器的组件一般视频肯定要显示的音频根据情况如果是背景音乐的话 就不用显示。 autoplay 表示自动播放只要支持h5标准的浏览器都支持这个属性。 注意 因为用户体验度问题Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功 能紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放也就是说在浏览器也失效。 解决方案 第一种用户自己开启在chrome 浏览器中输入chrome://flags搜索“Autoplay policy”默认 为“Default”修改为 “No user gesture is required” 就可以但是现在高版本已经没有这个选项了。 第二种也是终极版淘宝这些视频网站都是使用这种方案视频因为自动播放体验度特别差 所以被禁用了那么我们可以让视频播客但是将声音禁止掉这样用户如果想观看视频就自己打开 声音提高用户体验度添加muted静音播放属性。 第三种当然官方建议使用js调用play方法最好。
/**video.play()返回一个promise未禁止则resolve禁止则reject
**/let video document.getElementById(video);let audio document.getElementById(audio);let videoPlay video.play();let audioPlay audio.play();videoPlay.then((){console.log(可以自动播放);
}).catch((err){console.log(不允许自动播放);//视频元素可以选择静音后再播放,提示用户打开声音video.mutedtrue;video.play();//也可以在用户交互后调用.play()// ...});
audioPlay.then((){console.log(可以自动播放);
}).catch((err){console.log(err);console.log(不允许自动播放);//音频元素只在用户交互后调用.play(),// ...});3.4 表格标签
3.4.1 在网页中使用表格 表格在网页制作中主要的作用是用来描述具有二维结构的数据。包括的标签有table、thead、
tbody、tfoot、tr、td。
table width300 border1 ①thead ②tr ③tdthis text is in the thead./td④/tr/theadtbody ⑤trtdthis text is in the tbody./td/tr/tbodytfoot ⑥trtdthis text is in the table footer./td/tr/tfoot
/table 代码解析
① table标签用于定义一个表格。一个表格必须包含至少一个横行组每一个横行组被分成三个部 分头、主干、尾。头和尾是可选的。thead元素定义头tfoot元素定义尾tbody元素则定义主干。
② thead标签元素定义头。
③ tr标签用于定义一行。
④ td标签用于定义一列。td 也叫做单元格必须放在tr中。
⑤ tbody元素则定义主干。
⑥ tfoot元素定义尾。
运行效果如图3-12所示。 图3-12
3.4.2Table 的属性
3.4.2.1 表格的边框
!DOCTYPE htmlhtmlheadmeta charsetutf-8/title表格的边框/title/headbodytable width200 border1 trtdnbsp;/tdtdnbsp;/td/tr/table/body
/html bordernn 是一个数字单位是像素 当 n 0 时表示表格没有边框当 n 0 时表示表
格有边 框边框的宽度是 n 像素注意n必须为整数运行效果如图3-13所示 图3-13
3.4.2.2 表格的宽和高
width 属性表示表格的宽度height 属性表示表格的高度。
!DOCTYPE htmlhtmlheadmeta charsetutf-8/title表格的宽和高/title/headbodytable width200 height100 border1 trtdnbsp;/tdtdnbsp;/td/tr/table/body
/html widthn 或 m% heightn 或 m%n 代表一个数值单位为像素px,m 代表 0-100 的数
即 0%-100%这个百分比是相对于表格所在的容器的百分比。运行结果如图3-14所示表格的宽
度是 200px 高度是 100px。 图3-14
3.4.2.3 表格的对齐 align属性表示表格的对齐方式主要用le、center、right这些值表示左对齐、居中对齐、右对齐 等。
!DOCTYPE htmlhtmlheadmeta charsetutf-8/title表格的宽和高/title/headbodytable width200 height100 border1 aligncenter trtdnbsp;/tdtdnbsp;/td/tr/table/body
/html align 表示表格在水平方向上的对齐方式有三个值 le、center、right分别表示居左对齐、居中 对齐和居右对齐省略 align 时是居左对齐。这个例子中aligncenter是居中对齐如图3-15所示 图3-15
3.4.2.4 表格的背景 gcolor 属性表示表格的背景颜色Background 属性表示表格的背景图像。
!DOCTYPE htmlhtmlheadmeta charsetutf-8/title表格的宽和高/title/headbodytable width200 backgroundbg.jpg bgcolor#CCCCCCtrtdnbsp;/tdtdnbsp;/td/tr/table/body
/html bgcolor 表示背景色background 表示背景图像当两者同时使用时背景图像会遮住背景
色Background 的背景图像会平铺整个表格类似于 Body 的背景图像效果背景图像的路径建
议使用相对 路径。 3.4.2.5 表格的填充和边距 cellpadding 表示表格的边距cellspacing 表示表格的间距。边距是指单元格内的元素距离单元格边 缘的距离间距是指单元格与单元格之间的距离。
!DOCTYPE htmlhtmlheadmeta charsetutf-8/title表格的宽和高/title/headbodytable width300 border1 cellpadding10 cellspacing10 ①trtd第一行第一列/tdtd第一行第二列/td/trtrtd第二行第一列/tdtd第二行第二列/td/tr/table/body
/html cellpadding10 表示边距为 10 pxcellspacing10表示间距为 10 px如果不设置
cellpadding 和 cellspacing 它们的默认值是 2px。运行结果如图3-16。 图3-16
3.4.3 表格的tr标签 tr标签表示的表格的行我们可以给行设置高度(height)和背景色(bgcolor)
!DOCTYPE html
htmlheadmeta charsetutf-8/title表格的行高和背景色/title/headbodytable width300 border1tr height30 bgcolor#CCCCCC tdnbsp;/tdtdnbsp;/td/trtr height40 bgcolor#999999tdnbsp;/tdtdnbsp;/td/trtr height50 bgcolor#666666tdnbsp;/tdtdnbsp;/td/tr/table/body
/html heightn 表示行的高度单位是像素。当设置行高时这一行的所有列都与行高相同。
bgcolor颜 色值表示这一行的背景色。本例中第一行的高度是 30px,背景色是#CCCCCC第
二行的高度是 40px 背景色是#999999第三行的高度是 50px背景色是#666666如图3-
17所示 图3-17
3.4.4 表格的td标签 td标签表示的表格的单元格(也就是列)我们可以给列设置宽和高width 和 height
!DOCTYPE htmlhtmlheadmeta charsetutf-8/title单元格的宽和高/title/headbodytable width300 border1 cellpadding2 cellspacing2bgcolor#CCCCCC tr height20 td width100 height20nbsp;/td td width100 height30nbsp;/td td width100 height40nbsp;/td /tr/table/body
/html 如果行设置了高度行中的列也设置了高度那么行的实际高度是行和列中高度最高的。这
个例子 中行的高度是第三个单元格设置的 40px。 表格的总宽度设置为 300px每一列的宽度设置为 100px那么三列之和与表格总宽度是否
相等 呢如图 8 所示在 Dreamweaver 中显示表格的宽度数据每一列设置的值均为 100px
而实际上第一 列和第二列的宽度是 90px第三列的实际宽度是 92px。这是因为表格设置了
border1 cellpadding2 cellspacing2属性他们占用了表格的一部分宽度。 3.4.5 表格的嵌套 表格的嵌套是指将一个表格放在另外一个表格的单元格中。可以用来布局是早期DIVCSS
页面布 局出现前最重要的布局方式之一现在很少用于布局也不建议用表格布局。
!DOCTYPE htmlhtmlheadmeta charsetutf-8/title表格的嵌套/title/headbodytable width300 border1trtdnbsp;/tdtdtable width100 border1 aligncenter trtdnbsp;/tdtdnbsp;/td/tr/table/td/tr/table/body
/html ① 第一个表格是一行两列第二个表格也是一行两列。在第一个表格的第一行的第二列中嵌
套了 第二个表格如图3-18所示 图3-18
3.4.6 表格的合并
3.4.6.1 单元格跨行
!DOCTYPE htmlhtmlheadmeta charsetUTF-8 /title单元格跨行/title/headbodytable width300 border1trtd rowspan2nbsp;/td tdnbsp;/tdtdnbsp;/td/trtrtdnbsp;/tdtdnbsp;/td/tr/table/body
/html rowspann 中 n 是一个整数表示这个单元格在垂直方向跨的行数。运行的结果如图3-19所示 图3-19
3.4.6.2 单元格跨列
!DOCTYPE htmlhtmlheadmeta charsetUTF-8 /title单元格跨行/title/headbodytable width300 border1trtd colspan2 aligncenter1001 班平均成绩/td/trtrtd aligncenter笔试/tdtd aligncenter机试/td/trtrtd aligncenter68/tdtd aligncenter72/td/tr/table/body
/html rowspann 中 n 是一个整数表示这个单元格在垂直方向跨的行数。运行的结果如图3-19
所示 主要属性参考表3-4 图3-19 属性名 属性值 功能 width 数字单位像素 单元格的高度 height 数字单位像素 单元格宽度 alignle lenft center right左中右 单元格水平对齐方式 valign top middle buttom上中下 单元格垂直对齐方式 bgcolor 颜色 单元格的背景色 rowspan 数字 垂直方向跨行 colspan 数字 水平方向跨列 表3-4
3.5 超链接标签 HTML 文件最重要的应用之一就是超链接通过网页上提供的超链接功能用户可以链接到
网络上 的其他网页。如果没有超链接就只能在浏览器地址栏中输入各个网页的网址这是一件
很麻烦的事。 实现超链接的标签是a。
3.5.1 文字超链接 现在来做一个例子在这个例子中要创建 2 个文件分别是 first.html 和 second.html实现
从 first.html 链接到 second.htm。在 工作目录下创建一个网页文件命名为 first.html代码如下。 代码演示first.html
!DOCTYPE htmlhtml headmeta charsetutf-8 /title超链接/title/headbody这是第一个文件点击a hrefsecond.html target_blank这里/a转到第二个文件。/body
/html a标签实现了超链接href 属性用来明确链接的目标文件target 属性用来明确目标文件的打
开方 式target_blank时表示在新窗口中打开目标文件省略时表示在原窗口中打开目标文件。
运行后显 示如图 3-20 所示的效果当用鼠标点击“这里”时网页转到了目标文件 second.html 运
行实现了超链 接。 代码演示second.html
!DOCTYPE htmlhtml headmeta charsetutf-8 /title超链接/title/headbody这是第二个文件。/body
/html 注意target属性默认target默认值为self表示当前选项卡打开页面如果修改为_blank
表示使 用新的窗口打开页面。
3.5.2 锚链接 在制作网页时可能会遇到网页内容过长的情况这样用户浏览起来就不太方便。要解决这个
问题可 以在网页的上部创建一个导航利用导航直接链接到下面定义好的锚点。 和淘宝这些网络
的楼层效果类似就是让页面定位到需要的地方注意在链接的href属性上加“#id”之后在需要停
止的位置的标签上设置对应的id即可。
3.5.3 图片超链接 代码演示
!DOCTYPE htmlhtml headmeta charsetutf-8 /title超链接/title/headbodya hrefrose.htmlimg srcimages/rose.jpg width200 height150 border0/a/body
/html ① 为图片添加超链接只要将图片源码写在超链接标签a中当鼠标点击图片时会打开
“rose.html”文 件。
3.5.4 热区超链接 有些时候希望一个图片能添加多个链接这时要将图片分割出多个链接区域每一个区域叫
一个热 区每一个热区都可以实现一个链接。
!DOCTYPE htmlhtml headmeta charsetutf-8 /title超链接/title/headbodyimg srcimages/china.jpg usemap#Map map nameMap area shaperect coords456,251,485,319 hrefshaanxi.htmlarea shapecircle coords402,299,23 hrefshanxi.htmlarea shapepoly coords400,365,446,268,446,381 hrefningxia.html/map/body
/html 热区的制作主要靠的是map标签和area标签。map标签用于在图片上划定区域把这个区域称
作地 图map的 name 属性是地图的名称。area标签可以理解为一个具体的区域它被包含在
map中。图片 通过map的名称引用area的区域并为每一个area设置超链接。 注意热区的形状有三种rect(矩形)、circle(圆形)、poly (多边形)。
3.6 列表标签 现在的一个商业级别的页面一般都是数据呈现分组出现这样的数据都是以列表组的形式
出现 显得页面整齐所以在页面上列表标签是出现频率较高的标签。列表标签主要用三种--
有序、无 序、数据列表
3.6.1 有序列表 - ol 有序列表使用 标签数据是呈现为有顺序的。
!DOCTYPE htmlhtmlheadmeta charsetUTF-8/title有序列表/title/headbodyol type1 start1 reversed li软件开发概论/li li数据库技术基础/lili控制台开发/liliWEB 网页编程/lili图形界面开发/li/ol/body
/html type 和start属性可以没有默认是1start是设置序号的种类 控制开始序号的位置。有序列
表序号种类共有三种见下表3-5 表3-5
运行结果如图3-21。 图3-21
3.6.2 无序列表 - ul 无序列表使用ul标签。
!DOCTYPE htmlhtmlheadmeta charsetUTF-8/title有序列表/title/headbodyul typecircle li软件开发概论/lili数据库技术基础/lili控制台开发/liliWEB 网页编程/lili图形界面开发/li/ul/body
/html type 属性设置序号的种类, 无序列表序号种类有三种见下表3-6 注意在真正的编程中我们很少使用ul提供的type类型我们会使用css去掉默认样式由
我 们自己添加这样页面好看很多。运行结果如图3-22 图3-22
3.6.3 数据列表 - dl 数据列表主要用来描述存在标题的列表组
!-- 数据列表标签主要显示有标题的数据 --dl!-- dt是标题 --dt这个是标题/dt!-- dd是数据标签 --dd这个是内容1/dddd这个是内容1/dddd这个是内容1/dddd这个是内容1/dddd这个是内容1/dddd这个是内容1/dddd这个是内容1/dddd这个是内容1/dd
/dl 运行效果如下图3-23 图3-23 当然HTML5的时候优化了这个标签组允许在一个dl标签中存在多个dt组。
dldt地方新闻/dtdd地方新闻1/dddd地方新闻2/dddd地方新闻3/dddt国内新闻/dtdd国内新闻2/dddd国内新闻3/dddd国内新闻4/dddt国际新闻/dtdd国际新闻1/dddd国际新闻2/dddd国际新闻3/dd
/dl
3.7 表单标签 之前学习的所有标签都是用来展示数据的但是我们页面有时候也需要和后端程序进行交
互 这样就需要一些能够交互的标签常见可以交互的标签有我们之前学习的a标签当然最主要
的交 互标签则是表单标签。表单是网页制作中非常重要的内容用户通过表单可以在网页中录入
数据 例如登录注册用户等。
3.7.1 表单标签form 表单是用form标签来定义的。 name表单名称 method表单提交方式 action处理表单的文件 form标签类似于一个容器标签3 个重要的属性见下表3-7 注意method 属性设置为 get 时传递的数据量受到浏览器种类和版本的限制。
3.7.2 表单元素 表单的元素如文本框、密码框等由三种标签构成input、 textarea、 select它们都要
包 含在form标签中才有效(当然HTML5扩展了一个button标签)。
3.7.2.1 input标签 input表单元素的语法格式如下 input表示表单元素type 是非常重要的属性type 不同的值表现为不同的元素类型详见下
图3-24。input标签的其它属性见图3-25。 图3-24 图3-25
注意在HTML5中input标签中type属性增加了好多类型如email、url、color、time等等
label forusename用户名称/label
input typetext idusename nameusename valueliujianhong readonly/br /
input typetext nameusename1 valueliujianhong disabled /br /用户密码input typepassword namepassword required autofocus /br用户性别input typeradio value男 namegender checked /男input typeradio value女 namegender/女br /您的爱好input typecheckbox valuefootball namefav /足球input typecheckbox value篮球 namefav /篮球input typecheckbox valueLOL namefav /LOLinput typecheckbox value韩剧 namefav /韩剧input typecheckbox value王者荣耀 namefav /王者荣耀br / 邮箱input typeemail nameemail placeholder请输入您的邮箱 /br用户头像input typefile nameavatar idavatar /br
input typehidden nameid value12/br /
3.7.2.2 select标签 select元素主要是表单的下拉选择框。
select name元素名称 multiplemultipleoption value”值 selected选项 1/optionoption value”值 选项 2/optionoption value”值 选项 3/optionoption value”值 选项 4/option…/select h5的标准下如果没有value则默认就是内容的值参考表3-8。 注意当select标签设置 multiple属性时select以列表形式显示当select标签不设置
multiple属性时以下拉框形式显示。列表框在选择时按住键盘的ctrl或shi键可以实现多选而下拉
框只 能单选。
3.7.2.3 textarea标签 textarea 表示也是表单标签的三大核心元素之一。
textarea name元素名称 cols文本框宽度 rows文本框高度 内容/textarea 主要属性参考表3-9 3.7.2.4 综合案例 显示案例如下
!DOCTYPE htmlhtml langzh
headmeta charsetUTF-8 /titleform表单/title
/head
body!-- form表单元素本质就是提交数据到web服务器所有的form必须包裹在form标签中action 属性表示需要提交的服务器的urlmethod 属性默认是get表示http请求的提交方式常见的有get、post在http1.1的标准下有8中提交方式get、post、delete、put、head、options、trace、connect get和post请求的区别1、http协议规定上不同2、安全性get请求的安全性很差将参数裸露到url中post求求安全较高3、数据量 2k 没有文件上传post entype enctypemultipart/form-data表单元素有三大类input 文本框select 选择框textarea 文本域--h1用户注册/h1form action# methodpost enctypemultipart/form-datalabel forusename用户名称/labelinput typetext idusename nameusename valueliujianhong readonly/br /input typetext nameusename1 valueliujianhong disabled /br /用户密码input typepassword namepassword required autofocus /br /用户性别input typeradio value男 namegender checked /男input typeradio value女 namegender/女br /您的爱好input typecheckbox valuefootball namefav /足球input typecheckbox value篮球 namefav /篮球input typecheckbox valueLOL namefav /LOLinput typecheckbox value韩剧 namefav /韩剧input typecheckbox value王者荣耀 namefav /王者荣耀br / 邮箱input typeemail nameemail placeholder请输入您的邮箱 /br /用户头像input typefile nameavatar idavatar /br /input typehidden nameid value12/br /您的家庭住址是select nameaddressoption value-1请选择您的家庭地址/optionoption value郑州郑州/optionoption value兰州 selected兰州/optionoption value杭州杭州/optionoption value苏州苏州/option/selectbr /您的建议或者意见br /!--row 行 column 列--textarea namecomment rows10 cols30 placeholder您的建议或者意见/textareabr / !-- h5提供了新标签扩充的input的类型 --input typenumber name id value max200 min1/!--input typebutton name id value点击一下吧 /--input typecolor name id value /input typedate name id value /
input typedatetime-local name id value /input typetime name id value /input typeurl name id value /input typerange name id value /!-- h5提供了新标签用来提交表单的 --!-- button注册/button--input typesubmit value注册用户 /!-- input typereset value重置数据 / --!-- input typeimage srcimg/exit.jpg/ --/form
/body
/html
3.8 HTML部分的总结作业: 作业1自己可以参考上面代码尝试着练习完成如下界面 要求
1. 用户名为文本框名称为 UserName长度为 15最大字符数为 20。
2. 密码为密码框名称为 UserPass长度为 15最大字符数为 20。
3. 性别为两个单选按钮名称为 sex值分别为男和女男默认选中。
4. 爱好是三个多选按钮名称为 like值分别为写作、听音乐、体育。
5. 省份为下拉框名称为 province选项的键-值对为 Key:陕西省value:shaanxi Key:山 西省value:shanx陕西省默认选中。
6. 自我介绍为多行文本框名称为 intro宽 25高 5默认值为“这个家伙什么也没留 下”。
7. 提交按钮名称为“send”标签为“提交”。
8. 重置按钮名称为“reset”标签为“重置”。
9. 参照图使用表格定位表单。 作业2完成如下转转页面 作业3李白诗词 作业4豆瓣电影
