HTML基础学习（一）

秋天的叶2024-06-23 13:44

http协议

超文本传输协议，是互联网数据传输的常规协议。一次http事务由"http请求"和"http响应"构成。

HTML（超文本标记语言）

创建第一个网页

  1. 工具：Visual Studio Code（VS Code）、Chrome浏览器（谷歌浏览器）
  2. 代码如下:
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网页</title>
</head>
<body>
    <h1>我创建的第一个网页</h1>
    <p>大家好！我是【秋天的叶】o(*￣▽￣*)ブ！</p>
</body>
</html>

标签之间的关系

  1. 父子（嵌套）关系：body标签中包含h1标签和p标签

    html 复制代码 
    <body>
    <h1>我创建的第一个网页</h1>
    <p>大家好！我是【秋天的叶】o(*￣▽￣*)ブ！</p>
</body>

  2. 兄弟（并列）关系：h1标签与p标签并列

html 复制代码 
    <h1>我创建的第一个网页</h1>
    <p>大家好！我是【秋天的叶】o(*￣▽￣*)ブ！</p>

各标签的作用

标签 作用
title 网页的标题
meta 网页关键词及页面描述，SEO（搜索引擎优化）与此标签有关
h1-h6 文章标题1-6级，搜索引擎非常看重h1标签里的内容，可以将重要的内容放入h1标签中，如 logo
p 段落标签，用于文章分段
br break的缩写，换行标签
hr 横线标签

文本格式化标签

标签 语义
<strong>、<b> 加粗，推荐使用 <strong>
<em>、<i> 倾斜，推荐使用 <em>
<del>、<s> 删除线，推荐使用 <del>
<ins>、<u> 下划线，推荐使用 <ins>

HTML5的特性

  1. 空白折叠现象：多个空格、换行都会解析成一个空格

  2. 转义字符

    转义字符 语义
    &lt; 小于
    &gt; 大于
    &nbsp; 空格
    &copy; 版权符号©

    更多转义字符请点击：www.w3school.com.cn/html/html_e...

列表标签

  1. 有序列表：标签为 <ol></ol>

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表标签</title>
  </head>
  <body>
    <!-- 有序列表 -->
<ol>
  <li>小汽车</li>
  <li>自行车</li>
  <li>摩托车</li>
</ol>
  </body>
</html>

  2. 无序列表：标签为 <ul></ul>

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表标签</title>
  </head>
  <body>
<!-- 无序列表 -->
<ul>
  <li>蔬菜</li>
  <li>水果</li>
  <li>油</li>
</ul>
  </body>
</html>

  3. 定义列表

标签 说明
dl 定义列表的整体，用于包裹<dt></dt>、<dd></dd>标签
dt 定义列表的主题
dd 定义列表主题下的内容
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表标签</title>
  </head>
  <body>
    <!--- 定义列表 --->
<dl>
  <dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </dt>
  <dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </dt>
  <dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </dt>
</dl>
  </body>
</html>

HTML5 新增表单控件

HTML5引入了一些新的表单控件，这些控件提供了更好的输入功能和校验机制。以下是一些常见的HTML5新增表单控件：

  1. 日期选择器 (<input type="date">)

  2. 时间选择器 (<input type="time">)

  3. 日期时间选择器 (<input type="datetime-local">)

  4. 星级评分 (<input type="range">)

  5. 颜色选择器 (<input type="color">)

  6. 电子邮件输入 (<input type="email">)

  7. 手机号码输入 (<input type="tel">)

  8. 网址输入 (<input type="url">)

  9. 搜索框 (<input type="search">)

    代码如下：

    html 复制代码 
    <!DOCTYPE html>
<html>
<body>
 
<form action="/submit_form" method="get">
  <label for="date">选择日期:</label>
  <input type="date" id="date" name="date"><br><br>
  
  <label for="time">选择时间:</label>
  <input type="time" id="time" name="time"><br><br>
  
  <label for="datetime">选择日期和时间:</label>
  <input type="datetime-local" id="datetime" name="datetime"><br><br>
  
  <label for="range">评分:</label>
  <input type="range" id="range" name="range" min="0" max="5" step="0.5"><br><br>
  
  <label for="color">选择颜色:</label>
  <input type="color" id="color" name="color"><br><br>
  
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email"><br><br>
  
  <label for="tel">电话号码:</label>
  <input type="tel" id="tel" name="tel"><br><br>
  
  <label for="url">网址:</label>
  <input type="url" id="url" name="url"><br><br>
  
  <label for="search">搜索:</label>
  <input type="search" id="search" name="search"><br><br>
  
  <input type="submit">
</form>
 
</body>
</html>

img标签

  1. 用于在网页中插入图片

  2. 代码如下：

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表标签</title>
  </head>
  <body>
<!-- 图片标签 -->
 <img src="./picture.png" alt="这是一张风景图">
 <!-- 注意：图片路径一定要写正确 -->
  <!-- alt属性是对图片的描述，当网页中的图片加载不出来时，alt里的文本描述就会出现。 -->
  </body>
</html>

  3. img标签的宽高属性：width、height属性，单位是像素，无需写单位。如下代码所示：

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表标签</title>
  </head>
  <body>
<!-- 图片标签 -->
 <img src="./picture.png" alt="这是一张风景图" width="200" height="200">
 <!-- 注意：图片路径一定要写正确 -->
  <!-- alt属性是对图片的描述，当网页中的图片加载不出来时，alt里的文本描述就会出现。 -->
   <!-- 这张图片渲染出来就是宽、高都是200像素 -->
  </body>
</html>

相对路径与绝对路径的区别

