HTML5-基础学习

什么是HTML

HTML定义

HTML 超文本标记语言，表示了网页内容的含义和结构。

它由一系列 element 元素组成如：<p>显示内容</p>，通常元素由一对标签组成（双标签）

<>里面表示的是标签名
结束标签以</>反斜杠为结尾
两个标签中间表示的是元素的内容
注：单标签元素只有</>如<br/>

HTML结构

文件以.html拓展名结尾的表示网页文件，可以直接被浏览器打开解析成展示内容。

.html文件需要一个基本的骨架结构：

<html>元素表示整个网页
<head>元素表示网页头部，该部分内容不会显示在HTML页面内容中，但是它包括搜索结构出现的关键字、CSS样式、字符集声明等
<body>元素表示网页主体，该部分内容显示在HTML页面内容中（浏览器打开网页所看见的内容）
<title>元素表示网页的标题

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body></body>
</html>

案例1-第一个网页：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一网站</title>
  </head>
  <body>
    <p>这是我的第一个网站</p>
  </body>
</html>

显示结果：

基础标签

标题标签

标题标签h1~h6，6种标题标签表示文档中不同级别的内容，通常用于网页中的文档标题、区域名称、产品名称等等。

标题标签特点：

h1~h6标签的使用字号会逐渐降低
独占页面一行
<h1>元素用于页面的大标题（一般在只使用一次）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一网站</title>
  </head>
  <body>
    <h1>我的网站</h1>
    <p>这是我的第一个网站</p>
    <h2>标题2</h2>
    <h3>标题3</h3>
  </body>
</html>

显示效果：

段落标签

段落标签p，通常用于网页中的段落，特点：

独占页面一行
段落结束后会有一段空隙

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一网站</title>
  </head>
  <body>
    <h1>LPL最后一张牌！OMG双卡双带爆冷击败WBG</h1>
    <p>...省略</p>
    <p>...省略</p>
  </body>
</html>

显示效果：

文本格式化标签

为文本添加特殊的格式，常见的：加粗、倾斜、删除线、下划线等。

原标签名	语义化标签	效果
b	strong	加粗
i	em	倾斜
u	ins	下划线
s	del	删除线

注释标签

注释标签，HTML中注释代码的机制，在浏览器中看不到注释的内容。

  <body>
    <!-- 页面标题 -->
    <h1>LPL最后一张牌！OMG双卡双带爆冷击败WBG</h1>
  </body>

图像标签

标签属性

谈图像标签之前，先了解标签属性，属性包含元素的额外信息，该信息不会出现在网页显示内容中。

如果有多个属性，它们之间必须使用空格隔开
属性名称="属性值"，如果一个属性名称有多个属性值，属性值之间需使用空格隔开

图像标签

图像标签<img />是一个单标签，用来在网页内容中展示图片。

img 元素属性：

src 描述图片的地址
alt 对图片的文字描述，图片路径有问题会显示该属性的值
width 宽度、height高度默认为像素
title 图片标题，悬停在图片上会显示的文字

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一网站</title>
  </head>
  <body>
    <!-- 页面标题 -->
    <h1>LPL最后一张牌！OMG双卡双带爆冷击败WBG</h1>
    <img
      src="https://inews.gtimg.com/om_bt/Os_ju3rjBHO-2193EPRTUi8l4l5oGL_Gj4YHMfBbo1LEoAA/641"
      alt="OMG战队"
      title="OMG首发"
      width="300"
      height="300"
    />
    <p>...省略</p>
  </body>
</html>

显示效果：

超链接标签

超链接标签<a>用于跳转其他页面，它的常用属性：

href 描述链接 URL 地址
target 描述打开链接的方式，"_black" 以新窗口的方式打开
URL 地址为#表示空锚点到当前页面，且会刷新一次页面

<a href="https://new.qq.com/rain/a/20240225A0637K00" target="_blank">腾讯新闻OMG VS WBG</a>

显示效果：

音频标签

<audio>播放一段音频，常见属性：

src音频URL（必须）
controls 显示音频控制面板
loop 循环播放
autopaly 自动播放

视频标签

<vidio>播放一个视频，常见属性

src视频URL（必须）
controls 显示视频控制面板
loop 循环播放
muted 静音播放
autoplay 自动播放

文件路径

在页面中通常需要引用图片、CSS、图标、字体等文件，需要指定它们正确的路径访问。

相对路径

相对路径以当前路径为起点去找到目标文件。

./表示源代码所在的当前目录
../表示上级目录，../../表示上上级
/表示源代码所在的跟目录
img/1.jpg表示同级目录img下的1.jpg

绝对路径

绝对路径以系统盘符为起点去找到目标文件。

<img src="C:\images\mao.jpg" />

进阶标签

列表标签

无序列表

<ul>元素表示无序列表，只能包含列表项<li>元素，<li>列表项元素可以包裹任何内容。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

显示效果：

有序列表

<ol>元素表示有序列表，只能包含列表项<li>元素，有序列表每一项前面都有一个顺序符号。

   <div>
      运行一个Vue项目步骤
      <ol>
        <li>cd vue-project</li>
        <li>npm init</li>
        <li>npm run dev</li>
      </ol>
    </div>

显示效果：

定义列表

