我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。
今日学习目标
按照昨天的规划，今天这边就需要从实例开始实战复杂页面了，早上在稿定设计上找了一个淘宝店模板页面。
今天主要就是将这个页面通过语义化标签和合理的 class 命名确认一下语义结构的完整实现，加油，小又又！！！！
新建项目
主要项目目录结构如下：
./
├── css
│ ├── reset.css
│ ├── tool.css
│ ├── layout.css
│ ├── index.css
├── images
│ ├── xx.png
│ ├── ...
├── index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
<title>小又又 学习 前端 </title>
<meta name="keywords" content="小又又,学前端">
<meta name="description" content="小又又的描述测试~~~~~~">
<meta name="author" content="小又又">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<main>
<header></header>
<banner></banner>
<section>栏目 1</section>
<section>栏目 2</section>
<section>栏目 3</section>
<section>栏目 4</section>
<section>栏目 5</section>
<section>栏目 6</section>
<section>栏目 7</section>
<section>栏目 8</section>
<footer></footer>
</main>
</body>
</html>
SVG 基础了解
在审查页面的稿定设计页面元素的时候，发现有使用到了一个<svg>标签，内部用的<path>,感觉很厉害，基础了解一下~~~~
<svg>
基础说明
如果svg不是根元素，svg 元素可以用于在当前文档（比如说，一个HTML文档）内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。
其实看不太懂~~~~
用法说明
| 类别 | 容器元素, 结构元素 |
|---|---|
| 允许的内容物 | 任意数量、任意排序的下列元素： 动画元素 描述性元素 形状元素 结构化元素 渐变元素 <a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>,<font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
用法说明
svg图片
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>
html5文档中使用svg
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML/SVG Example</title>
</head>
<body>
<svg width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>
</body>
</html>
全局属性说明
专有属性说明
浏览器兼容性
<path>
基础说明
path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。
听起来好厉害~~~
用法说明
| 类别 | 图形元素, 形状元素 |
|---|---|
| 允许的内容物 | 任意数量、任意排序的下列元素： 动画元素 描述性元素 |
用法说明
<svg width="100%" height="100%" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg">
<path d="M 100 100 L 300 100 L 200 300 z"
fill="orange" stroke="black" stroke-width="3" />
</svg>
全局属性说明
专有属性说明
浏览器兼容性
确认头部基础结构
<header>
<logo>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="-1 -1 59 59" width="93" height="93">
<text x="10" y="20"> LOGO </text>
<path fill="rgba(0%, 0%, 0%, 0)" fill-rule="evenodd" stroke="rgb(21%, 21%, 21%)" stroke-width="2"
stroke-linecap="butt" stroke-linejoin="miter"
d="M28.499981999397278 0.9999865293502808C43.6877977848053 0.9999865293502808 55.99995470046997 13.312144875526428 55.99995470046997 28.49996030330658C55.99995470046997 43.68777573108673 43.6877977848053 55.99993407726288 28.499981999397278 55.99993407726288C13.312166213989258 55.99993407726288 0.9999445676803589 43.68777573108673 0.9999445676803589 28.49996030330658C0.9999445676803589 13.312144875526428 13.312166213989258 0.9999865293502808 28.499981999397278 0.9999865293502808 Z">
</path>
</svg>
</logo>
<p>
<span class="shop-logo-name">
gao.ding <br />
</span>
<span class="shop-name">
稿定墙饰旗舰店 <br />
</span>
</p>
<star>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="-1 -1 46 46" width="44"
height="44">
<text x="10" y="20"> 收藏店铺 </text>
<path fill="rgba(0%, 0%, 0%, 0)" fill-rule="evenodd" stroke="rgb(20%, 20%, 20%)" stroke-width="2"
stroke-linecap="butt" stroke-linejoin="miter"
d="M21.99995708465576 0.9999944567680359C33.597949743270874 0.9999944567680359 42.999934911727905 10.402004599571228 42.999934911727905 21.99998587369919C42.999934911727905 33.59796714782715 33.597949743270874 42.99997729063034 21.99995708465576 42.99997729063034C10.40196442604065 42.99997729063034 0.9999792575836182 33.59796714782715 0.9999792575836182 21.99998587369919C0.9999792575836182 10.402004599571228 10.40196442604065 0.9999944567680359 21.99995708465576 0.9999944567680359 Z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 29 28" width="29" height="28">
<path fill="rgb(96%, 24%, 25%)" fill-rule="evenodd"
d="M14.494171261787415 9.048644304275513C11.257989168167114 1.0841652154922485 2.0591559410095215 2.942473530769348 1.9985769987106323 12.186394572257996C1.965079426765442 17.26329731941223 6.378842830657959 19.161031007766724 9.317713141441345 21.190607130527496C12.16733992099762 23.15894103050232 14.195442914962769 25.851494669914246 14.513253211975098 26.997765243053436C14.785400152206421 25.87469583749771 17.044403076171875 23.105949342250824 19.682211875915527 21.135566651821136C22.566586136817932 18.981125056743622 27.03484559059143 17.208035349845886 27.00134801864624 12.131243348121643C26.940435767173767 2.8643426299095154 17.581614136695862 1.401838481426239 14.494171261787415 9.048644304275513 Z">
</path>
</svg>
</star>
</header>
核心知识点说明
<svg><text><path>
确认海报部分基础结构
<banner>
<menu>
<ul>
<li>首页</li>
<li>所有宝贝</li>
<li>摆件</li>
<li>置物架</li>
<li>盆栽</li>
<li>墙纸</li>
<li>铁艺墙饰</li>
</ul>
</menu>
<poster>
<p class="date">
METOPE<br />
DECORATION<br />
VOL.2019<br />
</p>
<p class="slogan">
墙饰挂画<br />
只为遇见<br />
</p>
<p class="price">
RMB:99 |
</p>
</poster>
</banner>
确认商品部分基础结构
商品部分一基础结构
<section class="contanier section01">
<ul>
<li class="discount active">
<span class="unit">rmb</span><br />
<span class="amount">10</span><br />
<span class="multiply">+</span><br />
<span class="description">收藏店铺<br />无门槛</span>
</li>
<li class="discount">
<span class="unit">rmb</span><br />
<span class="amount">20</span><br />
<span class="multiply">+</span><br />
<span class="description">满 299 使用</span>
<span class="receive">领</span>
</li>
<li>
<span class="unit">rmb</span><br />
<span class="amount">30</span><br />
<span class="multiply">+</span><br />
<span class="description">满 399 使用</span>
<span class="receive">领</span>
</li>
<li>
<span class="unit">rmb</span><br />
<span class="amount">50</span><br />
<span class="multiply">+</span><br />
<span class="description">满 599 使用</span>
<span class="receive">领</span>
</li>
</ul>
</section>
商品部分二基础结构
<section class="contanier section02">
<p class="section-title">
店铺清仓公告<br />
A CLEARANCE
</p>
<p class="description">
<aside class="aside-title">
2件9折<br />
3件以上8折<br />
</aside>
<aside class="aside-description">
各位稿定墙饰的粉丝们，<br />
感谢您一直以来对我们的支持，<br />
因类目的调整，<br />
稿定墙饰将在清仓完所有春夏款式,<br />
后续将推出全新风格。
</aside>
</p>
</section>
商品部分三基础结构
<section class="contanier section03">
<p class="section-title">
ACTIVITY丨更多活动
</p>
<p class="section-sub-title">＋限时抢购，先到先得</p>
<div class="gallery">
<aside class="gallery-aside ">
<logo>logo</logo> <span class="aside-time">每天20:00限量抢单</span><br />
<p>
<span class="status-text">直播中</span>
<span class="status-number">209485观看</span>
</p>
<p>
<span class="star">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 29 28" width="29"
height="28">
<path fill="rgb(96%, 24%, 25%)" fill-rule="evenodd"
d="M14.494171261787415 9.048644304275513C11.257989168167114 1.0841652154922485 2.0591559410095215 2.942473530769348 1.9985769987106323 12.186394572257996C1.965079426765442 17.26329731941223 6.378842830657959 19.161031007766724 9.317713141441345 21.190607130527496C12.16733992099762 23.15894103050232 14.195442914962769 25.851494669914246 14.513253211975098 26.997765243053436C14.785400152206421 25.87469583749771 17.044403076171875 23.105949342250824 19.682211875915527 21.135566651821136C22.566586136817932 18.981125056743622 27.03484559059143 17.208035349845886 27.00134801864624 12.131243348121643C26.940435767173767 2.8643426299095154 17.581614136695862 1.401838481426239 14.494171261787415 9.048644304275513 Z">
</path>
</svg>
</span><br />
<span class="star-number">1256</span>
</p>
<p class="gallery-text">①淘宝直播/抢免单</p>
</aside>
<aside class="gallery-aside ">
<p class="gallery-text">②满1299送插花摆件</p>
</aside>
<aside class="gallery-aside ">
<p class="gallery-text">③每天前100名下单送挂钟</p>
</aside>
</div>
</section>
商品部分四基础结构
<section class="section04">
<poster>
<p class="slogan">
SELL LIKE<br />
HOT<br />
CAKES<br />
</p>
<p class="price">
RMB:99 |
</p>
</poster>
</section>
商品部分五基础结构
<section class="section05 contanier">
<poster>
<p class="slogan">
SELL LIKE<br />
HOT<br />
CAKES<br /><br />
花木挂墙画<br />
</p>
<p>极简北欧</p>
<p class="price">
RMB:199 |
</p>
</poster>
</section>
商品部分六基础结构
<section class="section06 contanier">
<aside class="good good01">
<p class="good-text">实木墙上置物架 RMB：128</p>
</aside>
<aside class="good good02">
<p class="good-text">铁艺墙上挂书架 RMB：158</p>
</aside>
</section>
商品部分七基础结构
<section class="section07 contanier">
<p class="section-title">
产品分类导航
</p>
<p class="section-sub-title">CATEGORY</p>
<aside class="good good01">
<p class="good-title">春夏特辑</p>
</aside>
<aside class="good">
<aside class="good good02">
<p class="good-sub-title">装饰画专区</p>
</aside>
<aside class="good good03">
<p class="good-sub-title">置物架专区</p>
</aside>
</aside>
</section>
商品部分八基础结构
<section class="section08 contanier">
<aside>
<aside class="section-title">
MORE<br />
PRODUCTS<br />
RECOMMENDED PRODUCTS<br /><br />
更多推荐<br />
</aside>
<aside class="section-sub-title">
+全店明星产品推荐
</aside>
<aside class="good good01">
<p class="good-sub-title">几何·清新·质感 RMB：98</p>
</aside>
<aside class="good good02">
<p class="good-sub-title">铁艺置物架 RMB：29</p>
</aside>
</aside>
<aside>
<aside class="good good03">
<p class="good-sub-title">北欧墙饰组合 RMB：128</p>
</aside>
<aside class="good good04">
<p class="good-sub-title">挂墙清新布艺 RMB：48</p>
</aside>
<aside class="slogan">
稿定墙饰-装饰美好生活
</aside>
</aside>
</section>
核心知识点说明
- 语义化标签
- 页面结构分类
- 观察页面相似结构
- 保证需要设置样式的标签一定要提前添加样式属性
- 尽可能保证标签组合之后，页面能通过添加样式实现相关效果
确认底部基础结构
<footer>
返回顶部
</footer>
今日学习总结
今日心情
今天主要来说就是通过合理的使用语义化标签和 class，尽可能的做页面结构的优化，已经尽力考虑大部分样式实现效果，自我感觉很良好~~~，也基础了解了一下<svg>标签，更期待明天的添加样式之后的效果了~~~
本文使用 mdnice 排版
