资讯专栏INFORMATION COLUMN

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

CarlBenjamin / 3395人阅读

摘要:它可以有与元素事件相关的客户端脚本,当事件出现时可触发与标签为下拉菜单,需要配合标签一起使用,标签为下拉菜单中的选项。通过指定标签中的或属性可设置为下拉菜单或是列表框用于定义多行文本域,和属性是必须要填写的,他们用于指定文本域的宽度和高度。

这篇文章衔接上篇,主要罗列一些前端面试中可能问到的html中最基本的问题。

(格式有点乱,内容有点水,罗列了一些基本用法,大家随便看看)

常用标签 容器标签

div

div标签本身无特殊意义,作为一个块级容器,主要用于组合其他html元素常用于页面的布局。

span

span标签与div标签类似,本身无特殊意义,但它在结合诸如class,lang,或者dir属性时,可作为行内元素的容器。它起到描述(文档内容)的作用。

文本标签

h1-h6

h标签用于设置网页标题或文章标题,为了符合语义化,尽量用h1作为整个网页或网站的标题,h2作下一级标题,以此类推

p

p标签用于设置网页的文体,是大多数文字的主要标签,表示文章或某些文字的一个段落。

em 与 strong

em标签的作用是强调内容,strong标签的作用是着重内容,在浏览器中都会被渲染成加粗字体,但是在英文文章中,表示强调的文字会用斜体,例如:专有名词、术语、外来名词等;而strong则使用粗体,表示需要着重表现的文字。同时,如果使用盲人阅读设备,strong标签中的内容会被重读。

列表与表格标签

ul、ol 与 li

ul标签代表多项无序列表,即无数值排序的集合;而ol标签代表多项有序列表,是有数值排序的集合。当li标签嵌套在ul标签中时,是无序列表中的列表项,此时li的顺序在列表中没有意义;而当li嵌套在ol标签中时,则是有序列表中的列表项,此时第一个li标签则排序为一,以此类推。

dl 与 dt、dd

dl是一个定义列表,用来解释说明一些术语或特定词句。其中dt为术语部分(待解释部分),dd为dt的解释说明部分。

table

table标签用于定义表格,在早期由于浏览器对css技术的不支持,人们大量利用table标签进行页面布局,在现代的前端开发中已经摒弃了这种布局方式。但是也不用一棒子打死,table布局在布局表单内容时还是要方便的多。

在使用table标签时,tr标签定义行,th标签定义表头,td标签定义表格单元,更复杂的表格还会包含caption、col、colgroup、thead、tfoot 以及 tbody 元素。

注意:在 HTML5 中,table标签仅支持 "border" 属性,并且只允许使用值 "1" 或 ""

表单标签

form

form标签在文档中定义了一个表单,表单中有各种表单控件,最后浏览器会将表单中的信息提交到服务器。其中,form标签有几个常用的重要属性:

name

name标签可以让我们方便的用js找到某个特定的表单,从而找到此表单下的表单控件,这样就可以对表单中的各个部分进行控制了。(form表单中的表单控件也有name属性)

action

action属性是当前表单所要提交到的服务器处理url,表单会被提交到action属性中的页面进行处理。

method

提交表单到服务器的方法,可选GET和POST,两个方法的特点和作用可到网上查阅,今后我也会慢慢整理。

input

input标签用于接收用户的填写的信息,通过form表单提交到服务器,同时通过设置type属性的不同值可以赋予input标签不同的功能,常用功能如下:

text(默认): 用于接收文本信息如用户名等

password: 用于接收密码

radio: 单选按钮(使用value属性标注提交值)

checkbox: 复选框(使用value属性标注提交值)

file: 文件上传

image: 图像上传

data: 输入日期控件(年月日)

button

将button标签归类到这里其实是不太合适的(但是我不知道怎么归了啊=。=)button标签在表单中主要是用于提交表单,当用户填写完成后点击按钮进行表单的提交等操作。通过设置type属性也有不同的作用:

submit: 此按钮提交表单数据给服务器。未指定时,此值为默认值,或者如果此属性动态变为空值或无效值

reset: 此按钮重置所有组件为初始值

button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本,当事件出现时可触发

select 与 option

select标签为下拉菜单,需要配合option标签一起使用,option标签为下拉菜单中的选项。通过指定select标签中的mutiple或size属性可设置select为下拉菜单或是列表框

textarea

