1. HTML 语义化
什么是html语义化？
维基百科：
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。
- 语义化html优点
- 标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。
- 有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读？
- 有利于构建清晰的结构，有利于团队的开发、维护。
注意事项
- 尽可能少的使用无语义的标签div和span；在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
- 不要使用纯样式标签，如：b、font、u等，改用css设置。需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
- 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
- 常用语义化标签
<h1>~<h6>，作为标题使用，并且依据重要性递减，<h1>是最高的等级。<p>段落标记，知道了<p>作为段落，你就不会再使用<br />来换行了，而且不需要<br />来区分段落与段落。<p>中的文字会自动换行，而且换行的效果优于<br />。段落与段落之间的空隙也可以利用 CSS 来控制，很容易而且清晰的区分出段落与段落。<ul>、<ol>、<li>，<ul>无序列表，这个被大家广泛的使用，<ol>有序列表不常用。在 Web 标准化过程中，<ul>还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持 CSS 的时候，导航链接仍然很好使，只是美观方面差了一点而已。<dl>、<dt>、<dd>，<dl>就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。dl不单独使用，它通常与dt和dd一起使用。dl开启一个定义列表，dt表示要定义的项目名称，dd表示对dt的项目的描述。<em>、<strong>，<em>是用作强调，<strong>是用作重点强调。<table>、<thead>、<tbody>、<td>、<th>、<caption>， 就是用来做表格不要用来布局
- HTML5 语义化
- header元素 header 元素代表“网页”或“section”的页眉。
- footer元素 footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
- nav元素 nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
- aside元素 aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
- section元素 section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。
- article元素 article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。
非语义化结构
<div class="container" id="header">
<div class="header header-main">标题</div>
<div class="site-navigation">
<a href="/">Home</a>
<!-- cheesy content -->
</div>
</div>
<div class="container" id="main">
<div class="article-header-level-1">
标题
</div>
<div class="article-content">
<div class="article-section">
<div class="article-header-level-2">
小标题
</div>
<!-- cheesy content -->
</div>
</div>
</div>
<div class="container" id="footer">
Contact us!
<!-- more content -->
</div>
语义化结构
<header>
<h1>标题</h1>
<nav>
<a href="/">Home</a>
<!-- ...... -->
</nav>
</header>
<main>
<article>
<header>
<h1>标题</h1>
</header>
<section>
<!-- ...... -->
</section>
</article>
</main>
<footer>
<section class="contact">
<h2>Contact us!</h2>
<!-- ...... -->
</section>
</footer>
2. CSS
- css 盒子模型
-
盒子模型包含
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
-
标准盒模型
width=content.con1 { box-sizing : content-box; }
-
IE盒模型
width=content+padding+border.con1 { box-sizing : border-box; }
- css常用布局方式
- float+margin
- absolute+margin
- flex弹性盒子 官方详情 > 个人博客 >
- Grid栅格 官方详情 > 阮一峰Grid详情 >
- css单位 px rem em % vw vh 区别
-
px
px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的， 表示的是水平方向是1024个像素点，垂直方向是768个像素点。 是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。 -
em
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算 （浏览器默认字体是16px），整个页面内1em不是一个固定的值。 特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。 -
rem
rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为 10px，到时设置1.2rem就是12px.以此类推。 优点是，只需要设置根元素的大小就可以把整个页面的成比例的调好。 -
%
一般来说就是相对于父元素的， 1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort（可视窗口）， -
vw
css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px 举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。 -
vh
css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px 举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
- web页面适配
-
css3 媒体查询（pc端） 媒体查询详解 >
body { background-color:lightgreen; } @media screen and (max-width: 1367px) { body { background-color:lightblue; } } -
固定宽度（pc端）
//pc端一般设置内容宽度小于1366px .container { width: 1200px; margin: 0 auto; } -
弹性布局（rem,em,vw,vh,%）
//使用弹性单位 .container { width: 100%; }
- css 预编译器
css的痛点
- 语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
- 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
什么是css预编译器
Sass 安装及使用
-
hbuilderX 使用Sass编译插件
-
新建Sass文件 sass文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
test.scss
-
基本用法
-
使用变量
SASS允许使用变量，所有变量以$开头。$blue : #1875e7; div { color : $blue; } -
嵌套语法
<!--css--> .main { width : 100%; } .main .section { color : #fff; } .main .section .head{ font-size : 18px; } <!--sass--> .main { width : 100%; .section { color : #fff; .head { font-size ： 18px; } } } -
继承
sass允许一个选择器，继承另一个选择器。使用 @extend命令.con1 { border : 1px solid #eee; } .con2 { @extend .con1; color : #000; } -
mixin混入
使用 @mixin 命令，定义一个可重复使用的代码块。//定位上下左右居中 @mixin center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } // 背景图片 @mixin bg($url) { background-image: url($url); background-repeat: no-repeat; background-size: 100% 100%; }使用 @include命令，定义一个可重复使用的代码块。
.con1 { @include center; @include bg('../images/1.png'); } -
插入其他样式表
@import命令，用来插入外部文件。@import “../table_reset.scss"; -
自定义函数
@function 命令，用来定义函数。//vw适配 @function vw( $value ) { @return ( $value / 1920 ) *100 + vw; }; //调用函数 .con1 { margin-top : vw(30); } -
if条件语句
@if @else命令。$type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } //编译后 p { color: green; } -
循环语句
-
支持计算
.con1 { width :100% - 180px; margin-top : }
- css 引入外部字体（font-face）
@font-face {
font-family: 'fontnameRegular';
src: url('fontname.eot');
src: local('fontname Regular'),
local('fontname'),
url('fontname.woff') format('woff'),
url('fontname.ttf') format('truetype'),
url('fontname.svg#fontname') format('svg');
}
/*其中fontName替换为你的字体名称*/
.con1 {
font-family : fontnameRegular
}
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
