当前位置: 首页 > Web前端 > HTML

校招进行时(三)---html基础

时间:2023-04-02 19:53:15 HTML

这篇文章接上一篇,主要列举前端面试可能会问到的一些html最基础的问题。(格式有点乱,内容有点水,列出了一些基本的用法,大家可以随便看看),主要用于组合其他html元素,常用于页面布局。spanspan标签与div标签类似,本身并无特殊含义,但与class、lang、dir等属性结合使用时,可以作为内联元素的容器。它充当描述(文档内容)。文本标签h1-h6h标签用于设置网页标题或文章标题。为了符合语义,尽量用h1作为整个网页或网站的标题,h2作为下一级的标题,以此类推。pp标签用于设置网页的风格。是大多数文本的主要标签,代表一篇文章或某些文本的一段。em和strongem标签的作用是强调内容,strong标签的作用是强调内容,在浏览器中会以粗体呈现,但在英文文章中,被强调的文字会变成斜体,例如:专有名词、术语、外来名词等;而strong用粗体表示需要强调的文字。同时,如果使用盲人设备,将重新读取强标签中的内容。列表和表格标签ul、ol、liul标签表示一个多项无序列表,即没有进行数值排序的集合;ol标签表示一个多项目有序列表,它是一个数字排序的集合。当li标签嵌套在ul标签中时,它是一个无序列表中的列表项。此时li的顺序在列表中没有意义;而当li标签嵌套在ol标签中时,就是有序列表项中的一个列表,此时第一个li标签被排成一个,以此类推。dl和dt,dddl是定义表,用来解释一些术语或特定的词句。其中,dt为术语部分(需要解释的部分),dd为dt的解释部分。tabletable标签用于定义表格。早期由于浏览器不支持CSS技术,人们大量使用table标签进行页面布局。这种布局方式在现代前端开发中已经被抛弃。但没必要用棍子打死它。在对表单内容进行布局时,表格布局会方便很多。使用表格标签时,tr标签定义行,th标签定义表格标题,td标签定义表格单元格。更复杂的表格还将包含caption、col、colgroup、thead、tfoot和tbody元素。注意:在HTML5中,table标签只支持“border”属性,并且只允许取值“1”或“”。form标签定义了文档中的一个表单,表单中有各种表单控件。最后,浏览器将表单中的信息提交给服务器。其中,form标签有几个常用的重要属性:namename标签可以让我们很方便的用js找到一个具体的表单,从而找到这个表单下的表单控件,从而控制表单的各个部分。(form表单中的form控件也有name属性)actionaction属性是当前表单将提交到的服务器处理url,将表单提交到action属性中的页面进行处理。method向服务器提交表单的方法,GET和POST是可选的,两种方法的特点和作用网上都可以找到,以后慢慢整理。inputinput标签用于接收用户填写的信息,并通过form表单提交给服务器。同时,通过设置type属性的不同值,可以赋予input标签不同的功能。常用函数如下:text(默认):用于接收用户名等文本信息password:用于接收密码radio:单选按钮(使用value属性标记提交的值)checkbox:复选框(使用value属性来标记提交的值)file:fileuploadimage:imageuploaddata:inputdatecontrol(yearMonth,day)button这里不宜对button标签进行分类(但是不知道怎么分类=.=)button标签主要用于表单中提交表单。当用户完成表单后,点击按钮进行表单提交等操作。通过设置type属性也有不同的效果:submit:该按钮向服务器提交表单数据。如果未指定,或者如果此属性动态变为null或无效,则此值为默认值。重置:此按钮将所有组件重置为其初始值按钮:此按钮没有默认行为。它可以有与元素事件相关的客户端脚本,这些脚本可以在事件发生时被触发。select和optionselect标签是下拉菜单,需要和option标签一起使用,option标签就是下拉菜单中的选项。通过在select标签中指定multiple或size属性,select可以设置为下拉菜单或列表框textarea用于定义多行文本字段。cols和rows属性必须填写,它们用于指定文本字段的宽度和高度。多行文本字段是特殊的。除了常见的事件属性外,还可以指定onselect属性,用于表示文本域中的内容被选中时的事件。超链接(锚点)aa标签用于创建指向另一个网页、文件或同一页面内位置的超链接,当然还有电子邮件地址或任何其他URL。下面是几个常用的属性:href这是锚点定义超文本链接源所必需的属性。这表示链接目标的URL或URL片段。download该属性指示浏览器下载URL而不是导航到该URL,因此将提示用户将其保存为本地文件。如果该属性有一个值,它将在保存提示中用作预填充的文件名(如果需要,用户仍然可以更改文件名)。允许的值没有限制,但是/和会被转换为下划线。大多数文件系统限制文件名中的一些标点符号,浏览器相应地调整建议的名称。target此属性指定显示链接资源的位置。该值是浏览上下文的名称或其他关键字,例如选项卡、窗口或iframe。以下关键字有特殊含义:_self:当前页面加载完成后,当前页面将被覆盖。该值为默认值,如果没有指定属性_blank:新窗口打开,根据浏览器设置,页面会在新标签页或新浏览器窗口打开_parent:加载响应到当前的父框架frame或当前HTML5浏览上下文的父浏览上下文。如果没有父框架或浏览上下文,此选项的行为与_self相同。_top:在IHTML4中:将响应加载到完整的原始窗口中,取消所有其他帧。HTML5:将响应加载到顶级浏览上下文(即,作为当前浏览上下文的祖先且没有父级的浏览上下文)。如果没有父框架或浏览上下文,该选项的作用与_self图像标签img用于设置文档中的图像内容,主要属性如下:src:图像的URL,该属性是必需的元素alt:此属性定义描述图像的替代文本。如果图像的URL错误,图像不在支持的格式列表中,或者图像尚未下载,用户将看到此显示。注意:在标准规范中,省略此属性表示图像是内容的关键部分,但没有可用的等效文本。将此属性设置为空字符串表示图像不是内容的关键部分,非可视化浏览器在渲染时可能会忽略它。html5添加常用标签3D效果和动画画布画布标签定义图形,例如图表和其他图像。此HTML元素专为客户端矢量图形而设计。它没有自己的行为,但向客户端JavaScript公开了一个绘图API,以便脚本可以在画布上绘制任何它们想要的东西。音频视频audiaudio标签用于表示文档中的音频内容。它可以包含多个音频资源,可以使用src属性或source元素来描述;浏览器会选择最合适的使用。对于不支持音频元素的浏览器,也可以将音频元素作为浏览器无法识别的内容添加到文档中。video用于在文档中嵌入视频内容。附言。对于html5来说,常用的标签大概只有这么多。原因是浏览器兼容性问题,大部分标签使用不方便。主要用于特定场景下的API调用,比如摄像头、GPS定位等。html5的具体特性可以参考MDN:HTML5特殊标签准确的说,!DOCTYPE不应被视为一个标签。告诉浏览器当前HTML(或XML)文档是哪个版本,应该使用哪个规范来解析当前文档。Doctype是声明,不是标签;它也可以称为“文档类型声明”,或简称为“DTD”。metameta标签位于html文档头部的head标签中。元标签用于描述HTML网络文档的属性,例如作者、日期和时间、网页描述、关键字、页面刷新和其他元数据。这些数据将用于服务于搜索引擎和其他网络服务。由于meta标签的属性太多,这里介绍几个常用的属性:namename属性主要用来描述网页,比如网页的关键字和描述。对应的属性值为content,content中的内容是对name填充类型的具体描述。其中name属性有3个常用的值,分别是:keyword:告诉搜索引擎你网站的关键词description:用来告诉搜索网站你网站的主要内容viewport:移动设备窗口设置重点在视口设置:width:控制视口的大小,可以指定一个值,比如600或者device-width就是设备的宽度(单位是缩放到100%时CSS的像素)height:对应towidth,指定高度initial-scale:初始缩放比例,即页面第一次加载时的缩放比例maximum-scale:允许用户缩放的最大比例minimum-scale:minimumratiothattheuserisallowedtozoomtouser-scalable:用户是否可以手动缩放http-equiv这个属性用到设置http请求相关参数。使用方法同名称,需要结合内容使用。先用http-equiv定义,再用content做相关设置。content-Type:设置字符集,在html5中修改为charset,一般建议设置为utf-8字符集X-UA-Compatible:设置which浏览器渲染当前页面使用的版本,一般选择最新版本requests和response遵循no-cache:发送第一个请求,向服务器检查资源是否发生变化,如果没有,则使用缓存。no-store:不允许缓存,每次都要去服务器下载完整的响应。(安全措施)public:所有响应都被缓存,但不是必需的。因为max-age也可以达到private同样的效果:只为单个用户缓存,所以不允许relay缓存。(例如,CDN不允许缓存私有响应)maxage:表示在当前请求开始时响应可以缓存多长时间并被重用,而不需要去服务器重新请求。例如:max-age=60表示响应可以被缓存并再使用60秒。no-siteapp:禁用自动转码。假设某个网页还没有适配移动端,在移动端浏览时,从门户网站(如百度)进入网页,可以防止门户网站在移动设备上对网页进行转码。虽然转码的本意是好的,但有时转码后的效果并不理想,可以设置该属性。