前端面试准备-------HTML

最新推荐文章于 2022-03-08 11:16:21 发布

fj1247565817

最新推荐文章于 2022-03-08 11:16:21 发布

阅读量138

点赞数

分类专栏：问题面试代码文章标签：前端面试

本文链接：https://blog.csdn.net/fj1247565817/article/details/99644587

版权

问题同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

代码

10 篇文章 0 订阅

订阅专栏

面试

8 篇文章 0 订阅

订阅专栏

~~本文是根据知乎~~爱前端不爱恋爱 ~~提供的目录整理供大家学习，后将持续更新~~
1、语义化
2、新标签新特性
3、input和textarea的区别
4、用一个div模拟textarea的实现
5、移动设备忽略将页面中的数字识别为电话号码的方法

一、语义化

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。

语义化的(X)HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。

事实上SEO最有效的一种办法，就是对网页的HTML结构进行重构，实质上就是语义化。

理解HTML语义化

二、新标签新特性

标签	描述
<article>	定义文章。
<aside>	定义页面内容之外的内容。
<audio>	定义声音内容。
<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<canvas>	定义图形。
<command>	定义命令按钮。
<datalist>	定义下拉列表。
<details>	定义元素的细节。
<dialog>	定义对话框或窗口。
<embed>	定义外部交互内容或插件。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<footer>	定义 section 或 page 的页脚。

更多标签
 新特性

三、input和textarea的区别

<input type=“text”>标签是单行文本框，<textarea>是多行文本框。

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

div模拟实现textarea效果代码来源

<!DOCTYPE html>
<html>
  <head>
    <title>div实现textarea效果</title>
    <style>
      #textarea {
        height: 200px;
        width: 300px;
        padding: 4px;
        border: 1px solid #888;
        resize: vertical;
        overflow: auto;
      }
 
      #textarea:empty:before {
        content: attr(placeholder);
        color: #bbb;
      }
    </style>
  </head>
  <body>
    <div id="textarea" contenteditable="true" placeholder="请输入内容..."></div>
  </body>
</html>

contenteditable 属性规定元素内容是否可编辑。
注释：如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。
<element contenteditable="true|false">

resize 属性规定是否可由用户调整元素的尺寸。
注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
resize值： none（用户无法调整元素的尺寸。）both（用户可调整元素的高度和宽度。）horizontal（用户可调整元素的宽度。）vertical（用户可调整元素的高度。）

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

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

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
通过设置content的telephone忽略数字自动识别为电话号码

<meta content="telephone=no" name="format-detection" />

常用meta整理

fj1247565817

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试准备-------HTML

本文是根据知乎爱前端不爱恋爱提供的目录整理供大家学习，后将持续更新1、语义化2、新标签新特性3、input和textarea的区别4、用一个div模拟textarea的实现5、移动设备忽略将页面中的数字识别为电话号码的方法一、语义化语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。语义化的(X)HTML文档有...
复制链接

扫一扫

专栏目录