<dl>元素表示定义列表，只能包含<dt>和<dd>元素，<dt>元素表示列表的标题，<dd>元素表示列表的描述（普通的列表项），<dt>和<dd>元素像<li>元素基本一致，只不过是语义化的<li>。

    <dl>
      <dt>线下门店</dt>
      <dd>小米之家</dd>
      <dd>服务网点</dd>
      <dd>授权体验店</dd>
    </dl>

显示效果：

表格标签

表格标签

<table>元素是一个由行和列组成的表格数据，可以把它看成Excel表格的形式，它包括三个主要的标签：

<tr>行
th表头单元格
td内容单元格

使用border属性给表格添加边框。

   <table border="1">
      <tr>
        <th>名次</th>
        <th>球员</th>
        <th>球队</th>
        <th>得分</th>
      </tr>
      <tr>
        <td>1</td>
        <td>库里</td>
        <td>勇士</td>
        <td>48</td>
      </tr>
      <tr>
        <td>2</td>
        <td>塔图姆</td>
        <td>凯尔特人</td>
        <td>39</td>
      </tr>
      <tr>
        <td>3</td>
        <td>库里</td>
        <td>约基奇</td>
        <td>37</td>
      </tr>
    </table>

显示效果：

表格结构化标签

可以给表格用结构标签按内容划分区域，让表格更有语义化。

四个标签分别是：

thead表格头部
tbody表格主体
tfoot表格底部
caption表格标题

合并单元格

有时需要将多个单元格合并到一个单元格用来表示同类信息。

合并步骤：

明确合并目标
保留最左上的一个单元格，添加属性（值为数字，表示合并的单元格数量），跨行合并rospan属性，跨列合并colspan属性。
删除被合并的单元格

    <table border="1">
      <caption>
        NBA 今日得分榜
      </caption>
      <thead>
        <tr>
          <th>名次</th>
          <th>球员</th>
          <th>球队</th>
          <th>得分</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>库里</td>
          <td>勇士</td>
          <td>48</td>
        </tr>
        <tr>
          <td>2</td>
          <td>塔图姆</td>
          <td>凯尔特人</td>
          <td>39</td>
        </tr>
        <tr>
          <td>3</td>
          <td>库里</td>
          <td>约基奇</td>
          <td>37</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>平均分</td>
          <!-- 保留最左上的单元格 -->
          <td colspan="3">41.34分</td>
          <!-- 被删除的单元格
          <td></td>
          <td></td> -->
        </tr>
      </tfoot>
    </table>

显示效果：

表单标签

作用：用于收集用户输入的信息。

使用场景：登陆、注册、查询信息等。

form标签

form元素表示一个表单区域，包含其他所有表单控件，向服务器提交信息。

input标签

input表单输入元素，input元素的 type 属性值确定该表单的功能。

常用 type 属性：

text 文本框
password 密码框
radio 单选框
checkbox多选框
file上传文件

文本框

通常输入的文本框，可能需要提示用户输入什么值，可以给input元素添加一个placeholder属性。

<input type="text" placeholder="默认值" />

显示效果：

单选框

单选框常用属性：

属性名	作用	特殊说明
name	控件名称	控件分组，实现单选功能同组name值必须一样
checked	默认选中	属性名和属性值相同，简写
value	控件的值	可以通过value知道表单的值

<input type="radio" name="gender" value="男" checked /> 男
<input type="radio" name="gender" value="女" /> 女

显示效果：

多选框

和单选框一致，只不过多选框可以选择多个。

下拉菜单

select嵌套option元素，select元素是整体，option元素是菜单的选择项。

selected属性表示默认选中的菜单项。

    <span>居住城市</span>
    <select>
      <option value="1">北京</option>
      <option value="2" selected>上海</option>
      <option value="3">广州</option>
      <option value="4">深圳</option>
    </select>

显示效果：

label标签

label元素用来对某个元素的说明，通常和input元素组合，让用户点击label能够聚焦到input元素，通过label for=""和input id=""值相同进行绑定。

      <input type="radio" id="boy" name="gender" value="男" />
      <label for="boy">男</label>
      <input type="radio" id="girl" name="gender" value="女" />
      <label for="girl">女</label>

按钮标签

button元素，使用type属性来确定实际功能。

常用属性：

submit提交按钮，点击后可以提交数据到后台
reset重置按钮，点击后将表单恢复默认值
button普通按钮，一般配合 JavaScript使用

注意：在表单form中不设置type属性值默认是submit提交表单。

布局标签

div标签

<div>元素是一个纯粹的容器，通常包裹其他元素用于划分网页区域，独占一行。

<div></div>

span标签

<span>元素是一个纯粹的容器，通常在行内展示特殊样式的文本，只占内容大小不换行。

<span>这是一段需要css特别标识的文本</span>

语义化标签

为了让div更有实际的含义，因此有了下面这些语义化标签，可以理解是一个具名的盒子。

<header> 头部
<nav> 导航栏
<main>主内容
<aside>侧边栏
<footer>底部
<section>区块
<article>文章

HTML5-基础篇

HTML5-基础学习

什么是HTML

HTML定义

HTML结构

基础标签

标题标签

段落标签

文本格式化标签

注释标签

图像标签

超链接标签

音频标签

视频标签

文件路径

相对路径

绝对路径

进阶标签

列表标签

表格标签

表单标签

布局标签

语义化标签