实训前端作业1_juster

镇江软通极客实训_前端_作业1

---

1. 阅读下列文章内容

• HTML_百度百科

• HTML - MDN Web 文档

  https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=html%E4%BB%8B%E7%BB%8D&oq=html%25E7%259A%2584%25E5%258E%2586%25E5%258F%25B2&rsv_pq=9a92c5a500034b3e&rsv_t=a9dcM71pj%2BqBrpf8YM2zJlAy1Lkyz1HUs6KiysGPQat87Otnd%2BfQ96MUUsc&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=1913&rsv_sug3=23&rsv_sug1=15&rsv_sug7=100&rsv_sug2=0&rsv_sug4=3160
  

2. 写出URL的组成成分，并分析下方URL，写出其各部分所表示的含义。

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=html%E4%BB%8B%E7%BB%8D&oq=html%25E7%259A%2584%25E5%258E%2586%25E5%258F%25B2&rsv_pq=9a92c5a500034b3e&rsv_t=a9dcM71pj%2BqBrpf8YM2zJlAy1Lkyz1HUs6KiysGPQat87Otnd%2BfQ96MUUsc&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=1913&rsv_sug3=23&rsv_sug1=15&rsv_sug7=100&rsv_sug2=0&rsv_sug4=3160

URL的组成成分一般有以下几个部分：

• 协议：指定了URL的类型，如https，http，ftp等。
• 域名：指定了URL的主机名，如www.baidu.com，www.microsoft.com等。
• 端口：指定了URL的端口号，用于区分同一主机上不同的服务。默认情况下，https协议的端口号是443，http协议的端口号是80，可以省略不写。
• 路径：指定了URL的资源路径，如/s，/index.html等。
• 查询字符串：指定了URL的参数，以?开头，由键值对组成，用&分隔。如ie=utf-8&f=8等。
• 片段标识符：指定了URL的锚点，以#开头，用于定位页面中的某个位置。如#top，#section1等。

下方URL的各部分所表示的含义如下：

• 协议：https，表示使用安全的超文本传输协议。

• 域名：www.baidu.com，表示使用百度搜索引擎的网站。

• 端口：省略不写，默认为443。

• 路径：/s，表示使用百度搜索引擎的搜索功能。

• 查询字符串：ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=html%E4%BB%8B%E7%BB%8D&oq=html%25E7%259A%2584%25E5%258E%2586%25E5%258F%25B2&rsv_pq=9a92c5a500034b3e&rsv_t=a9dcM71pj%2BqBrpf8YM2zJlAy1Lkyz1HUs6KiysGPQat87Otnd%2BfQ96MUUsc&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=1913&rsv_sug3=23&rsv_sug1=15&rsv_sug7=100&rsv_sug2=0&rsv_sug4=3160，表示以下参数：

  • ie=utf-8，表示使用UTF-8编码格式。
  • f=8，表示使用百度搜索引擎的第八种风格。
  • rsv_bp=1，表示使用百度搜索引擎的备用页面。
  • tn=baidu，表示使用百度搜索引擎的标准模板。
  • wd=html%E4%BB%8B%E7%BB%8D，表示搜索关键词是html介绍（经过URL编码）。
  • oq=html%25E7%259A%2584%25E5%258E%2586%25E5%258F%25B2，表示上一次搜索关键词是html的历史（经过URL编码）。
  • rsv_pq=9a92c5a500034b3e，表示本次搜索请求的唯一标识符。
  • rsv_t=a9dcM71pj+qBrpf8YM2zJlAy1Lkyz1HUs6KiysGPQat87Otnd+fQ96MUUsc，表示本次搜索请求的时间戳和校验码。
  • rqlang=cn，表示使用中文作为搜索语言。
  • rsv_enter=1，表示使用回车键提交搜索请求。
  • rsv_dl=tb，表示使用百度搜索引擎的网页模式。
  • rsv_btype=t，表示使用百度搜索引擎的普通模式。
  • inputT=1913，表示输入关键词所用的时间（毫秒）。
  • rsv_sug3=23，表示显示23条相关搜索建议。
  • rsv_sug1=15，表示显示15条搜索历史记录。
  • rsv_sug7=100，表示使用百度搜索引擎的默认排序方式。
  • rsv_sug2=0，表示不使用百度搜索引擎的实时搜索功能。
  • rsv_sug4=3160，表示本次搜索请求的总耗时（毫秒）。

