您的位置：首页 > Web前端 > HTML

什么样的html结构是合理的？

2016-12-13 17:35 197 查看
针对标题的问题，我思考了很久，不知道大家有没有和我一样的疑问呢？在此仅发表个人看法，大家有好的建议欢迎提出来。
一、html基本结构
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

</body>

</html>

如果只是静态页相信对大家来说没什么难点，但是遇上前后端不分离的项目，后端开发真能弄出两个body来，因为可能遇到头尾共用或外部引入等情况，要保持这样的标准结构还是需要前端制定规范解决的

二、工作中常用的布局标签
(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>

这样常见的导航，你会选择什么结构呢？

布局中常见的就是保证标准结构，大块布局结构选择，细节结构选择还有方便套数据，方便多个尺寸布局吧
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 结构
相关文章推荐
新的分享
章节导航