07_MDN前端基础学习/一，HTML入门—高级文字格式—文档与网站架构—调试除错

最新推荐文章于 2024-03-08 15:05:33 发布

paidaxing_dashu

最新推荐文章于 2024-03-08 15:05:33 发布

阅读量200

点赞数

分类专栏： CSS/HTML/JS 文章标签：前端基础

本文链接：https://blog.csdn.net/paidaxing_dashu/article/details/89519543

版权

CSS/HTML/JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一，高级文字格式

1）描述列表

在这里插入图片描述

2）引用

HTML也有用于标记引用的特性，至于使用哪个元素标记，取决于你引用的是一块还是一行。

在这里插入图片描述

3）缩略语

在这里插入图片描述

4）标记联系方式

在这里插入图片描述

5）上标和下标

在这里插入图片描述

6）展示计算机代码

在这里插入图片描述

7）标记时间和日期

在这里插入图片描述

二，文档与网站架构

1）文档的基本构成

在这里插入图片描述

2）用于构建内容的HTML

在这里插入图片描述

代码中可见的区段：
<!DOCTYPE html>
<html>
	<head>	
		<meta charset="utf-8">
		<title>二次元俱乐部</title>
		<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
	</head>
	<body>				
		<header> <!-- 本站所有网页的统一主标题 -->
  			<h1>聆听电子天籁之音</h1>    	
		</header>

		<nav> <!-- 本站统一的导航栏 -->
  			<ul>
    			<li><a href="#">主页</a></li>
    			<!-- 共n个导航栏项目，省略…… -->
  			</ul>

  			<form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
    			<input type="search" name="q" placeholder="要搜索的内容">
    			<input type="submit" value="搜索">
  			</form>
		</nav>

		<main> <!-- 网页主体内容 -->
  			<article>
  		  		<!-- 此处包含一个 article（一篇文章），内容略…… -->
  			</article>
  
      		<aside> <!-- 侧边栏在主内容右侧 -->
		        <h2>相关链接</h2>
    			<ul>
      				<li><a href="#">这是一个超链接</a></li>
      				<!-- 侧边栏有n个超链接，略略略…… -->
  				</ul>
  			</aside>
		</main>

		<footer> <!-- 本站所有网页的统一页脚 -->
  			<p>© 2050 某某保留所有权利</p>
		</footer>
	</body>
</html>

这段布局代码展示的效果：
在这里插入图片描述

3）无语义元素

在这里插入图片描述

4）换行与水平分割线

在这里插入图片描述

5）规划一个简单的网站

在完成页面内容的规划后，一般应按部就班地规划整个网站的内容，要可能带给用户最好的体验，需要哪些页面、如何排列组合这些页面、如何互相链接等问题不可忽略。这些工作称为信息架构。在大型网站中，大多数规划工作都可以归结于此，而对于一个只有几个页面的简单网站，规划设计过程可以更简单，更有趣！
在这里插入图片描述

三，调试

1）调试并不可怕

在这里插入图片描述

2）HTML和调试

在这里插入图片描述

3）宽容的代码风格

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML

4）HTML验证

阅读以上示例后，你发现保持良好 HTML 格式的重要性。那么应该如何做呢？以上示例规模较小，查找错误还不难，但是一个非常庞大、复杂的 HTML 文档呢？

最好的方法就是让你的HTML页面通过Markup Validation Service：https://validator.w3.org/。由 W3C（制定 HTML、CSS 和其他网络技术标准的组织）创立并维护的标记验证服务。把一个 HTML 文档加载至本网页并运行，网页会返回一个错误报告。
在这里插入图片描述