• 片段标识符：省略不写，表示没有指定锚点。

3. 写出ip地址与域名的关系

• IP地址与域名之间存在着映射关系，一个域名可以对应多个IP地址，而一个IP地址也可以对应多个域名。

• 当用户在浏览器中输入一个域名时，浏览器会向本地DNS服务器发送请求，询问该域名对应的IP地址。

• 如果本地DNS服务器没有缓存该域名对应的IP地址，则会向根DNS服务器发起查询请求，根DNS服务器会将该请求转发给相应的顶级域名服务器，最终找到该域名对应的IP地址，并返回给本地DNS服务器。

• 本地DNS服务器再将IP地址返回给浏览器，浏览器便可以通过该IP地址访问该域名所对应的网站。

4. 如果要将网页发布到互联网上，需要哪些过程？（写出大概步骤即可）

• 购买域名和服务器空间。

• 将网页文件上传至服务器空间，可以使用FTP等工具进行上传。

• 配置网站的基本信息，如网站标题、描述、关键词等。

• 对网站进行优化，如设置网站地图、robots.txt文件等。

• 进行网站备份和安全设置，以确保网站的可靠性和安全性。

• 推广网站，可以使用SEO等方式提高网站的曝光率和流量。

• 定期维护网站，包括更新内容、修复漏洞、升级系统等。

5. html与html5有什么区别？（从互联网中搜索资料了解）

• HTML5是HTML的最新版本，与之前的HTML4相比，有以下几个主要区别：

  • 新的语义化标签：HTML5新增了许多新的语义化标签，如<header>、<nav>、<section>、<article>、<aside>等，可以更好地描述网页内容结构，使搜索引擎和屏幕阅读器等工具能够更好地理解和处理网页。

  • 更多的表单控件：HTML5新增了很多表单控件，如日期选择器、时间选择器、颜色选择器、范围选择器等，使得网页的表单功能更加丰富和灵活。

  • 多媒体支持：HTML5原生支持音频和视频播放，不需要使用Flash或其他插件，提高了网页的兼容性和效率。

  • Canvas和SVG：HTML5新增了Canvas和SVG两种绘图技术，使得网页可以实现更加复杂和精美的图形效果。

  • Web存储：HTML5提供了Web Storage和IndexedDB两种本地存储技术，可以在客户端保存数据，使得网页可以离线运行和缓存数据，提高用户体验。

6. 网页由哪些基本组成部分？

网页由以下几个基本组成部分构成：

• HTML代码：HTML是网页的基础，它定义了网页的结构和内容。
• CSS样式表：CSS用于控制网页的外观和样式，包括颜色、字体、布局等方面。
• JavaScript脚本：JavaScript可以实现网页的动态效果和交互功能，如表单验证、页面切换、轮播图等。
• 图片、音频、视频等媒体文件：这些文件可以丰富网页的内容和形式，使其更加生动有趣。
• 服务器端程序：如果网页需要与服务器进行交互或者提供动态内容，则需要使用服务器端程序，如PHP、ASP.NET等。

7. 标签分为哪几类？

在HTML中，标签可以分为以下几类：

• 块级标签：块级标签用于创建块级元素，这些元素通常用于组织页面的结构和布局。块级元素会占据整个父元素的宽度，并在前后添加额外的空白。常见的块级标签包括<div>、<p>、<h1>~<h6>等。
• 行内标签：行内标签用于创建行内元素，这些元素通常用于表示文本或对文本进行修饰。行内元素只占据所需的宽度，并且不能在前后添加额外的空白。常见的行内标签包括<span>、<a>、<img>等。
• 行内块级标签：行内块级标签用于创建行内块级元素，这些元素既具有块级元素的特性，又具有行内元素的特性。行内块级元素会占据所需的宽度，并允许在前后添加额外的空白。常见的行内块级标签包括<input>、<button>等。
• 元信息标签：元信息标签用于提供有关文档的信息，如标题、描述、关键词等。元信息标签不会直接显示在页面上，但对搜索引擎优化(SEO)等方面有重要作用。常见的元信息标签包括<title>、<meta>、<link>等。
• 特殊标签：特殊标签用于插入非HTML内容，如脚本、样式表、注释等。常见的特殊标签包括<script>、<style>、<!-- -->等。

8. 属性的作用是什么？写在哪里？什么是布尔属性？