1.相对路径：一般指的是当前文件所在的路径引起的其它文件或文件夹的路径关系，通俗一点的意思就是以当前的文件所在的地方为坐标为参照物，然后进行导航，然后到达目标文件或文件夹所需要的最短路径。

2.绝对路径：就是不以当前的文件为参照，而是以文件所在计算机的完整的文件位置来描述的路径。

  • 一般情况下，相对路径在web的开发当中使用的较多。

网页上支持图片的格式

格式 说明
XXX.png 便携式网络图像，用于logo、背景图等，支持透明和半透明
XXX.gif 支持动画，如表情包
XXX.jepg(.jpg) 有损压缩图片，用于照片
XXX.bmp windows画图软件默认保存格式，位图
XXX.svg 矢量图片
XXX.webp 最新的压缩算法，非常优秀的图片格式

超链接

  • a 标签，代码如下：

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>超链接</title>
  </head>
  <body>
    <a href="https://www.***.com" title="这是一个超链接" target="_blank">a 标签</a>
  </body>
</html>

  • href属性：支持相对路径和绝对路径

  • title属性：这只鼠标悬停文本

  • target属性：规定在何处 打开链接文本

    详细教程请点击：www.runoob.com/tags/att-a-...

    值 描述
    _blank 在新的窗口中打开被链接文档（重新开一个窗口）
    _self 在此窗口中打开被链接文档（就在该窗口中打开）
    _parent 在父框架集中打开被链接文档
    _top 在整个窗口中打开被链接文档
    framename 在指定的框架中打开被链接文档

  • 图片超链接

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>超链接</title>
  </head>
  <body>
    <!-- 图片超链接 -->
    <a href="https://www.***.com" title="这是一个超链接" target="_blank"><img src="XXX.png" alt=""></a>
  </body>
</html>

  • 页面内锚点：较长的页面，可以适当的给h系列标签添加id属性，它将成为页面的"锚点"，类似于目录

  • 下载链接：指向 .exe、.zip、.rar 等文件格式的链接，将自动成为下载链接

    代码如下：

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>超链接</title>
  </head>
  <body>
    <!-- 下载链接 -->
    <a href="XXX.zip"></a>
  </body>
</html>

  • 空链接：如果暂时不知道跳到哪里，可以做成一个空连接，用一个"#"占位

    <a href="#">这是一个空链接</a>

表格标签

参考文档：www.runoob.com/tags/tag-ta...

  1. 概念：

  • <table>标签定义HTML表格

  • 一个 HTML 表格包括<table>元素，一个或多个 <tr>、<th>以及 <td>元素。

  • <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

  • 更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素

  1. 代码：

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格标签</title>
  </head>
  <body>
    <!-- 表格 -->
    <table border="1"  width="500" height="100" align="center" cellspacing="0">
      <caption>第三季度销量表</caption>
      <tr align="center">
        <!-- <th>标签用来替换<td>标签，充当表头 -->
        <th>种类</th>
      <th colspan="3">销量（斤）</th>
      </tr>
      <tr align="center">
        <td>水果</td>
        <td>30</td>
        <td>40</td>
        <td>50</td>
      </tr>
      <tr align="center">
        <td>蔬菜</td>
        <td>25</td>
        <td>36</td>
        <td>48</td>
      </tr>
    </table>
  </body>
</html>

  2. table的caption属性：作为表格的标题

  3. table的colspan属性：用于设置、的列跨度

  4. table的rowspan属性：用于设置、的行跨度

  • 其他表格特性：
标签 说明
thead 定义表头
tbody 定义表核心内容
tfoot 定义表脚，一般用于汇总行

代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格标签</title>
  </head>
  <body>
    <table border="1" cellspacing="0" width="650" height="200" align="center">
      <!-- 表格标题 -->
        <caption>期中测试成绩</caption>
        <!-- 表头 -->
      <thead align="center">
        <tr>
          <th></th>
          <th colspan="4">科目</th>
        </tr>
        <tr>
          <th>学号</th>
          <th>语文</th>
          <th>数学</th>
          <th>英语</th>
        </tr>
      </thead>
        <!-- 表格数据 -->
      <tbody align="center">
        <tr>
          <th>学生A</th>
          <td>89</td>
          <td>95</td>
          <td>87</td>
        </tr>
        <tr>
          <th>学生B</th>
          <td>88</td>
          <td>90</td>
          <td>96</td>
        </tr>
        <tr>
          <th>学生C</th>
          <td>98</td>
          <td>99</td>
          <td>89</td>
        </tr>
      </tbody>
        <!-- 表底 -->
      <tfoot align="center">
        <tr>
          <th>平均分</th>
          <td>91.67</td>
          <td>94.67</td>
          <td>90.67</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
相关推荐
Zheng11319 分钟前
【可视化大屏】将柱状图引入到html页面中
javascript·ajax·html
酷酷-14 小时前
彩虹易支付最新版源码及安装教程（修复BUG+新增加订单投诉功能）
html·php·bug
gopher951114 小时前
HTML详解
前端·html
等什么君！17 小时前
复习HTML(进阶）
前端·html
谢尔登20 小时前
【移动端】事件基础
前端·javascript·html
谢尔登21 小时前
【移动端】Viewport 视口
前端·javascript·html
洛文泽1 天前
application.yml和bootstrap.yml
java·spring boot·bootstrap·html
wave_sky1 天前
HTML&&CSS练习
前端·css·html
莘薪1 天前
HTML的修饰(CSS) -- 第三课
前端·css·html·框架
与妖为邻1 天前
房屋水电费记账本：内置的数组数据击按钮不能删除，页面手动添加的可以删除
前端·javascript·css·html·localstorage·房租水电费记账本
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache