html多行文本框_前端面试集锦 HTML篇

HTML

1、语义化

何为语义化，字面意思就是根据html语言做一个让代码变得有意义的转化。

emmm 大家都知道，html标签有很多，<h1> <p> <div> <span>等等等。看看这些可爱的标签，有什么想说的？咱们先看一个语义化的页面布局，如下：

1、<header>

<header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。

在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

2、<nav>

<nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。

在一个文档中，可定义多个<nav>元素。

3、<main>

<main> 定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。

需要注意的是在一个文档中不能出现多个<main>标签。

4、<article>

<article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

5、<aside>

<aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

6、<footer>

<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

使用footer插入联系信息时，应在 footer 元素内使用 <address> 元素。

注意不能包含<footer>或者<header>

7、<section>

<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。

现在vue开发，拿起div就是撸，简单方便快捷。也说不上哪种模式更好吧，但是非框架开发的时候，建议还是语义化，这样浏览器理解起来更好，而且，当css样式加载失败的时候，不至于页面乱到不能看。 下面介绍一下语义化优点：

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便其他设备解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

2、新标签新特性

上面说 了语义化，而H5出的新标签，大部分都是为了让开发者更好的去使用语义化去开发。

新block标签：header, footer, main, aside, article, section, nav, hgroup, （主要8个）。

新表单标签，calendar、date、time、email、url、search

媒介标签： video 和 audio // 视频和音频

绘画标签： canvas //画图 利用css3

新block标签：

header:页眉（网页（部分区域）的头部 顶部 导航区域等等）;

footer:页脚（网页（部分区域）的底部|版权区域等等）;

section 标签定义网页中的区域（部分）；

article 内容是引用其他地方的；

aside 跟 article 是一起使用；是辅助 article 区域的内容;

nav 导航链接部分;

hgroup 给标题分组，不能就一个标题;

figure 对多个元素进行组合。通常与figcaption联合使用;

3、input和textarea的区别

具体应该是 <input type="text">和<textarea> 的区别。

他们之间最大的区别是，前者是单行文本框，后者是无限多行文本框。

4、用一个div模拟textarea的实现

使用很简单，一个普通的block元素上加个contenteditable="true"就ok了，如下：

<div contenteditable="true"></div> 

是不是贼简单。样式什么的自己加就好，contenteditable虽然是H5的属性，但是IE很早之前就已经开始支持了，所以兼容的问题不是很大。

5、移动设备忽略将页面中的数字识别为电话号码的方法

<meta name="format-detection" content="telephone=no,email=no,adress=no">

一、telephone

你明明写的一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！想去掉这个拨号链接该如何操作呢？这时我们的meta又该大显神通了，代码如下：

telephone=no就禁止了把数字转化为拨号链接！telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！

二、email

告诉设备不识别邮箱，点击之后不自动发送

email=no禁止作为邮箱地址！

email=yes就开启了把文字默认为邮箱地址，这个meta就不用写了,在默认是情况下就是开启！

三、adress

adress=no禁止跳转至地图！

adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启！

版权声明：本文为博主原创文章，转载请附上博文链接！