在HTML中，属性用于为元素提供额外的信息，以控制元素的行为和样式。例如，可以使用class属性来指定元素所属的CSS类，或使用id属性为元素添加唯一标识符。属性通常包含一个名称和一个值，它们都写在元素的起始标签中，如下所示：

<div class="container" id="main-content">这是一个容器元素</div>

在上面的例子中，class和id是两个属性，它们分别被赋予了值"container"和"main-content"。这些属性可以用来控制元素的样式或行为，比如在CSS中通过类选择器或ID选择器来选择元素。

布尔属性是一种特殊类型的属性，它没有值，只有存在或不存在两种状态。例如，disabled属性用于禁用表单元素，如果存在该属性，则表示该元素被禁用；否则，该元素处于启用状态。在HTML中，布尔属性可以简写为只有属性名的形式，如下所示：

<input type="checkbox" checked disabled>

在上面的例子中，checked和disabled都是布尔属性，它们的存在表示选中状态和禁用状态。注意，布尔属性的简写方式不需要使用等号或引号。

9. 元素与标签的联系？

在HTML中，元素和标签是密切相关的概念。元素是指由起始标签、结束标签、属性以及其中间的内容组成的整体，而标签则是用来标记元素的关键字。举个例子，<p>和</p>分别是段落元素的起始标签和结束标签，它们将包含在它们之间的文本内容标记为一个段落元素。

在HTML中，每个元素都必须有一个对应的标签，并且这两个标签必须匹配。如果标签不匹配，浏览器会自动纠正错误，但这可能会导致意想不到的结果。因此，在编写HTML代码时，务必要注意标签的使用方式和正确性。

10. 元素分为哪几类？

在HTML中，元素可以分为以下几类：

• 块级元素（Block-level Elements）：块级元素通常用于表示页面上的结构，如标题、段落、列表、表格等。块级元素会独占一行，并且可以设置宽度、高度、内外边距等样式属性。常见的块级元素有<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<table>等。

• 内联元素（Inline Elements）：内联元素通常用于表示文本内容，如加粗、斜体、超链接等。内联元素不会独占一行，而是在同一行上显示，并且只能设置部分样式属性，如文字颜色、字体大小、文本装饰等。常见的内联元素有<span>、<a>、<strong>、<em>、<img>等。

• 内联块级元素（Inline-block Elements）：内联块级元素是介于块级元素和内联元素之间的一种元素。内联块级元素会独占一行，但是可以与其他元素共享一行，并且可以设置宽度、高度、内外边距等样式属性。常见的内联块级元素有<input>、<button>、<select>、<textarea>等。

• 表格元素（Table Elements）：表格元素通常用于表示表格结构，如表头、表格行、表格单元格等。表格元素可以嵌套使用，并且可以设置边框、背景色等样式属性。常见的表格元素有<table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>等。

• 表单元素（Form Elements）：表单元素通常用于收集用户输入的数据，如文本框、下拉框、单选框、复选框等。表单元素需要配合表单标签<form>一起使用，并且可以设置默认值、校验规则等属性。常见的表单元素有<input>、<select>、<textarea>、<button>、<label>等。

除了以上几类元素外，还有一些特殊的元素，如<head>、<body>、<html>等，它们不会直接在页面上显示，而是用于定义页面的各种属性和信息。

11. 分析网页产生乱码的原因，并提出解决方案？

产生乱码的原因可能有很多种，以下是一些常见的原因和对应的解决方案：

• 字符编码不匹配：如果网页使用的字符编码与浏览器设置的字符编码不一致，就会出现乱码。例如，网页使用UTF-8编码，但是浏览器设置为GB2312编码。

  解决方案：在网页的head标签中添加<meta charset="utf-8">来指定字符编码。

• 文件编码格式错误：如果网页文件的编码格式不正确，也会导致乱码。例如，用UTF-8编写了一个文本文件，但是将其保存为GB2312格式。

  解决方案：使用专业的编辑器或者工具来编辑网页文件，并将文件保存为正确的编码格式。

• 特殊字符未转义：如果网页中包含了一些特殊字符，如“<”、“>”、“&”等，这些字符需要进行转义才能在网页中正确显示。

  解决方案：将特殊字符替换为对应的HTML实体，例如“<”替换为“<”，“>”替换为“>”，“&”替换为“&”。

