HTML知识点

div无罪,table无毒

十几年前,当css出现并且普及,人们就开始了对以往页面的重构,很多使用table布局的页面被重新编写,用什么呢?“div+css”,相信大家都见过此类的教程或者书籍,笔者最初看到它的时候,就认为div是一门技术,因为它们是并列的关系,现在大家都知道,明显不是,但它所带来的影响是巨大的,div开始在页面中频繁出现甚至到泛滥的地步,然后,一批比较早觉醒的人以及html5概念的出现,让人们重新开始重视语义化,对div的态度开始了转变,仿佛用了它就是错误。其实不管是滥用还是不用,都是一种极端的做法,我们应该理性看待技术,它们的产生都是有原因的,也都是有自己的应用场景的,除非它们被更好、更合理的东西所替代(比如html5中所废弃的标签)。否则就应该占有一席之地,不该被区别看待。

table也是同样,实践证明它不宜用来大范围的复杂布局,但是还是有它的应用场景的,上面表格的部分已做了描述,这里就不多说了。

HTML、XML、XHTML 有什么区别

  • HTML 超文本标记语言(HyperText Markup
    Language,简称:HTML)是一种用于创建网页的标准标记语言。
  • XML 可扩展标识语言(The Extensible Markup
    Language)的简写,主要用于存储数据和结构。
  • XHTML 可扩展标识语言 (The Extensible HyperText Markup
    Language)的缩写,基于XML,作用与HTML类似,目的就是实现HTML向XML的过渡。

学习资源的选择、标准的衡量

学习资源很重要,是否全面?是否正确?这决定了你对一项技术或者一个知识点的最初印象,一旦跑偏不知要多久才纠正得回来,更何况这种代价很多时候是没必要的。

这是我在知乎上看到的两个问题可以作为参考
“若想学 HTML,应从哪里入手?”https://www.zhihu.com/question/19753196
前端开发基础扎实的标准是什么? https://www.zhihu.com/question/38922374

大家可以看看哪些是和自己的情况相吻合,它们就真的是很权威很可靠的选择吗?比如:http://w3school.com.cn/,
很多初学者的最爱,而且冲着这域名,也会认为它是跟w3c组织相关的权威的官方网站,实则它和w3c组织半点关系都没有,当然也并不是说它有多差,很多人因之受益,但是这是一种性质上的认知错误,实际上它里面的有些内容也是错误的。

再者说标准,不同人眼里的标准也是不同的,能写出页面是标准吗?能正确运用所有标签是标准吗?能熟练运用各种布局是标准吗?都不是,我们一直在进行一个“点——线——面——体”的过程,不论是单项技术,还是经验,综合能力,我们都在不断的积累和填充,单个点和单个方向做得比较好,不代表你就处在一个高的水平面上,或许在另一个地方你还缺了一大块,所以,不断摸索、探索,不断努力就好。

文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

  • 文档声明的作用
    文档声明目的是防止出现乱码情况。
  • 严格模式和混杂模式指什么
    严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码
    混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码
    区分 :浏览器解析时到底使用严格模式还是混杂模式,与网页中的
    DTD 直接相关。
  • <!DOCTYPE html>
    <DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类
    型。让浏览器解析器知道应该用哪个规范来解析文档

结构和表现分离了吗?

从我们开始接触分离观,可能就有一种认识,html里面不要有内联或者内嵌的样式,就是分离了,其实不然。
这带来了一个后果,不重视标签和类依赖。所以,貌似我们已经完全做到了分离,但分离之后,结构并没有做好它的本职工作,然后可能引起我们不得不要用类加以区分,反而因为要照顾到样式,在结构和表现之间建立很多纷繁复杂的联系,这也是带来维护问题的根源之一。不要所有事情都交给CSS解决,让CSS只做它该做的,也不要让自己在标签上使用的失误成为见缝插针的理由。

浏览器乱码的原因是什么?如何解决?

html源代码内中文字内容与html编码不同造成。但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码。

  • 解决:
    <meta charset=”utf-8″>

是时候再提web标准

