Web 前端开发案例与实战单元2 HTML基础元素.pptxVIP

单元2HTML基础元素知识入门循序渐进2.1文档结构元素2.2文本控制元素2.3文本结构元素2.4图像元素2.5多媒体嵌入知识拓展

知识入门1.标签2.标签基础样式3.标签分类4.标签之间的关系5.标签的属性6.HTML元素7.网页结构8.块级元素和内联元素

循序渐进2.1文档结构元素2.2文本控制元素2.3文本结构元素2.4图像元素2.5多媒体嵌入知识拓展

2.1文档结构元素2.1.1文档类型2.1.2文档根部2.1.3头部元素2.1.4主体元素

2.1.1文档类型（1）HTML5!DOCTYPEhtml（2）HTML4.0!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN/TR/html4/loose.dtd（3）XHTML!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.1//EN/TR/xhtml11/DTD/xhtml11.dtd

2.1.2文档根部在文件标签html的起始标签中需要引入xmlns属性htmlxmlns=/1999/xhtml在HTML类型文档中可以省略

2.1.3头部元素1.文档头部头部标签head2.文档信息标签meta实现，content属性必须存在

meta标签可用的属性如表所示属性值描述是否必需contentsome_text定义与http-equiv或name属性相关的元信息是http-equiv?把content属性关联到HTTP头部否content-type网页类型expires网页期限，超过时间需要区服务器重新调阅refresh网页定时刷新或跳转set-cookie设置网页cookiename?把content属性关联到一个名称author网页作者description网页简单描述keywords网页关键字generator网页制作软件revised网页的最新版本，用于网页版本的迭代记录others其它schemesome_text定义用于翻译content属性值的格式

3.文档标题文档标题使用标题标签title实现title文档名称/title

2.1.4主体元素标签body元素表示body内容/body

【任务2-1】创建带有标题的我的网页【任务描述】（1）在头部元素的标题标签中自定义HTML网页标题为“我的网页”，告知浏览器展示的网页名称。（2）在网页主体元素中添加文本内容“网页主体”，实现从浏览器中展示网页主体的范围。

2.2文本控制元素2.2.1标题标签2.2.2文本修饰标签2.2.3文本语义标签2.2.4特殊字符

2.2.1标题标签HTML提供了6个标题标签，从h1到h6。h1标题内容/h1可选属性align，该属性的值包括left、center、right和justify。

2.2.2文本修饰标签标签font的属性可以控制对应文字的样式。font属性=属性值文本内容/font属性值如表所示属性值描述facefont_family（字体名称）文本字体size数字或百分比字体指定范围1到7，默认为3.也可以使用相对大小，size=”+1”colorrgb(0~255,0~255,0~255)（rgb格式）#xxxxxx（六位十六进制数）颜色英文名称（red，yellow等）文本颜色

2.2.3文本语义标签常见的文本语义标签如表所示。b/b和strong/strong文本加粗i/i和em/em文本以斜体显示s/s和del/del为文本添加删除线u/u和ins/ins为文本添加下划线mark/mark文本高亮cite/cite将引用的文本将以斜体显示。

2.2.4特殊字符特殊符号字符代码如表所示。特殊字符描述字符的代码?空格符nbsp;?小于号lt;?大于号gt;且运算amp;￥人民币yen;?版权copy;?注册商标reg;°摄氏度deg;±正负号plusmn;×乘号times;÷除号divide;2平方2（上标2）sup2;3立方3（上标3）sup3;

【任务2-2】制作文章《背影》片段欣赏页面【任务描述】（1）在文档主体中添加《背影》片段。（2）使用文本控制元素为文字添加样式。

2.3文本结构元素2.3.1段落标签2.3.2换行标签2.3.3水平线标签

2.3.1段落标签p标签实现段落的分隔。p段落内容/pp标签支持align属性，可选值为left、right、center和justify。

2.3.2换行标签br/标签实现换行效果，而不要实现段落的分隔。

2.3.3水平线标签使用hr/标签