菜单

HTML

2019年2月11日 - 金沙前端

class还是id?

有关那点,可以参照一下乐乎上这几个难点的答案。

有点统计下关切点:

1、id唯一性,class重复。依据目的成分的重复性和独特性来定
2、id权重较高
3、外围用id,内部结构善用class
4、前端采取id操作DOM,重构使用class操作DOM,UI和交互互相独立互不影响

除此以外还提议一些对此class的误用,下边是W3C的讲述:

class:There are no additional restrictions on the tokens authors can
use in the class attribute, but authors are encouraged to use values
that describe the nature of the content, rather than values that
describe the desired presentation of the content.

意思是:class应该是描述内容的恒山真面目(语义)的而不是内容长什么。

即使依照那种说法,那么有成百上千做法都是不妥的,相信大家看过不少“.f12、.fl
、.mr10”之类。

何以领悟内容与体制分离的准绳

  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样式的离别,它可以依据不一致的浏览器,达到显示效果的会见。保障网页架构
      不变形的前提下,放心在差别浏览器渲染呈现样式。
一个头名的HTML4页面

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN””http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type”
content=”text/html;charset=UTF-8″>
<title>Document</title>
</head>
<body>
<div id=”header”>
<h1>HTML4</h1>
</div>
<div id=”main”></div>
<div id=”footer”></div>
</body>
</html>
4到5投入了一些新标签 并剔除了一些甩掉标签
4的包容性好但貌似按照5去写 不难 适应性更好

关切点分离

了解 web
中怎样和怎么区分区其他关怀点,这很关键。那里的关切点主要指的是:新闻(HTML
结构)、外观(CSS)和作为(JavaScript)。为了使它们变成可爱戴的彻底整洁的代码,大家要尽大概的将它们分别开来。

严加地保障结构、表现、行为三者分离,并尽大概使三者之间没有太多的竞相和互换。

身为,尽量在文档和模板中只含有结构性的
HTML;而将装有表现代码,移入样式表中;将装有动作表现,移入脚本之中。

在此之外,为驱动它们之间的牵连尽可能的小,在文档和模板中也尽量少地引入样式新昌高腔本文件。

清楚的分段意味着:

web标准之外

当量变引起质变

1、维护性

举个栗子,若是大家去干活,两三人时得以随便站,10私有大概就要排队了,如若有越来越多的人就要求有人维持秩序,再上涨一个量级,大概还要分批放人,不然场地会失控。

页面是一律道理,一两个页面,几十广大行代码,那就无须太在意怎么写,不一致措施带来的距离是足以忽略不计的。几十个页面吗?上千行代码呢?

2、性能

天性至少关乎两个地点,代码的执行效能和文件大小。一个操纵了代码的剖析和施行进程,一个说了算了传输速度。那里不细说。

3、兼容

从那时候的浏览器大战,后来比较坑的IE低版本,到近年来的各个分辨率移动装备和种种安卓、ios版本浏览器的合作,微信内核浏览器的合营,等等。大家过去在做如此的事,未来也会。

地点说了,做出了符合标准的web页面,不代表大家就万事大吉,还有任何众多的实在难题会在量变到早晚程度的情景下给我们创造麻烦,形成质变。那我们将怎么着作答那几个质变?本文不做详述,只看做一个引子,后续会再写一篇小说来和我们研讨“web应变之道”。

下次见!~

 

1 赞 2 收藏
评论

金沙国际 1

有何样常见的meta标签

HTML、XML、XHTML

HTML:超文本标记语言,是语法较松懈的、不严峻的Web语言;
XML:(EXtensible 马克up
Language)可增添标记语言,首要用来存储数据喝结构、设计主旨是传输数据,而非突显数据、标签没有被预订义。要求活动定义标签;
参考http://w3school.com.cn/xml/xml\_intro.asp
XHTML:可扩展超文本标记语言,是XML和HTML的结合物基于XML,功能和HTML类似,但语法更严厉;
参考http://w3school.com.cn/xhtml/xhtml\_why.asp

前端编码规范(2)HTML 规范,前端编码

2、只须求做“对”,不必要做好

有的是时候,即便写错了浏览器会包容它,当我们的代码是不标准的,甚至有时是错的,可是浏览器依旧将它“正常”展现出来,那几个时候,我们发现不到本人的荒唐。认为看起来没难题就没难点,那是很凶险的。

标签不用在意,交给CSS去处理就好,理论上,大家得以经过自然的CSS规则,任意的改观一个成分的变现,那就导致了对html标签的不器重,因为大家总能让它们看起来没有其它难点。

什么了解 HTML 语义化

科普的浏览器和水源

IE浏览器的trident
火狐浏览器的gecko
谷歌(Google)、opera浏览器的blink
safari浏览器的webkit

文档类型

推介应用 HTML5 的文档类型评释: <!DOCTYPE html>

(指出选用 text/html 格式的 HTML。幸免使用 XHTML。XHTML
以及它的性质,比如 application/xhtml+xml 在浏览器中的应用支撑与优化空间都不行星星)。

HTML
中最好永不将无内容成分 [1]的竹签闭合,例如:使用 <br> 而非 <br />.


div无罪,table无毒

