跳至主要內容

HTML

IT王小二约 2948 字...

HTML基础

作者:IT王小二

博客:https://itwxe.comopen in new window

HTML是什么

HTML 是超文本标记语言 HyperText Markup Language 的简称,是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。简单来说,HTML就是用来定义网页结构以及内容的。

HTML结构

一个标准的HTML文档通常包含以下几个部分:

  • <!DOCTYPE>声明:声明文档类型和版本。
  • <html>元素:HTML文档的根元素,包含了整个HTML文档的内容。
  • <head>部分:网页头部,包含了文档的元数据,用来存放给浏览器看的信息,如标题、字符编码、CSS等。
  • <body>部分:网页主体,用来存放给用户看的信息,例如图片、文字等。

一个简单的HTML文档结构如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的第一个HTML网页</title>
</head>
<body>
  <h1>欢迎来到我的博客!</h1>
  <p>这是我的第一个HTML网页,我很兴奋能够与大家分享我的学习经验。</p>
</body>
</html>

HTML注释

注释是对代码的解释和说明,能够提高程序的可读性,方便理解,注释不会再浏览器界面中显示,可在 F12 中查看到。

<!-- 我是一个 HTML 注释 -->

字符实体

在 HTML 中,空格、大于、小于等字符不能正常按代码展示时,需要使用字符实体。

描述界面显示结果实体名称
空格&nbsp;
大于>&lt;
小于<&gt;

标题标签

HTML提供了六个级别的标题标签,分别是 <h1><h6>,用于定义不同级别的标题,如新闻标题、文章标题、网页区域名称、产品名称等。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

特点:

  • 文字加粗,突出标题重要性。
  • 字号逐渐减小,反映标题层级关系。
  • 独占一行,与其他内容分隔明确。

经验建议:

  • 合理使用<h1>标签<h1>标签在一个网页中应该仅使用一次,通常用来放置最重要的标题,如新闻标题或网页的 LOGO。

  • 充分利用<h2><h6>标签:这些标签没有使用次数的限制,可以根据文档的结构和内容需要自由使用,但应保持逻辑清晰,符合内容层次结构。

标题标签的适当使用不仅提升了网页的可读性和搜索引擎优化,也使得文档结构更加清晰易懂。因此,在设计网页结构时,务必合理选择和使用标题标签。

段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

<p>段落</p>

特点:

  • 独占一行。
  • 段落之间存在间隙。

换行和水平线标签

换行:<br>

水平线:<hr>

文本格式化标签

为文本添加特殊格式,以突出重点,常见的文本格式:加粗、倾斜、下划线、删除线。

标签标签效果
<strong>加粗</strong><b>加粗</b>加粗
<em>倾斜</em><i>倾斜</i>倾斜
<ins>下划线</ins><u>下划线</u>下划线
<del>删除线</del><s>删除线</s>删除线

strong、em、ins、del 标签自带强调含义。

图片标签

图片标签用于向网页中插入图片。

<img src="图片的url" alt="图片找不到时候的替换文字" title="鼠标悬停在图片上面时候显示的文字" width="图片的宽度,值为数字没有单位" height="图片的高度,值为数字没有单位">

src alt title width height 称为图片标签的属性,语法为属性名="属性值",属性写在尖括号的标签后面,标签名和属性之间、属性与属性之间用空格隔开,不区分先后顺序。

相对路径和绝对路径

路径指的是查找文件时,从起点到终点经历的路线。

路径分类:

  • 相对路径:从当前文件位置出发查找目标文件。
  • 绝对路径:从盘符出发查找目标文件。

相对路径

当前文件位置出发查找目标文件的路径。

  • / 表示某个文件夹。
  • . 表示当前文件所在的文件夹。
  • .. 表示当前文件的上一级文件夹。

绝对路径

从电脑根目录查找目标文件的路径,例如<img src="/itwxe/product/web.png">

需要注意的是 Windows 默认的路径是 \,其他系统是 /,建议统一写成 /

超链接标签

超链接的作用是用于页面跳转。

<a href="https://itwxe.com">跳转到IT王小二</a>

<!-- 新窗口打开 -->
<a href="https://itwxe.com" target="_blank">新窗口跳转到IT王小二</a>

<!-- 跳转到本地文件,相对路径查找 -->
<a href="./超链接跳转.html" target="_blank">超链接跳转本地页面</a>

<!-- 空链接 -->
<a href="#">空链接</a>

href 属性值时跳转的地址,target="_blank" 代表的是在新窗口跳转页面。

开发初期 href 的属性值可写为 #,表示空链接,页面不会跳转,仅在当前页面刷新一次。

音频标签

音频标签用于往网页中插入音频。

<audio src="音频的URL" controls loop autoplay></audio>
属性作用说明
src音频URL支持 mp3, ogg, wav 格式
controls显示音频控制面板
loop循环播放
autoplay自动播放此属性通常不使用,通常会禁用自动播放功能

如果属性名和属性值相同,可以简写为一个单词,例如上述的 controlscontrols="controls" 的缩写。

视频标签

音频标签用于往网页中插入视频。

<video src="视频的URL" controls loop autoplay muted></video>
属性作用说明
src音频URL支持 mp3, ogg, wav 格式
controls显示音频控制面板
loop循环播放
autoplay自动播放此属性通常不使用,通常会禁用自动播放功能
muted静音播放

列表标签

列表用于布局内容排列整齐的区域,分为无序列表、有序列表、定义列表。

无序列表

布局排列整齐的不需要规定顺序的区域。

<ul>
  <li>第1项</li>
  <li>第2项</li>
  <li>第3项</li>
</ul>
  • ul 标签里面只能包裹 li 标签。
  • li 标签里面可以包裹任何内容。