• 缺少字体支持：如果网页使用了某些字体，但是浏览器没有相应的字体支持，就会出现乱码。

  解决方案：使用通用的字体，如Arial、Times New Roman等，或者在网页中指定特定的字体。

• 数据库编码错误：如果网页从数据库中读取数据，并且数据库编码与网页编码不匹配，也会出现乱码。

  解决方案：在建立数据库连接时设置正确的字符集。

12. 如果需要给网页内容之间添加空格和换行？能直接使用回车键和空格键吗？为什么？

如果需要给网页内容之间添加空格和换行，我们可以使用HTML中的空格符号和换行符号。

在HTML中，如果我们直接使用回车键和空格键来添加空格和换行，那么这些空格和换行将被忽略，因为HTML会自动忽略多余的空格和换行，只保留一个空格或一个换行。这是因为HTML是一种结构化标记语言，它的主要目的是描述文档的结构和内容，而不是样式。如果我们想要精确地控制网页的样式，应该使用CSS来定义样式，而不是依赖于HTML的默认样式。

因此，如果我们需要在HTML中添加空格和换行，可以使用下面的方式：

• 空格符号：使用 表示一个空格，使用 表示四个空格。

• 换行符号：使用<br>标签表示一个换行。

需要注意的是，使用过多的空格和换行可能会导致代码冗长、难以维护，因此应该尽量避免滥用。

13. 注释的作用是什么？

在HTML中，注释是一种用于添加文档说明或标记的特殊语法。注释可以让我们在HTML代码中添加对代码的解释和说明，从而方便其他开发人员理解代码的意图和实现方式。注释不会被浏览器解析为网页内容，因此不会影响页面的显示效果。

注释可以用于以下几个方面：

• 提供代码说明：注释可以为代码提供详细的说明和解释，使得其他开发人员更容易理解代码的功能和实现方式。

• 调试代码：通过注释可以暂时屏蔽某段代码，从而方便调试和测试代码。

• 保留备份代码：有时候我们可能需要修改某段代码，但又希望保留原始代码的备份，这时可以使用注释来注释掉原始代码，以便以后恢复。

• 暂时删除代码：有时候我们可能需要删除某段代码，但又希望保留该代码的备份，这时可以使用注释来注释掉该代码，以便以后恢复。

总之，注释是一种非常重要的HTML语法，它可以让我们更加方便地管理和维护网页代码，从而提高代码的可读性、可维护性和可扩展性。

14. 常见的全局属性有哪些？

在HTML中，全局属性是可以应用于所有HTML元素的通用属性。以下是常见的全局属性：

• class：为元素指定一个或多个类名，用于样式控制和JavaScript操作。

• id：为元素指定唯一的标识符，用于JavaScript操作和页面内部跳转锚点等场景。

• style：为元素指定CSS样式规则，用于控制元素的外观和布局。

• title：为元素指定一个提示文本，当鼠标悬停在元素上时会显示该文本。

• lang：为元素指定语言代码，用于国际化和语音合成等场景。

• tabindex：为元素指定键盘导航顺序，用于辅助技术和无障碍访问。

• accesskey：为元素指定快捷键，用于方便用户通过键盘操作访问网页。

• contenteditable：指定元素是否可编辑，用于富文本编辑器等场景。

• hidden：指定元素是否隐藏，用于动态显示或隐藏元素。

• data-*：自定义数据属性，用于存储元素相关的数据，供JavaScript操作使用。

这些全局属性都可以应用于任何HTML元素，可以帮助我们更加灵活地控制和管理网页的内容和行为。

15. id属性与class属性的区别？

在HTML中，id属性和class属性都是用来为HTML元素添加样式或行为的属性，它们之间有以下几个区别：

• 唯一性：id属性必须是唯一的，即在同一个HTML文档中不能有重复的id值；而class属性可以在多个元素中使用相同的class名称。
• 作用范围：id属性作用于单个元素，而class属性可以作用于多个元素。
• 权重：id属性的权重比class属性高，也就是说，当同时应用了id和class属性的样式时，id属性的样式会覆盖class属性的样式。
• JavaScript操作：id属性可以方便地通过JavaScript获取元素的引用，而class属性则需要通过其他方式来获取。

总之，id属性主要用于唯一标识某个元素，通常用于JavaScript操作或者页面内部跳转锚点等场景；而class属性则用于标识一组元素，方便对它们进行共同的样式或行为控制。