HTML零基础讲授（REAL）

大连全瓷种植牙齿制作中心  金牌会员 | 2024-12-13 09:51:26 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 827|帖子 827|积分 2496

什么是HTML

  一种超文本标记语言: HyperText Markup Language
常见误区：HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 
HTML文档的别名web 页面
HTML 使用标记标签来形貌网页
HTML 文档包含了HTML 标签及文本内容
 
   入门

  新建一个HTML文件（这里接纳的软件是HBuilderX）

  1. <!DOCTYPE html> // 声明文档类型为HTML5
  2. <html> // HTML文档的根元素
  3.    <head> // 文档的头部，包含元数据
  4.       <meta charset="utf-8"> // 设置文档的字符编码为UTF-8，支持多语言字符
  5.       <title></title> // 文档的标题，此处为空，应在<title>和</title>之间添加标题文本
  6.    </head>
  7.    <body> // 文档的主体，包含实际显示的内容
  8.       <h1>我的第一个标题</h1> // 一级标题，通常用于页面或章节的主要标题
  9.       <p>我的第一个段落。</p> // 段落，用于包含文本内容
  10.    </body>
  11. </html>
复制代码
保存并运行，运行效果：




   组成

  头部：（即head里的部门：<head> 内容  </head>）

可用于添加网页的干系信息，如网页名，CSS样式等 （CSS先做了解）

身体：（即body里的部门：<body> 内容  </body>）

标题：

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.         </head>
  7.         <body>
  8.                
  9.                 <h1>我是标题 1</h1>
  10.                 <h2>我是标题 2</h2>
  11.                 <h3>我是标题 3</h3>
  12.                 <h4>我是标题 4</h4>
  13.                
  14.         </body>
  15. </html>
复制代码
运行效果：

HTML 标题（Heading）是通过<h1> - <h4> 标签来界说的。而且巨细徐徐减小。

段落：

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.         </head>
  7.         <body>
  8.                
  9.                
  10.                 <p>我是一个段落。</p>
  11.                 <p>我是一个段落。</p>
  12.                 <p>我是一个段落。</p>
  14.                
  15.         </body>
  16. </html>
复制代码
运行效果：

HTML 段落是通过标签 <p> 来界说的。
链接：

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.         </head>
  7.         <body>
  8.                
  9.                
  10.                
  11. <a href="https://blog.csdn.net/MeyrlNotFound?type=blog"> 引号内是引用的网址</a>
  13.                
  14.         </body>
  15. </html>
复制代码
运行效果：

点击即可跳转到该网址。
HTML 链接是通过标签 <a> 来界说的。
图像：

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.         </head>
  7.         <body>
  8.                
  9.                        
  11. <img src="我是图片.jpg" width="480" height="480" />
  13.                
  14.         </body>
  15. </html>
复制代码
HTML 图像是通过标签 <img> 来界说的。
注意： 图像的名称和尺寸以属性的情势提供。
             图像后缀.jpg要打上，而且运行时图像要与html文件在一个文件夹中。 
表格：

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.         </head>
  7.         <body>
  8. <table border="1">
  9.     <tr>
  10.         <th>Header a</th>
  11.         <th>Header b</th>
  12.     </tr>
  13.     <tr>
  14.         <td>row 1, cell 1</td>
  15.         <td>row 1, cell 2</td>
  16.     </tr>
  17.     <tr>
  18.         <td>row 2, cell 1</td>
  19.         <td>row 2, cell 2</td>
  20.     </tr>
  21. </table>
  22.         </body>
  23. </html>
复制代码
运行效果：

表格由 <table> 标签来界说。每个表格有多行（由 <tr> 标签界说），每行被分割多个单元格（由 <td> 标签界说）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签举行界说。如果不界说边框属性，表格将不表现边框。

  • 使用 <table> 标签来界说表格的开始。
  • 使用 <tr> 标签来界说表格中的行。
  • 使用 <th> 标签来界说表头单元格。
  • 使用 <td> 标签来界说表格中的标准单元格。
  • 使用 <caption> 标签来为表格添加标题。
  • 使用 <colgroup> 和 <col> 标签来为表格中的一组列界说属性。
  • 使用 <thead>、<tbody> 和 <tfoot> 来分别界说表头、主体和脚注部门。
