针对标题的问题，我思考了很久，不知道大家有没有和我一样的疑问呢？在此仅发表个人看法，大家有好的建议欢迎提出来。
一、html基本结构
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
二、工作中常用的布局标签
(1)块状：
* <ul>
* <dl>
* <table>
* <h1>...<h6>
* <p>
* <div>
* <form>
(2)内联（行内）：
* a
* i
* img
* input
* span
* strong
(3)可变元素
*button
我用的就这些了，html文档中的很多没用过
三、结构选择这个话题比较大，我举2个例子吧（这儿就不贴css啦）
例1：实现如下图的布局
demo1：布局如下
<div class="item">
<div class="item-pic">
<a class="item-link" href="">
<img src="image/test.jpg" alt="">
</a>
</div>
<p class="item-title">
<a href="" class="item-des">文字内容文字内容</a>
</p>
<p class="item-litl">选择选择选择</p>
</div>
demo2：布局如下
<dl>
<dt>图片</dt>
<dd>
<a href="">文字内容文字内容</a>
<p>选择选择选择</p>
</dd>
</dl>
demo3:布局如下
<div class="item">
<div class="left"><img src="" alt=""></div>
<div class="right">
<a href="">文字内容文字内容</a>
<p>选择选择选择</p>
</div>
</div>
这样的结构还可以有很多写法，不管怎样都能实现效果，但是好不好对比就知道了吧
例2：实现如下图的布局
demo1:布局如下
<ul>
<li class="cur"><a href="">栏目1</a></li>
<li><a href="">栏目2</a></li>
<li><a href="">栏目3</a></li>
<li><a href="">栏目4</a></li>
</ul>
demo2:布局如下
<div>
<a href="" class="cur">栏目1</a>
<a href="">栏目2</a>
<a href="">栏目3</a>
<a href="">栏目4</a>
</div>
布局中常见的就是保证标准结构，大块布局结构选择，细节结构选择还有方便套数据，方便多个尺寸布局吧
9446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