十几年前,当css出现同时普及,人们就起来了对昔日页面的重构,很多利用table布局的页面被再度编排,用怎么着吗?“div+css”,相信大家都见过此类的科目只怕书籍,作者最初见到它的时候,就觉得div是一门技术,因为它们是比量齐观的涉嫌,现在大家都通晓,明显不是,但它所拉动的震慑是高大的,div发轫在页面中反复出现如故到泛滥的程度,然后,一批相比较早觉醒的人以及html5概念的面世,让芸芸众生重新初始保养语义化,对div的情态初始了转变,就像用了它就是大错特错。其实不管是滥用照旧不要,都是一种极端的做法,大家相应理性对待技术,它们的暴发都是有缘由的,也都是有温馨的运用场景的,除非它们被更好、更合理的东西所取代(比如html5中所放弃的价签)。否则就相应占据一矢之地,不应当被分别看待。

table也是均等,实践表明它不宜用来大范围的复杂布局,不过照旧有它的应用场景的,上边表格的有些已做了描述,那里就不多说了。

文档申明的功用?严厉情势和混合格局指什么?<!doctype html> 的作用?

HTML常见标签、属性

标题标签:h1~h6 h1最大依次递减h6最小
段落标签:p 大段文字用p标签包裹
链接标签:a 链到一个地方 ,如:

图表标签:img
<img src=”#” alt=”头像”>
alt属性:
当图片无法健康彰显,对图纸的描述

div标签:div
如:
<div id=”header”>…</div>
<div id=”content”>…</div>
<div class=”footer”>…</div>
div用于给页面划分区块,让协会更显然
id和class的区分:class是一类,id具有唯一性

列表标签ul、ol、dl
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>
ul:insorti list 无系列表
用以表示并列的内容
ul的第一手子成分是li
可以嵌套
ol li标签
<h2>把大象关到冰柜的步子</h2>
<ol>
<li>把大象变小</li>
<li>打开冰柜</li>
<li>把大象塞进去</li>
</ol>
ol:order list 有系列表
用于表示有步骤或编号的并列内容
ol的第一手子成分是li
可以嵌套
dl dt dd标签
<dl>
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍</dt>
<dd>那是一个时期久远的瓷器,很贵,易碎</dd>
</dl>
来得一密密麻麻“标题:内容…”的意况

按钮标签:button
<button>点我</button>

文字:span strong em
span:正常突显
em:加强
strong:强调性更强
<p>优惠 <strong>100</strong> 元</p>
<p>小谷 <em>2</em> 岁了</p>

iframe标签
用于放置一个页面(注意跨域操作难点)
<iframe src=”” name=”myPage”></iframe>
<p><a href=””
target=”myPage”>W3Cschool.cc</a></p>

报表标签 table
用于体现表格,不可以用做布局
thead tbody
tfoot可概括,浏览器会自动添加border-collapse:collapse;用于合并边框
<table>
<thead>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
</thead>
<tbody>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>

<table>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>

大约可选标签

HTML5 规范中确定了 HTML
标签是足以简简单单的。但从可读性来说,在付出的源文件中最好永不这么做,因为省略标签大概会造成部分题材。

简简单单一些可选的价签确实使得页面大小收缩,那很有用,尤其是对于部分重型网站的话。为了完成这一目标,我们得以在开发前期对页面举办压缩处理,在那么些环节中那几个可选的标签完全就可以省略掉了。


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/,要坚强~

HTML、XML、XHTML 有何分别

HTML中表现(HTML)、样式(Css)、行为(Js)分离
  1. 写HTML时不管样式,重点在html的构造和标签语义化上,让HTML能显示页面结构或内容后再去写样式(css)
  2. 写JS时,尽量不用js去向来操作样式,通过给成分添加删减class来支配样式变化。
  3. HTML内不允许现身属性样式,尽量不出现行内样式

HTML 验证

诚如情况下,建议采纳能由此标准规范验证的 HTML
代码,除非在性质优化和操纵文件大小上不得不做出息争。

使用诸如 W3C HTML validator 那样的工具来进展检测。

金沙国际,规范化的 HTML 是突显技术须要与局限的显而易见品质基线,它助长了 HTML
被更好地动用。

不推荐

 

  1. <title>Test</title>
  2. <article>This is only a test.

推荐

 

  1. <!DOCTYPE html>
  2. <meta charset=”utf-8″>
  3. <title>Test</title>
  4. <article>This is only a test.</article>

布局和突显分离了吗?

从大家起头接触分离观,或然就有一种认识,html里面不用有内联或然内嵌的样式,就是分手了,其实不然。
这带来了一个结果,不推崇标签和类依赖。所以,貌似大家早就完全形成了离别,但分离之后,结构并从未做好它的本职工作,然后恐怕引起大家只可以要用类加以差别,反而因为要照料到样式,在结构和显现之间建立很多纷纭复杂的牵连,那也是带来珍视难点的根源之一。不要抱有事情都交由CSS化解,让CSS只做它该做的,也绝不让本身在标签上选取的失误变成见缝插针的理由。

广大的浏览器有何,什么内核

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

  1. Trident(IE内核);
  2. Gecko(Firefox内核);
  3. Presto(Opera前内核) (已废弃);
  4. Webkit(Safari内核,Chrome内核原型,开源)。
HTML(HyperText Markup Language:超文本标记语言)

多媒体回溯

对页面上的媒体而言,像图片、摄像、canvas
动画等,要力保其有可替代的接入接口。图片文件大家可选取有含义的准备文本(alt),视频和音频文件我们可以为其拉长表达文字或字幕。

提供可代表内容对可用性来说格外关键。试想,一位盲人用户如何能精通一张图片是怎么,若是没有
@alt 的话。

(图片的 alt
属性是同意填写内容的,纯装饰性的图形就可用这么做:alt="金沙国际 3")。

 

  1. <img src=”luke-skywalker.jpg” alt=”Luke skywalker riding an alien horse”>

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图