devbox
在线问答5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Javaweb学习之HTML（二）

作者：在线问答5 | 2024-08-18 07:29:32

赞

踩

Javaweb学习之HTML（二）

 推荐学习使用网站

w3school 在线教程

HTML使用实例

头部

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

  1. <!DOCTYPE html>  
  2. <!-- 声明文档类型和HTML版本，这里虽然没有直接写出DOCTYPE声明，但通常我们会包含它，例如：<!DOCTYPE html> -->  
  3. <html>  
  4. <head>  
  5.     <!-- 定义文档的头部信息 -->  
  6.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  7.     <!-- 设置文档的内容类型和字符集。注意：gb2312是较旧的字符编码，现代网页建议使用UTF-8。 -->  
  8.     <meta http-equiv="Content-Language" content="zh-cn" />  
  9.     <!-- 设置文档的语言，这里指定为简体中文。 -->  
  10.   
  11.     <title>标题不会显示在文档区</title>  
  12.     <!-- 设置网页的标题，这个标题会显示在浏览器的标签页上，而不是在网页的内容区域。 -->  
  13. </head>  
  14.   
  15. <body>  
  16.     <!-- 定义网页的主体内容 -->  
  17.     <p>这段文本会显示出来。</p>  
  18.     <!-- 这是一个段落标签，里面的文本“这段文本会显示出来。”将会在页面上显示。 -->  
  19. </body>  
  20.   
  21. </html>

 HTML 头部元素

标签描述
<head>定义关于文档的信息。
<title>定义文档标题。
<base>定义页面上所有链接的默认地址或默认目标。
<link>定义文档与外部资源之间的关系。
<meta>定义关于 HTML 文档的元数据。
<script>定义客户端脚本。
<style>定义文档的样式信息。

 布局

<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

  1. W3School TIY Editor
  2. W3School 在线教程
  3. 改变方向
  4. 暗黑模式
  5. 运行代码
  6. -
  7. <!DOCTYPE html>  
  8. <html>  
  9.   
  10. <head>  
  11. <style>  
  12. /* 头部样式 */  
  13. #header {  
  14.     background-color:black;  
  15.     color:white;  
  16.     text-align:center;  
  17.     padding:5px;  
  18. }  
  19.   
  20. /* 导航栏样式 */  
  21. #nav {  
  22.     line-height:30px; /* 行高设置，使文本垂直居中 */  
  23.     background-color:#eeeeee;  
  24.     height:300px; /* 导航栏高度 */  
  25.     width:100px; /* 导航栏宽度 */  
  26.     float:left; /* 浮动到左侧 */  
  27.     padding:5px; /* 内边距 */  
  28. }  
  29.   
  30. /* 内容区域样式 */  
  31. #section {  
  32.     width:350px; /* 内容区域宽度 */  
  33.     float:left; /* 浮动到左侧，与导航栏并排 */  
  34.     padding:10px; /* 内边距 */  
  35. }  
  36.   
  37. /* 页脚样式 */  
  38. #footer {  
  39.     background-color:black;  
  40.     color:white;  
  41.     clear:both; /* 清除浮动，确保页脚位于所有浮动元素下方 */  
  42.     text-align:center;  
  43.     padding:5px; /* 内边距 */  
  44. }  
  45. </style>  
  46. </head>  
  47.   
  48. <body>  
  49.   
  50. <!-- 头部区域 -->  
  51. <div id="header">  
  52. <h1>大标题</h1>  
  53. </div>  
  54.   
  55. <!-- 导航栏区域 -->  
  56. <div id="nav">  
  57. 侧边1.0<br>  
  58. 侧边2.0<br>

 响应式设计

TML 响应式 Web 设计（Responsive Web Design, RWD）是一种网页设计方法，它使得网站能够根据不同的访问设备（如桌面电脑、平板电脑、智能手机等）的屏幕尺寸和分辨率来自动调整布局、图片大小、字体等，从而提供最佳的浏览体验。实现响应式 Web 设计通常不仅仅依赖于 HTML，而是结合 CSS（特别是 CSS3 媒体查询）和 JavaScript（可选）来完成。

响应式设计的关键元素

  1. 流体网格（Fluid Grids）：
    使用百分比（%）而不是固定像素（px）来定义布局的宽度，使得布局能够随着浏览器窗口大小的变化而伸缩。

  2. 媒体查询（Media Queries）：
    CSS3 引入的媒体查询允许你根据不同的媒体类型和条件应用不同的样式规则。例如，你可以根据屏幕宽度来应用不同的样式表。

  3. 灵活的图片（Flexible Images）：
    使用 max-width: 100%; 和 height: auto; 的 CSS 规则来确保图片能够根据其容器的宽度自动缩放，避免图片过大导致布局破坏。

  4. 灵活的视频（Flexible Videos）：
    类似于图片，视频也需要适应不同的屏幕尺寸。可以使用 CSS 来确保视频能够在其容器中正确显示。

  5. 响应式排版（Responsive Typography）：
    字体大小也应该根据屏幕尺寸自动调整。使用相对单位（如 em 或 rem）来定义字体大小，并结合媒体查询来设置不同屏幕尺寸下的字体大小。

