《Web前端技术（HTML+CSS+JavaScript）》课件_第3章 HTML基本元素.pptx

第3章HTML基本元素

学习目标123了解HTML主体标签了解标题元素的布局特点了解段落元素定义方法4掌握主体标签常见用法

学习目标567掌握无语义标签span和div的定义方法掌握段落元素的用法掌握超链接a标签

本章架构★★★3.1应用HTML的主体标签3.2应用HTML的无语义标签3.3应用HTML的标题和段落标签★3.4应用HTML的格式化标签

本章架构★★★3.5应用HTML的图片标签3.6应用HTML的超链接标签3.7综合案例

3.1应用HTML的主体标签

3.1应用HTML的主体标签一个完整的HTML文档大体包含以下标签。!DOCTYPE：声明文档类型。html：HTML文档中真正的根标签。head：定义HTML文档的文档头。title：定义HTML文档的标题，其属性值有dir和lang。base：为页面上的所有链接规定默认地址或者默认目标（target）。link：定义文档与外部资源之间的关系，常用于链接CSS样式表。meta：提供关于HTML的元数据，不会显示在页面，一般用于向浏览器传递信息或者命令，作为搜索引擎，或者用于其他Web服务。1主体标签

3.1应用HTML的主体标签一个完整的HTML文档大体包含以下标签。style：用于为HTML文档定义样式信息。script：用于定义客户端脚本，如JavaScript。body：定义HTML文档的文档体。1主体标签

3.1应用HTML的主体标签一个完整的HTML文档大体包含以下标签。meta：其属性charset用于设置文档字符集，可以有如下取值：UTF-8：国际通用的编码，通用性强。一个字符占一个字节。GB2312：常用简体汉字字符外还包括希腊字母、日文平假名及片假名字母、俄语西里尔字母等字符，未收录繁体中文汉字和一些生僻字。一个字符占两个字节。GBK：完全兼容GB2312，还收录了GB2312不包含的汉字部首符号、竖排标点符号等字符。一个字符占两个字节。Big5：收录的汉字只包括繁体汉字，不包括简体汉字。1主体标签

3.1应用HTML的主体标签通常文档内的CSS要定义在style标签内并且style标签还必须位于head标签内。例如：headtitle简单的信息注册界面/titlestyletype=text/css/style/head2在文档内定义CSS

3.1应用HTML的主体标签为实现页面的动态效果，需要编写相应的JavaScript语句，JavaScritp语句一定要定义在script标签内，但script不必定要在head内。例如：scripttype=text/javascriptJavaScript脚本/script3在文档内定义JavaScript

3.1应用HTML的主体标签在实际开发中为减少HTML页面部分内容，通常采用HTML代码和CSS代码分离的情况，这时可以通过link标签引入外部资源，其所在位置必须位于head标签内。例如：引入html页面代码同路径下的style.css文档linkrel=stylesheethref=style.css/这其中rel属性定义引入的是css，href属性定义文档的位置不能省略并且应注意其所在路径。4引入外部CSS

3.1应用HTML的主体标签为了更好的实现代码的分析，通常JavaScript代码部分独立编写，因此当需要时也需要采用引入外部文件的方式。例如：引入HTML文件同路径下的attack.js文件：scripttype=text/javascriptsrc=attack.js/script这其中src属性定义了外链文件位置。同时要注意script不必定要在head标签内，同时不要忘记结束符/script。5引入外部JavaScript文件

3.2应用HTML的无语义标签

3.2应用HTML的无语义标签语义化，顾名思义，就是所写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读