文章/答案/技术大牛

发布

社区首页 >问答首页 >基本网页结构

问基本网页结构
EN

Code Review用户

提问于 2014-04-29 15:02:28

回答 3查看 924关注 0票数 7

我是新的HTML编码，并创建了一个基本的网页结构，一个基本的网站与5页。

有谁能提出改进意见，以帮助网页的结构、布局和设计？

其中一个页面的代码如下(除名称外)：

<!DOCTYPE html>
<html lang="en-GB">
<Head>
    <title>Fellows and Fullwood LTD</title>
    <meta Charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</Head>
<body>
    <div id="container">
        <div id="Header">
            <h1 align="center"><img src="Images/fellows.gif" width="150" height="39" longdesc="Images/fellows.gif"><font size="12">Fellows and Fullwood</font></h1>
        </div>
        <div id="nav">
            <u1><!--
            --><li><a href="#">Home</a></li><!--
            --><li><a href="#">About Us</a></li><!--
            --><li><a href="#">News</a></li><!--
            --><li><a href="#">Careers</a></li><!--
            --><li><a href="#">Contact Us</a></li>
            </u1>
        </div>
        <div id="Main">
          <h2>Contact us</h2><form  action="" method="POST" enctype="multipart/form-data">
            <div align="center">
              <p>
                <input type="hidden" name="action" value="submit"/> 
              </p>
              <p>Your name:<br>
              <input name="name" type="text" value="" size="30"/>
                <br /> 
                Your email:<br>
                <input name="email" type="text" value="" size="30"/>
  <br /> Your message:<br />
                <textarea name="message" rows="7" cols="30"> </textarea> 
 <br /><input type="submit" value="Send email"/>
              </p>
            </div>
          </form> 

            <p>lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here 
            </p>
        </div>
        <div id="Sidebar">
            <h2>Sidebar</h2>
            <u1>
              <li><a href="#">Home</a>                  </li>
              <br></br>
                <li><a href="#">About Us</a></li>
              <br></br>
                <li><a href="#">News</a></li>
              <br></br>
                <li><a href="#">Careers</a></li>
              <br></br>
                <li><a href="#">Contact Us</a></li>
                <br></br>
          </u1>
        </div>
        <div id="Footer">
            <p>©Copyright Fellows and Fullwood 2014.</p>
        </div>
    </div>
</body>

html

beginner

回答 3

Code Review用户

发布于 2014-04-29 15:11:43

      <div id="Header">

HTML5引入了元素。

          <h1 align="center">

不要使用表示属性，比如align，使用CSS。

          <img src="Images/fellows.gif" width="150" height="39" longdesc="Images/fellows.gif">

alt属性是强制性的。如果后面的文本重复图像中的信息，则使用alt=""。

longdesc属性已经从HTML5中删除。在HTML4中，它应该指向描述图像的HTML文档(对于那些看不到图像的人)，而不是图像本身。

          <font size="12">Fellows and Fullwood</font>

<font>元素是已过时，不应该使用(而且我很确定12对它来说不是一个有效的大小)。使用CSS。

          </h1>
      </div>
      <div id="nav">

HTML5引入了元素。

          <u1><!--

无序列表是ul而不是u1。

使用验证器。

          --><li><a href="#">Home</a></li><!--
          --><li><a href="#">About Us</a></li><!--
          --><li><a href="#">News</a></li><!--
          --><li><a href="#">Careers</a></li><!--
          --><li><a href="#">Contact Us</a></li>
          </u1>
      </div>
      <div id="Main">

HTML5引入了

        <h2>Contact us</h2><form  action=""

如果要解析到当前URI，可以完全省略action属性。

         method="POST" enctype="multipart/form-data">
          <div align="center">
            <p>
              <input type="hidden" name="action" value="submit"/> 
            </p>

这种形式的大多数段落充其量是可疑的，但这是错误的。用户根本没有任何内容，当然也没有段落。

            <p>Your name:<br>

请学会喜爱标签

            <input name="name" type="text" value="" size="30"/>
              <br />

一般来说，更喜欢容器元素和CSS边距/填充，而不是硬换行。当换行符是内容的重要部分时，<br>是最有用的，否则内容是连续的(例如街道地址或诗歌)。

      <div id="Footer">
          <p>©Copyright Fellows and Fullwood 2014.</p>
      </div>

HTML5引入了元素。

票数 15

Code Review用户

发布于 2014-04-29 15:12:30

以后，您可以访问此站点以获得帮助：http://validator.w3.org/check

下面是我通过将代码粘贴到验证器中发现的错误：

h1元素上的对齐属性已经过时。使用CSS代替。最好是把内容和风格分开。
img元素必须具有alt属性，但在某些条件下除外。有关详细信息，请参阅关于为图像提供文本替代方案的指南。
字体元素过时了:再次使用css。
元素中不允许元素u1作为元素div的子元素。你真的不需要那个div :)
使用</br>是错误的:它没有结束标记，相反使用这个：<br/>

票数 3

Code Review用户

发布于 2014-04-29 15:20:01

我说您使用的是<Head>..</Head>和<body>..</body>，这并不是非常一致的。我建议你把它换成小写字母，所以：<head>..</head>。

另一个提示:如果你想要虚拟文本，请到Google上查看一下"Lorem“。

票数 3

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/48489

复制

相似问题

问基本网页结构
EN

回答 3

Code Review用户

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基本网页结构EN

回答 3

Code Review用户

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基本网页结构
EN