有序列表

布局排列整齐的需要规定顺序的区域。

<ol>
  <li>第1项</li>
  <li>第2项</li>
  <li>第3项</li>
</ol>
  • ol 标签里面只能包裹 li 标签。
  • li 标签里面可以包裹任何内容。

定义列表

定义列表包含标题和列表内容。

<dl>
  <dt>列表标题</dt>
  <dd>列表描述/详情</dd>
  <dd>列表描述/详情</dd>
  <dd>列表描述/详情</dd>
</dl>
  • dl 嵌套 dtdddl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述/详情。
  • dl 里面只能包含 dtdd
  • dtdd 里面可以包含任何内容。

表格标签

基本使用

表格与 office 中的 Excel 类似,用于展示网页表格数据。

<table border="1">
  <thead>
  <tr>
    <th>姓名</th>
    <th>数学</th>
    <th>语文</th>
    <th>英语</th>
    <th>总分</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>张三</td>
    <td>100</td>
    <td>90</td>
    <td>100</td>
    <td>290</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>90</td>
    <td>100</td>
    <td>90</td>
    <td>290</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>学科最高分</td>
    <td>100</td>
    <td>100</td>
    <td>100</td>
    <td>290</td>
  </tr>
  </tfoot>
</table>

表格默认没有边框线,border 属性可以为表格添加边框线。

标签说明
<table></table>表格声明
<thead></thead>表格头部内容,结构标签,可省略
<tbody></tbody>表格主题内容,结构标签,可省略
<tfoot></tfoot>表格底部内容,结构标签,可省略
<tr></tr>表格行
<th></th>表头
<td></td>表格内容单元格

合并单元格

跨行合并:rowspan

<table border="1">
  <thead>
  <tr>
    <th>姓名</th>
    <th>数学</th>
    <th>语文</th>
    <th>英语</th>
    <th>总分</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>张三</td>
    <td>100</td>
    <td>90</td>
    <td>100</td>
    <td rowspan="2">290</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>90</td>
    <td>100</td>
    <td>90</td>
<!--    <td>290</td>-->
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>学科最高分</td>
    <td>100</td>
    <td>100</td>
    <td>100</td>
    <td>290</td>
  </tr>
  </tfoot>
</table>

跨列合并:colspan

<table border="1">
  <thead>
  <tr>
    <th>姓名</th>
    <th>数学</th>
    <th>语文</th>
    <th>英语</th>
    <th>总分</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>张三</td>
    <td>100</td>
    <td>90</td>
    <td>100</td>
    <td rowspan="2">290</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>90</td>
    <td>100</td>
    <td>90</td>
<!--    <td>290</td>-->
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>学科最高分</td>
    <td colspan="3">100</td>
<!--    <td>100</td>-->
<!--    <td>100</td>-->
    <td>290</td>
  </tr>
  </tfoot>
</table>

需要注意的是不能跨表格结构标签(thead、tbody、tfoot)合并单元格。

表单标签

表单标签用于收集用户输入信息。

input标签

标签名为 inputtype 属性不一样则功能不一样。

<input type="..." placeholder="提示信息">
  • text 文本输入框,用于输入单行文本。
  • password 密码框。
  • radio 单选框。
  • checkbox 多选框。
  • file 上传文件。
账户名:<input type="text" placeholder="请输如你的账号名"><br>
密码:<input type="password" placeholder="请输如你的密码"><br>

<!-- name自定义名称,名称一样的为同一组;checked表示默认选中-->
性别:
<input type="radio" name="sex" checked><input type="radio" name="sex"><input type="radio" name="sex"> 保密
<br>

爱好:
<input type="checkbox" checked> 敲后台代码
<input type="checkbox"> 敲前端代码
<input type="checkbox"> 敲爬虫代码
<br>

上传头像:<input type="file">

下拉菜单

用于下拉选择信息,selected 代表默认选中

出生城市:
<select>
  <option selected>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
</select>

文本域

用于输入多行文本的表单控件。

个人简介:
<textarea>输入你的个人简介,不低于10个字(默认提示文字)</textarea>

label标签

某个标签的说明文本,用于增大表单控件的点击范围,支持 label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等。

<!-- 写法一 -->
<input type="radio" name="sex" id="man">
<label for="man"></label>
<!-- 写法二 -->
<label><input type="radio" name="sex"></label>

按钮

buttonform 表单配合提交数据。

<form action="htpps://itwxe.com">
  账户名:<input type="text" placeholder="请输如你的账号名"><br>
  密码:<input type="password" placeholder="请输如你的密码"><br>

  <!-- name自定义名称,名称一样的为同一组;checked表示默认选中-->
  性别:
  <!-- 写法一 -->
  <input type="radio" name="sex" id="man">
  <label for="man"></label>
  <!-- 写法二 -->
  <label><input type="radio" name="sex"></label>
  <label><input type="radio" name="sex"> 保密</label>
  <br>

  爱好:
  <input type="checkbox" checked> 敲后台代码
  <input type="checkbox"> 敲前端代码
  <input type="checkbox"> 敲爬虫代码
  <br>

  上传头像:<input type="file">
  <br>

  出生城市:
  <select>
    <option selected>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
  </select>
  <br>

  个人简介:
  <textarea>输入你的个人简介,不低于10个字(默认提示文字)</textarea>
  <br>

  <!-- 如果type不写,默认是submit -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

语义化

有语义的布局标签:用于布局网页,划分网页区域。

  • div:独占一行
  • span:不换行
<div>
  div标签独占一行
</div>
<span>
  span标签不换行
</span>

有语义的布局标签

  • header 网页头部
  • nav 网页导航
  • footer 网页底部
  • aside 网页侧边栏
  • section 网页区块
  • article 网页文章