下面是一个更详细的HTML表格示例：
  1. <table>
  2.   <caption>学生成绩表</caption>
  3.   <colgroup>
  4.     <col style="background-color: #ffdddd;">
  5.     <col style="background-color: #ddffdd;">
  6.     <col style="background-color: #ddddff;">
  7.   </colgroup>
  8.   <thead>
  9.     <tr>
  10.       <th>姓名</th>
  11.       <th>数学</th>
  12.       <th>语文</th>
  13.     </tr>
  14.   </thead>
  15.   <tbody>
  16.     <tr>
  17.       <td>张三</td>
  18.       <td>95</td>
  19.       <td>88</td>
  20.     </tr>
  21.     <tr>
  22.       <td>李四</td>
  23.       <td>85</td>
  24.       <td>98</td>
  25.     </tr>
  26.   </tbody>
  27.   <tfoot>
  28.     <tr>
  29.       <td>平均分</td>
  30.       <td>90</td>
  31.       <td>92</td>
  32.     </tr>
  33.   </tfoot>
  34. </table>
复制代码
其他：

段落和換行



  • ＜p>：界说一个段落。
  • <br>： 插入一个简朴的换行符。
  1. <p>这是一个段落。</p>
  3. sp>这是另一个段落。＜br>这是同一段落中的新一行。≤/p>
复制代码
文本格式化标签



  • <b> 或 <strong>： 加粗文本（ <strong> 在语义上表示紧张性）。
  • <i> 或 <em>：斜体文本（<em>在语义上表示强调）。
  • <u>：下划线文本(不推荐用于表示强调，因为与链接的下划线可能混淆）。
  • <s> 或 <del>： 刪除袋文本（<del> 在语义上表示被刪除的文本）。
  • <small>： 小号文本。
  • <mark>：高亮文本（通常力黄色背景）。
  1. <p>这是<b>加粗</b>文本。</p>
  2. <p>这是<em>强调</em>文本。</p>
  3. <p>这是<u>下划线</u>文本。</p>
  4. <p>这是<s>删除线</s>文本。</p>
  5. <p>这是<small>小号</small>文本。</p>
  6. <p>这是<mark>高亮</mark>文本。</p>
复制代码
文本对齐

使用CSS 样式来控制对齐，而不是HTML标签。可以在<p>、<div>等标签内使用
style 属性来没置 text-align。
  1. <p style="text-align:left;">左对齐文本。</p>
  2. <p style="text-align:center;">居中文本。</p>
  3. <p style="text-align:right;">右对齐文本。</p>
复制代码
引用和预格式化文本：

<blockquote>：界说长引用。
<q>：界说短引用。
<pre>：预格式化文本，保留空格和换行。
  1. <blockquote>
  2.   这是一个长引用的例子。它通常用于表示从其他来源引用的较大段落。
  3. </blockquote>
  5. <p>这是<q>一个短引用</q>的例子。</p>
  7. <pre>
  8.   这是预格式化文本。
  9.   它会保留所有的空格和换行。
  10. </pre>
复制代码
上标与下标：

<sup> ： 上标文本（常用于表示幂或脚注）。
<sub>：下标文本(常用于表示化学式中的下标）。
  1. <p>这是上标文本：X<sup>2</sup></p>
  2. <p>这是下标文本：H<sub>2</sub>O</p>
复制代码
插入特别字符：

HTML 提供了ー些安体来表示特别字符，比方   表示空格， ＆lt;表示小于号
< ，> 表示大于号 >  等。
  1. <p>这是一个包含特殊字符的段落：&lt;div&gt;Hello, World!&lt;/div&gt;</p>
复制代码
尾部：

以</html>作结，与开头的<html>形成对应。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

大连全瓷种植牙齿制作中心

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表