用于定义多行文本域,cols和rows属性是必须要填写的,他们用于指定文本域的宽度和高度。多行文本域比较特殊,除了普通的事件属性,他还可以指定onselect属性,用于表示文本域里面的内容被选中时候的事件。

超链接(锚点)

a

a标签用于创建一个到其他网页,文件,或同一页面内的位置,当然也可以是电子邮件地址或任何其他URL的超链接。下面是几个常用的属性:

href

这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段

download

此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。

如果属性有一个值,它将在保存提示中用作预先填写的文件名 (用户仍然可以根据需要更改文件名)。对允许的值没有限制,但是 / 和 被转换为下划线。大多数文件系统限制文件名中的一些标点符号,浏览器会相应地调整建议的名称。

target

该属性指定在何处显示链接的资源。 取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:

_self: 当前页面加载,会覆盖掉当前页面。此值是默认的,如果没有指定属性的话

_blank: 新窗口打开,根据浏览器的不同设置,会在新标签页或新的浏览器窗口中打开页面

_parent: 加载响应到当前框架的父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。

_top: IHTML4中:加载的响应成完整的,原来的窗口,取消所有其它frame。 HTML5中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self

图片标签

img

用来设置文档中的图像内容,主要属性如下:

src: 图像的 URL,这个属性对

cache-control: 指定请求和响应遵循的缓存机制

no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。

no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)

public : 缓存所有响应,但并非必须。因为max-age也可以做到相同效果

private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)

maxage : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。

no-siteapp: 禁止自动转码。假设某网页没有进行移动端适配,在移动端进行浏览时,从某个入口(例如百度)进入该网页,可以防止该入口对网页进行移动设备转码。虽然转码的意图是好的,但是有的时候转码之后效果不尽人意,就可以设置这个属性。

  

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51022.html

相关文章

  • 10.26 酷狗音乐校招前端一面经历

    摘要:安全性请求可被缓存,请求保存在浏览器历史记录中则不能被缓存。与相比,的安全性较差,因为发送的数据是的一部分。 酷狗一面 1. 如何实现三栏布局(左右两边固定宽度,中间自适应)? 使用flex布局: 父元素设置display: flex,左右两边设置固定宽度,中间设置flex-grow: 1; 使用浮动布局:左右两边设置固定宽度,而且分别设置float:left和right,这个方法有...

    GitCafe 评论0 收藏0
  • "双非"应届生校招如何获得大厂青睐?(内附前端大厂面经+技术岗超全求职攻略)

    摘要:拿到秋招的同学,如确定入职需与用人单位签署三方协议,以保证双方的利益不受损失。当然每个岗位所要求的侧重点不同,但却百变不离其宗。方法论要想达成某个目标都有其特定的方法论,学习技术也不例外,掌握适当的学习方法才能事半功倍。 写在前面的话 笔者从17年的2月份开始准备春招,其中遇到不少坑,也意识到自己走过的弯路。故写了这篇文章总结一番,本文适合主动学习的,对自己要学的课程不明确的,对面试有...

    jeffrey_up 评论0 收藏0
  • "双非"应届生校招如何获得大厂青睐?(内附前端大厂面经+技术岗超全求职攻略)

    摘要:拿到秋招的同学,如确定入职需与用人单位签署三方协议,以保证双方的利益不受损失。当然每个岗位所要求的侧重点不同,但却百变不离其宗。方法论要想达成某个目标都有其特定的方法论,学习技术也不例外,掌握适当的学习方法才能事半功倍。 写在前面的话 笔者从17年的2月份开始准备春招,其中遇到不少坑,也意识到自己走过的弯路。故写了这篇文章总结一番,本文适合主动学习的,对自己要学的课程不明确的,对面试有...

    lindroid 评论0 收藏0
  • 【Java】广州本秋招经历

    摘要:具体的时间线从月中旬,我开始关注牛客网的秋招内推信息。直至十月中下旬结束秋招。之前也写过自己在广州找实习的经历,那次把面试的过程都具体贴出来了。我今年就完美错过了春招实习经历。 前言 只有光头才能变强 离上次发文章已经快两个月时间了,最近一直忙着秋招的事。今天是2018年10月22日,对于互联网行业来说,秋招就基本结束了。我这边的流程也走完了(不再笔试/面试了),所以来写写我的秋招经历...

    qqlcbb 评论0 收藏1

发表评论

0条评论

CarlBenjamin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<