网页设计类的基本文本网站需要指针[关闭]答案

【问题标题】：basic text website for web design class need pointers [closed]网页设计类的基本文本网站需要指针[关闭]
【发布时间】：2016-01-31 21:49:52
【问题描述】：

我正在上一门网页设计课程，任务是制作一个具有以下要求的基本文本网站链接到外部页面从网站嵌入的图像。

bold

italics

carriage return

list

font color change

font face change

comments

title

Heading <h1> <h2> etc... 在我上交之前，我想知道代码是否足够干净，以及在 0 到 100 的范围内如何评价它？

<!DOCTYPE html>
<html>
 <head>
<title>DJ Khaled key to success</title>
</head>
<!---https://twitter.com/djkhaled/status/649808000987865088-->
 <style>
  body {
background-image: url("http://i-cdn.phonearena.com/images/articles/168223-   image/First-HTC-One-M9-wallpaper.jpg");
background-color: #cccccc;
background-size: 1400px 675px;
background-repeat: no-repeat;

 }
  </style>
    <body>
    <font color="#0099ff"face="arial" size="7"><i>The key to more success is coco butter!</i></font></br>

  <a href="http://www.theydontwantyouto.win/"><img src="https://usatftw.files.wordpress.com/2015/12/khaled1.gif?w=1000http://i.imgur.com/qsoXB3G.gif> width="300" height="230"></a>
<br><b>click the gif above for the key to success</B><br>
   <h1>The keys to success -by DJ Khaled</h1>
 <ol>
<li><b>The key is to make it.</b></li>

 <li><b>Another one.</b></li>

 <li><b>Key to more success is clean heart and clean face.</b></li>

 <li><b>Smh they get mad when u have joy.</b></li>

  <li><b>There will be roadblocks but we will overcome them.</b></li>

 <li><b>You smart! You loyal! You're a genius!</b></li>

 <li><b>Those that weather the storm are the great ones.</B></li>

 <li><b>I changed a lot</b></li>

 <li><b>They don't want you to jet ski.</b></li>

 <li><b>I can deal with everything. I got the answer for anything.</B></li>
</body>
</html>

【问题讨论】：

我从来不知道 SO 会评价代码.. :) 代码审查更好..
不太适合这个网站，它是为了在你遇到困难时获得帮助。也就是说...您以 <b> 打开但以 </B> 关闭。始终如一。一个提示是先将打开/关闭标签写在一起，然后在它们之间放置内容。好的代码编辑器或快捷工具将为您做到这一点。此外，正确缩进代码 - 同一级别的标签应该具有相同的缩进。例如。 <body> 在 <html> 内 & 应该缩进，在 <ol> 内缩进 <li> 项目 1 级但彼此处于同一级别。内联style 并不理想，但对于第一个项目来说还可以。最后：你应该水上摩托！

标签： html css

【解决方案1】：

我想指出您可以进行的一些更改，这些更改可以改进您的设计并有助于长期维护。

适当地缩进您的代码。大多数 IDE/编辑器已经为您完成了这些工作。

为什么要这样做？ - 更易于阅读和管理。

使用external 级联样式表而不是style tags 或inline 样式。

为什么要这样做？

保持 html 文件小而不臃肿。
它易于维护，您只需要转到该文件，而不必滚动并使用查找和替换功能，如果您的 html 变得更大，您将拉扯头发，尤其是如果您嵌套很重。
这也是一种将 演示文稿 逻辑与标记。

【讨论】：

【解决方案2】：

页面标题语法错误。应该是：

<title>DJ Khaled's key to success</title>

这是一个带有更改的 JSFIddle：JSFiddle

我已删除 css 并将其放入单独的样式表中。

我已将<B> 标签更改为<b> 标签。而且，你的 src 标签有错误，我已经改变了。

【讨论】：

【解决方案3】：

您应该考虑<strong> 和<em> 而不是<b> 和<i>（它们赋予突出显示的文本一些含义，而不是粗体和斜体部分）。此外，<font> 标签现在已弃用，不应使用（如果是课程要求，您应该向您的导师评论）。

您的<style> 标签位于<head> 之外

而且您的一些标签使用大写文本，而其他标签使用小写。

【讨论】：