下载文档原格式
HTML5 期中考试您的姓名： [填空题] *_________________________________您的班级： [单选题] *○软件2103 ○软件2104○软件2106○移动2101html5文档结构由<head>和（）两部分组成？ [单选题] *<body>(正确答案)<meta><h><title>html5文档的树状结构中，（）标签为文档的根节点，位于结构中的最顶层。
[单选题] *<html>(正确答案)<head><body><title>W3C 制定的web标准以下不包括（） [单选题] *结构化标准语言CSSDreamWeaver(正确答案)DOMHTML5中doctype标签的正确定义是（） [单选题] *<!DOCTYPE html PUBLIC "-//W3C//DTD// XHTML 1.0 Transitional//EN" "/TR/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD// XHTML 1.0 Transitional//EN" "/TR/xhtml4/loose.dtd"><!doctype html5><!doctype html>(正确答案)（）标签显示HTML5文档的标题 [单选题] *bodymetatoptitle(正确答案)链接显示的内容为pic1.gif图片的正确写法是（） [单选题] *<a href="链接地址"><img src="pic1.gif"></a>(正确答案)<a src="链接地址"><img href="pic1.gif"></a><a src="链接地址"><img alt="pic1.gif"></a><href a="链接地址"><img src="pic1.gif"></href>在html5标签中以下正确的注释声明是（） [单选题] */*这是–注释/<!--这是注释-->(正确答案)/这是注释///这是注释下面标记中，（）表示在标记的位置添加一个换行 [单选题] *<h1><enter><br>(正确答案)<hr>在html5中使用（）标签设置网页标题. [单选题] *<head><title>(正确答案)<meta><body>在图片标签<img>中，使用（）属性设置显示图片的路径。
华师《多媒体技术与网页制作》离线作业一、简答题：1.简述构成网页的基本元素是什么，网页制作的常用工具有哪些，Web标准的三个标准是什么？答：对于任何一个网页，组成它的最基本元素主要是文本、图像、动画、声音、视频、表格和表单。
网页制作的常用工具:DreamweaverMX、FrontPage、FLASHMX、Fireworks 、PHOTOSHOP。
Web标准分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
2.什么是超链接，超链接有哪几类，超链接3种路径的区别和适用场合是什么？答：超链接（hyperlink）是网页互相联系的桥梁，超链接可以看作是一个“热点”，它可以从当前网页定义的位置跳转到其他位置，包括当前页的某个位置、Internet、本地硬盘或局域网上的其他文件，甚至跳转到声音、图像等多媒体文件。
根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。
在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。
（1）绝对路径为文件提供完全的路径，包括适应的协议，如http,Ftp,rtsp等。
当链接到其它网站中的文件时，必须使用绝对链接。
（2）相对链接最适合网站的内部链接。
只要是同一网站之下的，即使不在同一个目录下，相对链接也非常合适。
文件相对地址是书写内部链接的理想形式。
只要是处于站点文件夹之内，相对地址可以自由地在文件之间构建链接。
（3）根目录相对地址同样适应于创建内部链接，但大多数情况下，不建议使用此种地址形式。
它在下列情况下使用：1.当站点的规模非常大，防置于几个服务器上时；2.当一个服务器上同时放置几个站点时。
3.简述什么是HTML,它的标记、属性及基本结构。
答：HTML是超文本标记语言。
H5基础标签浅谈（⼀）嗯，这是本⼈的第⼀篇博客……⽐较稚嫩，望各位⼤神见谅。
以下是本⼈对H5前端基本标签学习的⼀些学习笔记，与诸君分享。
⽂档声明格式：<!DOCTYPE html>注意：⽂档声明必有，⽽且必须在⽂档页⾯的第⼀⾏！HTML5已经简化了，H4以前较为繁琐，本着便(tou)捷(lan)的⼼思，就不重复描述以前繁琐的格式。
meta标签：描述⽂档的类型和编码；描述搜索关键字的描述（charset; content; http-equiv; name ;）meta标签中的属性：1，charset:设置⽂档的字符集编码格式HTML5中设置字符集编码：<meta charset="UTF-8">>>>常见的字符集编码格式：a.GB2312：国标码，简体中⽂； b.GBK,扩展的国标码； c.UTF-8,万国码Unicode2，http-equiv:将我们的信息写给浏览器看，按照⾥⾯的要求去执⾏，需要配合content属性使⽤。
（http-equiv属性只是表明需要设置哪⼀部分，具体的设置内容放到content属性中）可选属性值：content-type(⽂档类型) ;refresh（⽹页定时刷新） ;set-cookie（设置浏览器cookie缓存）3，name属性：使⽤⽅法同http-equiv。
常⽤且需要掌握的属性值：author（作者） keyword（⽹页关键字） description（⽹页描述）。
keyword（⽹页关键字） description（⽹页描述）这两个属性设置，⽹页必不可少<!--作者--><meta name="author" content=""/><!--⽹页关键字⽤英⽂逗号分隔--><meta name="keywords" content="HTML5,⽹页,web前端开发,Day1"/><!--⽹页描述：搜索⽹站时，title下⾯的解释⾄关重要！！--><meta name="description" content="这是准备⼯作的第⼀天的学习内容，来⾃杰瑞教育"/>详细属性如下图（上⾯介绍的是主要常⽤属性）：使⽤link标签，链接⽹页图标（title前的⼩logo）rel属性：声明链接⽂件的类型，此处选icontype属性：可以省略href属性：表⽰图⽚的路径地址代码：<link rel="icon" type="imag/x-icon" href="img/day1标题图标.png" />标签的分类块级标签：显⽰为块，前后隔⾏（⾃动换⾏）；⾏级标签：从左往右按⾏逐⼀显⽰；常见的块级标签<h1>-<h6>：标题标签，⾃动加粗，h1最⼤，h6最⼩。
简述行内元素和块元素的区别
行内元素和块元素是HTML中两种基本的语义化标签。
行内元素被定位在文档流的同一块区域中,而块元素被定位在文档流的不同块级区域中。
这两种元素在排版和样式上都有所不同,具体区别如下:
1. 定位方式:行内元素直接在HTML文档中的同一块区域中定位,而块元素在文档流中按照一定的规则定位,可以在不同块级区域之间灵活移动。
2. 边框和内边距:行内元素没有边框和内边距,而块元素有边框和内边距。
3. 样式:行内元素不能使用CSS样式,而块元素可以使用CSS样式。
4. 响应式:行内元素是固定大小的,不能响应式设计,而块元素可以根据宽度自适应不同宽度。
5. 嵌套:行内元素不能嵌套,而块元素可以嵌套。
6. 兼容性:由于行内元素直接在文档流中定位,因此在兼容性方面比块元素更具挑战性。
需要注意的是,虽然行内元素和块元素在定位和样式上都有所不同,但它们也有一些共同点。
例如,它们都可以包含文本和链接,并且都可以使用JavaScript进行交互。
在设计和开发HTML页面时,需要根据具体需求选择适合的元素类型。
HTML基础HTML定义HTML是用来描述网页的一种语言。
HTML指的是超文本标记语言（Hyper Text Markup Language）。
HTML使用标签来描述网页。
使用浏览器来“解析和执行”HTML。
HTML作用百度等浏览器的内容。
微信内部的商城等等。
淘宝手机客户端内部的产品等信息。
HTML的开发工具笔记本Notepad++Macromedia Dreamweaverecplise注：HTML在编写时，一定要注意编译的编码，通常使用UTF-8。
HTML的基本结构最外层是html，里面由head和body组成。
head显示在浏览器的导航栏，body显示在网页内部。
HTML标签概念和特点块级和行级标签HTML标签分类（方便后续的布局设计）：块级标签：显示为“块”状，前后隔一行 (多个会换行显示)行级标签：按行逐一显示（多个显示在一行）基本块级标签h标签、p标签、hr标签标题标签（h标签）从h1到h6依次变小段落标签（p标签）换行，中间空一行水平线标签（hr标签）显示为一条横线布局块级标签有序列表标签、无序列表标签、定义描述标签、表格、表单、分区有序列表标签1. 挑选商品2. 提交订单3. 付款成功无序列表标签JavaScript DOM编程艺术价格：￥29.30购买定义描述标签常用于图文混编的布局场合郑玉巧育儿经·幼儿卷定价：￥49.80表格常用于图文布局或显示数据HTML CSS+JSJSP框架表单通常用于数据提交等操作，将需要提交的数据放到form标签内部。
分区标签（div）一般当作结构化块状元素使用，作为分块或容器来使用可以多次相互嵌套使用行级标签 ##img标签、范围标签、换行标签图像标签注：为了兼容不同浏览器，推荐使用title属性，确保能显示提示文字范围标签郑玉巧育儿经·幼儿卷定价：￥49.80换行标签这是换行1，br标签。
这是换行2，br标签。
HTML基本属性XHTMLXHTML:可扩展超文本标记语言，与HTML类似，不过语法上更加严格。
【前端HTML 】常⽤标签及属性路径r相对路径绝对路径标签ⅡⅢⅢⅡ<small>small⼩号字<strong>strong加重语⽓<sub>SUBscript下标<sup>SUPerscript上标<u>Underline下划线列表标签<ul>Unorder List⽆序列表块标签<ol>Order List有序列表块标签<li>LIst列表项⽬块标签<dl>Define List定义列表块标签<dt>Define Title定义标题块标签<dd>Define Describtion定义描述块标签表格相关<table>表格块标签<tr>Table Row表⾏块标签<td>Table Data cell单元格<th>Table Head表头<caption>caption标题<thead>Table head表头部分<tbody>Table body主体部分<tfoot>Table foot底部业脚部分表单相关<form>form表单<input>input表单元素(输⼊框)空标签<select>select选择(下拉框)<option>option选项(下拉列表项)<textarea>text area⽂本域框架相关<frameset>frame set框架集<frame>frame框架空标签<iframe>iframe内嵌框架容器<div>division 分隔(容器标签(块))<span>span跨度(容器标签(⾏内))标签分类标签名英⽂英⽂含义标签类型备注属性属性名英⽂英⽂含义取值应⽤场景备注src SouRCe资源位置资源的路径border border边框数字(像素) size size尺⼨数字(像素) width width宽度数字(像素) height height⾼度数字(像素)bgcolor BackGroundCOLOR背景颜⾊颜⾊值：red或#ffffffbackground background背景图⽚图⽚路径list-style list-style设置列表的所有属性列表list-style-image list-style-image将图像设置为列表项标记Noneurl列表list-style-type list-style-type设置列表项标记的类型Disc(实⼼圆)Cirle(空⼼圆)Square(实⼼⽅块)列表line-height line-height⾏⾼(⾏间距)数字(像素)布局多⾏⽂本text-align text-align对齐⽅式Left、right、center各种元素对齐letter-spacing letter-spacing字符间距数字(像素)加⼤字符间间隔text-decoration text-decoration⽂本修饰Underline、none加下划线、中划线等margin-top(right、bottom、left)margin外边距数字(像素)padding-top(right、bottom、left)padding内边距数字(像素)Ⅱbottom 、left)displaydisplay改变块级元素与⾏内元素的默认显⽰⽅式block(⾏变块)inline(块变⾏)none(该元素不显⽰在⽹页中)position position 定位static(静态定位)relative(相对定位)absolute(绝对定位)fixed(固定定位)⽤于定位float float 浮动None 、left 、right clearclear处理浮动塌陷left(清除左边浮动)right(清除右边浮动)both(清除两边浮动)none(不清除浮动)type type 列表类型Disc(实⼼圆)Cirle(空⼼圆)Square(实⼼⽅块)⽤于列表alignalign对齐Left 、right 、center top 、middle 、bottom 段落内容⽔平对齐⽂字与图⽚垂直对齐type type 表单元素类型text(⽂本)checkbox(复选)radio(单选)password(密码)file(⽂件)submit(提交)reset(重置)button(按钮)image(图⽚按钮)hidden(隐藏)表单元素method method 表单数据的提交⽅式get postalt alter 改变、替换(图⽚不显⽰时提⽰信息)图⽚cellpadding cell padding 单元格内边距数字表格cellspacing cell spacing 单元格之间距离数字表格href Hypertext REFerence 超⽂本引⽤(跳转到⽂件位置)relRELationship关系(⽤于定义链接的⽂件和HTML ⽂档之间的关系)StyleSheet 样式表link 链接⼀个⽂件时target target ⽬标(⽹页打开的位置)_blank(新窗⼝打开)_self(⾃⾝窗⼝打开)_top(以整个浏览器作业作为窗⼝显⽰新页⾯)_parent(在⽗窗⼝中打开新的页⾯)colspan COLumn span 单元格跨列数字(跨的列数)表格rowspan row span 单元格跨⾏数字(跨的⾏数)表格readonly read only 只读value value 输⼊框的初始值maxlength max length 最⼤长度scrolldelay scroll delay 滚动延时<m arquee>directiondirection⽅向(滚动⽅向)<m arquee属性名英⽂英⽂含义取值应⽤场景备注块级标签<div>、<h1>~<h6>、<p>、<hr>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>、<table>⾏级标签<a>、<font>、<img>、<input>、<select>、<textarea>、<label>、<span>ⅡⅡ选择器简单选择器属性选择器复合选择器关系选择器伪类选择器ⅡⅢⅢⅢⅢⅢ伪类：（不存在的类，特殊的类）⼀般是使⽤:开头，⽤来描述⼀个标签元素的特殊状态（很像是类）。
⼀、HTML中常⽤标签及属性⼀、HTML基础语法 ---> 单标签、双标签、块级元素、⾏内元素 单双标签其实就是HTML⽂档中标签书写的格式，页⾯中最常见的是双标签； 单标签就是只有⼀个标签，也就是⼀个空元素：meta、img、hr、br 双标签有开始标签和结束标签 块级元素：独占⼀⾏，对宽⾼的属性值⽣效，如果不给宽度，块级元素就默认浏览器的宽度，（即就是100%宽） 例如：div p ul h1~h6 ..... ⾏内元素：对宽⾼属性值不⽣效，完全靠内容撑开宽⾼，可以跟其他标签存在⼀⾏ 例如：span b strong em a img input ...... ⾏内块元素：结合⾏内和块级元素的特点，不仅对宽⾼的属性值⽣效，还可以跟多个标签存在⼀⾏ 例如：input img⼆、HTML中常⽤标签 ---> ⽂档头部<!DOCTYPE html><!-- 申明，这⾏以下的⽂档都是html⽂档 --><html lang="en"><head><!-- 设置字符集编码 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 定义⽹页头部 --><title>Document</title><!-- link标签引⼊外部⽂件 rel定义⽂档与被链接⽂档的关系 shortcut icon:链接图⽚ type规定链接⽂档的类型 image/x-icon 图⽚类型 --><link rel="shortcut icon" type="image/x-icon" href=""><!-- link标签引⼊外部⽂件 rel定义⽂档与被链接⽂档的关系 stylesheet:层叠样式表 type规定链接⽂档的类型 text/css CSS样式表 --><link rel="stylesheet" type="text/css" href=""></head><body></body></html>三、HTML中常⽤标签 ---> ⽂本标签级属性<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 块级元素，段落标签 text-indent:段落缩进 1个em就是1个字体的长度; --><!-- font-size:字体⼤⼩设置 1px⼀个像素点⼤⼩;color:字体颜⾊;font-weight:bold 字体加粗;font-family:字体类型 --><p style="text-indent: 2em;font-size:15px;color: red;font-weight: bold;font-family: monospace;"></p><!-- ************ --><!-- ⾏内元素标签 --><!-- 斜体标签1 --><em></em><!-- 斜体标签2 --><i></i><!-- 删除线标签 --><del></del><span></span><!-- ************ --><!-- 换⾏标签，单标签，内部没有属性，上⾯的段落、⾏内标签可以通过br换⾏ --><br><!-- 预格式标签，保留⽂本中的换⾏或者空格 --><pre></pre><!-- 标题标签，h1~h6，块级元素，从⼤到⼩，h1最⼤ --><!-- text-align:设置⽂本位置 left:靠左 center:居中 right:靠右 --><h1 style="text-align: center;"></h1><!-- background:背景颜⾊ height:标签⾼度 line-height:设置⾏⾼ --><h2 style="background: pink;height: 50px;line-height: ;"></h2><h3></h3><h4></h4><h5></h5><h6></h6></body></html>四、HTML中常⽤标签 ---> 超链接<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* 去掉a链接下划线 */a{text-decoration: none;}/* 伪属性，⿏标移上字体变红,下划线显⽰ */a:hover{color: red;text-decoration: underline;}div{height: 1000px;background: pink;width:400px;}</style></head><body><!-- 链接标签 href:链接地址，"#"本页⾯跳转，默认⾃带下划线 --><a href="#">我是⼀个链接</a><!-- 图⽚链接 --><a href=""><img src="" alt=""></a><!-- 设置锚点定位 --><a href="top">页⾯顶部</a><div></div><a href="" id="top">回到顶部</a></body></html>五、HTML中常⽤标签 ---> 列表标签<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表标签</title><style type="text/css">/* 清空li样式；⽂化素质宽⾼；设置边框线 */ul li{list-style: none;height: 40px;width: 200px;border: 1px solid #ccc;margin: 5px 0px;text-align:center;line-height: 40px;} /* 设置前⾯样式为图⽚，但是⽆法调整图⽚与⽂字的间距 */ul li{list-style: url(图⽚地址);}/* 伪元素；在⽂字前⾯设置图⽚与⽂字的间距 */ul li::before{content: url(图⽚地址);margin-right: 30px;}/* 伪元素；在⽂字前⾯设置图⽚与⽂字的间距 */ul li::after{content: url(图⽚地址);}</style></head><body><!-- 有序列表 --><ol><li>web前端</li><li>JavaScript</li><li>jQuery</li></ol><!-- ⽆序列表 --><ul><li>西⽠<ul><li>有籽西⽠</li><li>⽆籽西⽠</li></ul></li><li>苹果</li><li>西柚</li></ul></body></html>六、HTML中常⽤标签 ---> form表单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form表单</title><style type="text/css">/* padding内边距 */input{height: 8px;width: 258px;border: 1px solid #ccc;margin-top: 20px;padding: 20px;} /* border: none去掉按钮⾃带的边框线 */button{height: 50px;width: 300px;margin-top: 20px;background: #FF6A00;border: none;color: #fff;} </style></head><body><!-- method在后端传输数据⽤到,传值⽅式get/post --><!-- action传值url地址 --><form method="" action=""><!-- type类型，输⼊域的类型：text⽂本型，password密码类型 --><!-- placeholder⽂本框内部的提⽰信息 --><input type="text" name="username" placeholder="请输⼊⽤户名"><br><input type="password" name="pwd" placeholder="请输⼊⽤密码"><br><button>登陆</button></form></body></html>七、HTML中常⽤标签 ---> 表格（table）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title><style type="text/css">/* 清除默认样式 */*{margin: 0px;padding: 0px;}/* border-collapse: collapse;合并多余的边框线 */table{border: 1px solid #ccc;border-collapse: collapse;}tr th{height: 200px;border: 1px solid #ccc;width: 100px;}tr td{height: 200px;border: 1px solid #ccc;width: 100px;}</style></head><body><table><!-- 表头定义⽤th --><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr><!-- 定义⾏⽤tr --><tr><!-- 定义列⽤td --><!-- colspan="5"合并5列 --><td colspan="5"></td></tr><tr><!-- 定义列⽤td --><!-- rowspan="2"合并两⾏，同时删除合并⾏的列 --><td rowspan="2"></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></body></html>。
常见的块级元素和⾏级元素常见的块级元素有：div；p；form；ul；li；ol；dl；hr；table；h1~h6；常见的⾏内元素有：a；span；strong；em；br；img；input；label；button；select；textarea；i；注意点：1）块级元素会独占⼀⾏，其宽度⾃动填满其⽗元素宽度⾏内元素不会独占⼀⾏，相邻的⾏内元素会排列在同⼀⾏⾥，直到⼀⾏排不下，才会换⾏，其宽度随元素的内容⽽变化2）块级元素可以设置 width, height属性，⾏内元素设置width, height⽆效。
【注意：块级元素即使设置了宽度，仍然是独占⼀⾏的】3) 块级元素可以设置margin 和 padding。
⾏内元素的⽔平⽅向的padding-left,padding-right,margin-left,margin-right 都产⽣边距效果但是竖直⽅向的padding-top,padding-bottom,margin-top,margin-bottom都不会产⽣边距效果。
（⽔平⽅向有效，竖直⽅向⽆效）4)p元素虽然是块级元素，但⾥⾯不可以再嵌套块级元素；a元素虽然是⾏内元素，但⾥⾯可以嵌套块级元素，但a标签⾥⾯不可以再嵌套a标签；img、button和input既是⾏内元素，也是替换元素，有内在的宽度和⾼度，所以可以直接设置宽度和⾼度，⽤js也可以直接读取到相应的⾼度和宽度；5)⾏内元素中间有间隙：产⽣原因：换⾏符、tab（制表符）、空格产⽣间隙；解决⽅法：1、元素写成⼀⾏；2、设置font-size：0；采⽤⽅法1代码会⽐较乱，⼀般不使⽤；采⽤⽅法2：直接给⾏内元素的⽗元素设置font-size：0，然后针对具体的⾏内元素设置相应的字体⼤⼩。