2016/07/06 · 基础技术 ·
WEB

原文出处: 灵感(@灵感_idea
   

列出常见的标签,并简单介绍这些标签用在什么场景

  • h1~h6 标题
    <h1>代表页面最大的标题</h1>
    <h2>二级标题</h2>
    <h3>更弱的标题</h3>
    <h4>…</h4>
    <h5>…</h5>
    <h6>最小标题</h6>
  • p段落
    <p>表示大段文字</p>
  • a链接,链到一个地址
    <a
    href=”http://www.google.com“”
    target=”_blank”
    title=”ABC”>google.com</a>
    <a href=”#”>空</a>
    <a href=”#about”>定位ID标签about位置</a>
    <a href=”/getCourse”>链接路径地址</a>
  • img展示一张图片
![](https://www.jianshu.com/p/a.png)
  • div语义为“一大块”,用于给页面划分区块,让结构更清晰
    <div id=”header”>…</div>
    <div id=”content”>…</div>
    <div id=”footer”>…</div>
  • ul li
  • ul: unsort list 无序列表
  • 用于表示并列的内容
  • ul的直接子元素是li
  • 可以嵌套
    <ul class=”nav”>
    <li><a href=”#”>首页</a></li>
    <li><a href=”#”>关于</a></li>
    <li>
    <a href=”#”>更多</a>
    <ul>
    <li>联系</li>
    <li>地址</li>
    </ul>
    </li>
    </ul>
  • OL LI
  • ol: order list 有序序列表
  • 用于表示带步骤或者编号的并列内容
  • ol的直接子元素只能是li 可以嵌套
    <h2>把大象关到冰箱的步骤</h2>
    <ol>
    <li>把大象变小</li>
    <li>打开冰箱</li>
    <li>把大象塞进去</li>
    </ol>
  • DL DT DD用于展示一系列 “标题:内容… ”的场景
    <dl>
    <dt>商品名称:</dt>
    <dd>青花瓷</dd>
    <dt>特征:</dt>
    <dd>白色</dd>
    <dd>圆口</dd>
    <dt>商品介绍</dt>
    <dd>这是一个年代久远的瓷器,很贵,易碎</dd>
    </dl>
  • button按钮
    <button>点我</button>
  • strong em
  • em 需要强调一下
  • strong 很重要、强调性更强
    <p>优惠 <strong>100</strong> 元</p>
    <p>小谷 <em>2</em> 岁了</p>
  • iframe用于嵌入一个页面 注意跨域操作问题
    <iframe src=”http://www.google.com
    name=”myPage”></iframe>
    <p><a
    href=”http://www.baidu.com“”
    target=”myPage”>baidu.com</a></p>
  • table
    用于展示表格,不要用来做布局 thead tbody
    tfoot可省略,浏览器会自动添加 border-
    collapse: collapse;用于合并边框
    <table>
    <tr>
    <th>姓名</th>
    <th>年纪</th>
    </tr>
    <tr>
    <td>小明</td>
    <td>18</td>
    </tr>
    <tr>
    <td>小花</td>
    <td>20</td>
    </tr>
    </table>

多种场景的样式

在日常项目中,我们很少会碰到特殊的需要,一般只要这样一行代码就够了

XHTML

<link href=”” rel=”stylesheet” type=”text/css”>

1
<link href="" rel="stylesheet" type="text/css">

那么如果有特殊需要,该怎么做?可以看下下面这个表格

值 描述
screen 计算机屏幕(默认)。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视机类型设备(低分辨率、有限的滚屏能力)。
projection 放映机。
handheld 手持设备(小屏幕、有限带宽)。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。

找到它并不难,难的是,很多人可能不知从何处着手,没有这个意识或者概念的话,也就不会去查。了解了这些,就能根据不同场景给我们的页面分配不同的样式规则。

常见的浏览器有哪些,什么内核

浏览器
chrome浏览器、火狐浏览器(Mozilla
Firefox)、IE浏览器、360极速浏览器、搜狗浏览器、猎豹极轻浏览器等。
内核

  1. Trident(IE内核);
  2. Gecko(Firefox内核);
  3. Presto(Opera前内核) (已废弃);
  4. Webkit(Safari内核,Chrome内核原型,开源)。

问题来源

注意点

  1. 标签属性全小写;
  2. 标签要闭合、自闭合标签可以省略 /;
  3. 标题里不能有段落,段落里不能有标题;

参考:
http://www.jianshu.com/p/55a7e598957f

html5来了

必须承认一点,当我最初看到html5的时候,内心是激动的,在它出现之前,是没有足够用来表示页面结构的语义化标签供我们使用的,一般我们是用“类”或者“id”来定义它们。不过同时问题又来了,应该怎样正确的使用它们?正如以前我们面对旧版本的html时忽略了很多语义化的标签一样,如果我们不能对这些新增加的标签有正确的认识,那么我们同样会陷入泥淖,虽然看起来会比之前好些。
较常用的有以下这些,你已经用起来了吗?

<article>
定义外部的内容(结构元素)

<aside>
定义页面内容之外的内容。 aside的内容与article的内容相关。(结构元素)

<figure>
定义一组媒介内容的分组,以及它们的标题。(结构元素)

<section>
标签定义文档中的节(section,区段)。比如章节,页眉,页脚或文档中的其他部分(结构元素)

<time>
定义一个日期/时间 (内联元素)

<audio>
定义声音内容。(内嵌元素)

<video>
定义视频。(内嵌元素)

<canvas>
定义图形,绘制路径,矩形,圆形,字符以及添加图像的方法

<dialog>
定义对话(会话)dialog元素表示几个人之间的对话。HTML5dt元素可以表示讲话者,HTML5dd元素可以表示讲话内容。(结构元素)

<embed>
定义外部交互内容或插件

<footer>
定义 section 或 page 的页脚

<figcaption>
定义 figure 元素的标题

<hgroup>
用于对网页或区段(section)的标题进行组合,对网页或区段的标题进行组合

<header>
定义 section 或 page 的页眉(介绍信息)

<mark>
定义带有记号的文本,请在需要突出显示文本时使用 标签

<nav>
定义导航链接

<source>
定义媒体资源

更多标签可以参照这张图
http://www.inmotionhosting.com/img/infographics/html5_cheat_sheet_tags.png

或者到这里查看更多http://www.htmldog.com/guides/html/

怎样理解 HTML 语义化

  • 语义化HTML是一种编写HTML的方式。
  • 选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。
    好处

    1. 页面呈现出很好地内容结构、代码结构
    2. 用户体验好。
    3. 利于SEO优化
    4. 方便其他设备解析来渲染网页。
    5. 便于团队开发和维护,语义化更具可读性

正规网赌平台,被遗忘的角落——无障碍设计

开发人员使用HTML、CSS和JavaScript创建富互联网应用程序时,往往把残疾人士抛在脑后,因为我们自己大多数是身体健全的人,所以,往往忽略了另一部分困难人士对产品的使用和需要。其实我们可以扭转这种局面。WAI-ARIA能够提供足够的语义,以确保富互联网应用是可以理解的,并且现在已经得到相对较好的支持。

WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要是为了提升网页的可用性,网页对残疾人士的无障碍化,是对
HTML 语义化的补充。它具备比现有的 HTML
元素和属性更完善的表达能力,并让你页面中元素的关系和含义更明确。

如何使用WAI-ARIA?

应用于HTML的ARIA有两部分组成:role(角色)和带aria-前缀的属性,其作用:

role(角色)标识了一个元素的作用
aria-属性描述了与之有关的事物(特征)及其是什么样的(状态)

ARIA在HTML中使用有其自己的规范,并不是说在HTML中使用了ARIA,Web页面就无障碍化了,就提高了可访问性了。言外之意,ARIA没有用好,反而会把你带到另一个坑中,使用你的页面可访问性更差。

更多关于ARIA的使用,是一个大话题,不是一两句能够说得清楚,有兴趣多了解的,可以参考一下这篇文http://www.w3cplus.com/wai-aria/wai-aria.html

有哪些常见的meta标签

  • 语言采用中文
    <meta http-equiv=”Content-Language” content=”zh-CN” />

  • 编码格式:告诉给浏览器用什么方式来都这页代码
    <meta charset=”utf-8″>

  • 如果支持Google Chrome
    Frame:GCF,则使用GCF渲染;如果系统安装ie8或以上版本,则使用最高版本ie渲染;
    否则,这个设定可以忽略。 目的使内容在移动端上比较合理展示
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>

  • 控制网页为全屏幕大小
    <meta name=”viewport” content=”width=device-width,
    initial-scale=1, maximum-scale=1″>

  • 目的是方便SEO优化内容关键字搜索
    <meta name=”keywords” content=””>

  • 目的是方便SEO优化内容详细描述搜索
    <meta name=”description” content=””>

**背景**

**web标准是个老生常谈的话题。引入国内的时间,粗略算下来,有十年左右了。但是由于国内前端优秀人才的缺失和相关教育跟进的缓慢,造成了很多人都没有对它引起足够的重视并运用到自己的实际项目当中,同时又花了较多精力在眼花缭乱的新技术方案和工具中,这就造成了技术断层,影响不是一个两个人,而是一大部分,如果再缺少相关的正确引导,就会保留很多不正确的编码习惯,对于个人成长和所做的项目都是不利的。**

为什么是时候再提呢?可以先来看看下面一张具有一定代表性的图,截自我的企鹅群(152128548)

正规网赌平台 1

1、标签仍在被滥用
2、重视觉,轻语义和结构
3、热衷于跟进热门新技术,不重视基础
4、当我在跟大家说重视基础的时候,要么有人说原生js,要么有人说css原理和技巧,没人说html

由于以上的几点,加上各种场合和会议似乎很少提及这些方面的东西,新手在被老手“牵”着走,老手的精力又不在这些比较基础的东西上。这篇文呢,就是跟大家一起回到起点,去看看怎样做才算是符合了web标准的编码。

怎样理解内容与样式分离的原则

  1. 在WEB开发中,
    一个网页分为三部分:Html——结构(内容),css——表现(样式),javascrip——行为。内容与样式分离,就是让内容的归
    HTML, 样式归 CSS。同时,HTML
    内不允许出现属性样式,尽量不要出现行内样式。
  2. 编码正确做法是HTML和CSS要分开使用,不要混着用。重点放在HTML的结构和语义化上,让HTML能提现页面结构或者内容,,然后进行
    css 样式设置(即内容与样式分离)
    ,写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)。
  3. 分离原则的优点
    • 浏览器加载网页页面速度变快。分离原则下,大部分页面代码写在了CSS当中,页
      面体积容量变得更小。
    • 网页修改设计时,效率、省时。根据html标签内ID或class的标记,到CSS里找到相
      应的ID或class,可以快速替换指定位置的样式,不会破坏页面架构和其他部分的样
      式。
    • 典型的应用就是网页换肤,使用相同的 html 结构,不同的 CSS 样式。
    • 更好地被搜索引擎收录。基于内容与样式分离的原则,html的语义化就是首要考虑
      的,网页中语义化的标签代码就会更加适合搜索引擎。
      CSS样式的分离,它可以根据不同的浏览器,达到显示效果的统一。保证网页架构
      不变形的前提下,放心在不同浏览器渲染显示样式。

表格

现在如果提到表格(table),很多人会觉得好笑,使用web标准构建网站的一个最荒诞的说法就是你应该永远不使用表格。

是的,使用table来布局确实是有劣势,但并不代表我们不能用表格来做适合它做的事,比如:数据化表格。

最简单的表格可以有下面这个结构:

XHTML

<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

1
2
3
4
5
<table>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
</table>

有时候,我们会在表格的上方加一点说明性文字,通常我们会习惯性的使用h*或者p标签来包裹这一段内容,如果你是用div,那么…

其实我们有更好的选择——<caption>,这个是表格自己的专有标题哦,有它为什么我们还要用别的呢?

除此之外,如果我们想给表格的第一行算作表头,可以怎么做呢?可以这样:

XHTML

<tr><th></th><th></th><th></th></tr>

1
<tr><th></th><th></th><th></th></tr>

把这行代码放在第一行,th标签会给它不同于td的样式来区分出和其他行的不同,此外它可以是行的,也可以是列的,怎么区分呢?还有这个——scope属性scope=row/col,把此属性添加到th标签中即可设置它的归属。

但这样就够了吗,如果对于简单的表格来说已经挺好,那么好像它还没有比较清晰的逻辑结构,那么,不卖关子了。较完整的表格,应该是下面这样:

XHTML

<table summary=”这是一个表格的内容简介” cellspacing=”0″>
<caption>表格标题</caption> <thead> <tr> <th
scope=”col” id=”name”>姓名</th> <th scope=”col”
id=”address”>地址</th> <th scope=”col”
id=”databirthday”>出生日期</th> </tr> </thead>
<tbody> <tr> <td>ewee<td>
<td>hubei<td> <td>19870102<td> </tr>
<tr> <td>rewe<td> <td>wuhan<td>
<td>419880103<td> </tr> <tr>
<td>ertww<td> <td>yichang<td>
<td>19870205<td> </tr> <tbody>
<tfoot><tr><td>one</td><td>two</td><td>three</td></tr></tfoot>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table summary="这是一个表格的内容简介" cellspacing="0">
    <caption>表格标题</caption>
        <thead>
            <tr> <th scope="col" id="name">姓名</th> <th scope="col" id="address">地址</th> <th scope="col" id="databirthday">出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr> <td>ewee<td> <td>hubei<td> <td>19870102<td>
            </tr>
            <tr> <td>rewe<td> <td>wuhan<td> <td>419880103<td>
            </tr>
            <tr> <td>ertww<td> <td>yichang<td> <td>19870205<td>
            </tr>
    <tbody>
    <tfoot><tr><td>one</td><td>two</td><td>three</td></tr></tfoot>
</table>

是不是顿觉十分的清晰,慢着,summary=”这是一个表格的内容简介”这句是什么鬼?好吧,看内容便知,它是关于表格的一个简介,这个简介用户是看不到的,屏幕阅读器可以利用该属性。

全面了解,权衡利弊,方可取舍

作为前端,实现一种结构或者一种功能,往往有很多方案可以用,比如上面所列的html结构,还有我们常用到的布局方案,CSS效果实现,js的方法,逻辑实现,我们常提到的框架或者库的选择等

合理性——语义化、结构、逻辑、交互等
成本——学习、合作、迭代、维护等
兼容——多版本浏览器,多终端等
性能——传输、解析、查询等

举个栗子,如果你想做动画,怎么做?

flash、css3、js、svg、canvas、Gif等

只有当我们对每一种实现方法或方案都熟悉了,知道了它的优缺点和应用场景,才能取舍自如,否则就是捆绑住了自己的手脚。

1、门槛低、简单

一周就可以掌握html,常用标签不多,用不到的不用管

比如:h1~6、p、span、div、img、a、input等,我们来随意的看一张截图

正规网赌平台 2

上面是某宝PC端的登录页,可能是由于种种原因(不详),只用了少量的标签,所以,并不说它是不好的或者是错的,但它是其他很多人的写照。如果我说html标签有100多个,你会是什么反应?

1、不知道,没想到有这么多
2、知道,但认为很多都用不上

你会是哪种?

如何在合适的时候,合适的地方,使用正确的标签,这是web标准的基本要求。后面细说。

CSS很简单,常用属性也就那么多

宽、高、边框、背景、定位、浮动、边距,如果你掌握了这么多,那么就能够应对很多页面布局的情况了。如果你因此就认为css很简单,那么就等着它来“惩罚”你吧。

不好的方面:各种兼容问题,各种奇葩布局要求,各种不可预知的bug

好的方面:诸多奇妙的技巧和css3新属性,能够帮助我们做出充满美感又神奇的效果

如果你依然觉得CSS太简单,那么请看一下这里https://drafts.csswg.org/indexes/,要坚强~

相关文章