响应式设计可以自己创建，也可以通过Bootstrap来创建。

Bootstrap是一个由Twitter开发的免费开源Web开发框架，它基于HTML、CSS和JavaScript，旨在通过为模板设计提供一套语法来简化响应式、移动优先网站的Web开发过程。如需学习更多有关 Bootstrap 的知识，可以阅读W3school网站的 Bootstrap 教程。

计算机代码

在HTML中，如果想展示计算机代码（比如C++, Python, JavaScript等语言的代码），可以使用<pre>和<code>标签来保持代码的格式，包括空格、换行符以及缩进。这些标签结合使用可以很好地在网页上显示源代码的样式。

<kbd> 标签用于表示用户输入的内容，特别是通过键盘输入的内容。当你想在文档中指示用户按下某个键或按键组合时，可以使用这个标签。浏览器通常会以稍微不同的样式显示<kbd>标签内的内容，以突出它是键盘输入。

<samp> 标签用于表示计算机程序的输出样本。这通常包括命令行输出、脚本输出或其他计算机程序产生的文本。<samp>标签内的文本应该被展示为“样本输出”，并且浏览器可能会以特定的样式（如等宽字体）来显示它，以区分于普通文本。

<pre>标签用于预格式化的文本。它保留了文本中的空格、制表符和换行符。这意呀着，当你将代码放入<pre>标签中时，它将按照你在HTML源代码中编写的那样展示。

<code>标签用于表示代码片段。它通常与<pre>标签一起使用，以提供代码的语义化和格式化的表示。虽然<code>标签本身不会改变文本的格式，但它告诉浏览器这段文本是代码，这有助于搜索引擎优化（SEO）和屏幕阅读器等辅助技术理解内容。

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>计算机代码格式示例</title>  
  5.     <style>  
  6.         /* 可选：为代码添加一些样式 */  
  7.         pre {  
  8.             background-color: #f4f4f4;  
  9.             border: 1px solid #ddd;  
  10.             padding: 10px;  
  11.             overflow: auto; /* 如果代码超出容器宽度，添加滚动条 */  
  12.         }  
  13.   
  14.         code {  
  15.             font-family: monospace; /* 使用等宽字体 */  
  16.         }  
  17.     </style>  
  18. </head>  
  19. <body>  
  20.   
  21. <h2>示例代码</h2>  
  22.   
  23. <pre><code>  
  24. #include <iostream>  
  25.   
  26. int main() {  
  27.     std::cout << "Hello, World!" << std::endl;  
  28.     return 0;  
  29. }  
  30. </code></pre>  
  31.   
  32. </body>  
  33. </html>

实体

HTML 字符实体（Character Entities）是HTML中用于表示那些难以通过标准键盘输入或者在HTML中有特殊含义的字符的代码。这些字符实体可以是一个或多个字符，并且以&符号开始，以;符号结束。使用字符实体可以避免在HTML代码中直接使用某些特殊字符时可能导致的解析错误或显示问题。

HTML5引入了一些新的字符实体，主要用于表示一些数学符号、技术符号以及特殊字符等，但这些新的字符实体在日常的HTML编码中并不常用。

使用字符实体是确保HTML文档正确解析和显示的重要手段之一。不过，在编写HTML时，如果可能的话，也推荐使用字符的Unicode编码（以\u开头的四位十六进制数），因为这样可以更直接地表示字符，并且在一些编程语言和工具中更加通用。但是，请注意，在HTML文档中直接使用Unicode编码字符时，需要确保文档的编码（如UTF-8）能够支持这些字符。

如需完整的实体符号参考，请访问W3school网站的 HTML 实体符号参考手册。

符号

完整的数学参考

完整的希腊参考

完整的货币参考

完整的箭头参考

完整的符号参考

表情符号

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8"> <!-- 设置文档的字符编码为UTF-8，确保Emoji能够正确显示 -->  
  5. </head>  
  6. <body>  
  7.   
  8.     <h1>放大的 Emoji</h1> <!-- 页面标题，显示"放大的 Emoji" -->  
  9.   
  10.     <!-- 以下段落将使用较大的字体尺寸来显示几个Emoji -->  
  11.     <p style="font-size:48px">  
  12.         
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/996593
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。