老己的 html 笔记

FinchLin
0 阅读11分钟

HTML

什么是HTML？

超文本语言——一种用来告知浏览器如何组织页面的标记语言。

标记也称为标签（元素）， HTML 就是由一系列的标签组成。

标签语法

标签组成

标签使用<>尖括号表示，由开始标签、结束标签、和内容组成。

标签分类

大部分都是双标签，少数为单标签。

<h1>内容</h1> //一级标题

<hr> //单横线

HTML文档

1.文档类型

<!DOCTYPE html>

HTML5的文档类型声明，作用是告知浏览器当前页面是使用HTML5规范编写的。

2.html元素

<html lang="en">

<html>元素，这个元素包裹了页面中的所有内容，有时被称为根元素。

lang用于声明网页的主要语言，帮助浏览器、搜索引擎等正确处理页面内容。

  • en代表英语，意味着该页面的主要语言是英语。

  • zh-CN代表是中文。

3.<head>元素

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

头部元素。

包含了文档的元（meta）数据，主要保存供机器处理的信息，而非人类可读信息。

4.字符集

<head>
  <meta charset="UTF-8">
</head>

该文档的字符集为UTF-8，其包括绝大多数人类书面语言的大多数字符。

如果不加这句话，可能会引起乱码。

5.移动端页面适配

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

开发者能确保网页在移动设备上以最佳状态呈现，提升用户浏览体验。

6.title元素

<head>
  <title>Document</title>
</head>

其设置了页面的标题，也就是出现在该页面加载的浏览器标签中的内容。

7.body元素

包含了页面所有显示在页面上的内容。

标签关系

并列（兄弟）关系

<head></head>
<body></body>

嵌套关系

<div>
    <p></p>
</div>

HTML的标题和段落

标题标签 h

语法：

  <h1>这是h1标题</h1>
  <h2>这是h2标题</h2>
  <h3>这是h3标题</h3>
  <h4>这是h4标题</h4>
  <h5>这是h5标题</h5>
  <h6>这是h6标题</h6>
  • 显示特点:

标题文字会加粗显示，并且每行只显示一个

  • h1唯一性:

最好只对每个页面使用一次<h1>——这是顶级标题

  • 层次性:

在现有的六个标题层次中，除非觉得有必要否则争取每一页使用不超过三个

段落标签p

语法：

<p>这是p段落</p>
补充：

语义化：指根据内容的结构和含义选择恰当的HTML元素。

语义化的好处：

1.清晰的代码结构

2.对搜索引擎友好

3.更好的可访问性

强调与重要性标签

标签作用
<strong></strong>加粗
<em></em>倾斜
<ins></ins>下划线
<del></del>删除线

注释标签

在HTML中，注释标签用于添加不会在浏览器中显示的注释或说明。

<!-- 注释内容 --> 快捷键：ctrl+/

块级元素和内联元素

块级元素

  • 块级元素独占一行

  • 其可以嵌套其他元素

  • 常见如p、h、div等

内联元素

  • 可以一行放多个，通常与文本一起使用

  • 不能嵌套块级元素，可以嵌套其他内联元素

  • 常见如strong、em、a等

注意：

段落 p 标签里面不要放其他块级元素。

段落里面主要放文字相关，如内联元素。

HTML图片

语法：

<img src="" alt="">

src——指向要插入到页面的图像地址。

alt——备选文本，当图片无法显示或其他情况下图片无法显示时，显示文字。

其他属性：

属性作用
width设置图片宽度
height设置图片高度
title图像标签，即鼠标悬停后会显示的文本

属性采用键值对，即属性=‘值’。属性之间没有先后顺序之分，每个属性之间要用空格分隔。

路径

相对路径

相当于当前文件位置的路径。

同一目录

直接使用文件名

  <img src="1.jpg" alt="">
  <img src="./1.jpg" alt="">

下级子目录

使用目录名/文件名

  <img src="img/1.jpg" alt="">
  <img src="./img/1.jpg" alt="">

上级目录

使用../返回上一级

  <img src="../img/1.jpg" alt="">

绝对路径

从根目录开始的完整路径，包含完整的URL地址。（一般不使用，了解）

  <img src="C:\Users\\Pictures\1.jpg" alt="">
  <img src="https://www.baidu.com/1.jpg" alt="">

视频和音频

视频

语法：

  <video src=""></video>
  <video src="video.mp4" width="300" controls></video>

width/height——设置视频宽度和高度

controls——显示浏览器自带播放软件（无此，无法正常播放）

其他属性：

属性作用
autoplay自动播放
loop循环播放
muted静音
poster预览图像（封面）

注意：只有加入muted静音属性，autoplay才会正常播放。

eg：

  <video src="video.mp4" width="300" controls autoplay muted poster="poster.jpg"></video>

html5视频主要支持三种格式：mp4、ogg、webm。

视频标签兼容性写法：

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    <p>您的浏览器不支持 video 标签。</p>
  </video>

  1. 将 src 属性放在几个单独的 元素当中，这些元素分别指向各自的资源。

  2. 浏览器会检查 元素，并且播放第一个与其自身相匹配的媒体。

  3. 每个 元素都含有 type 属性，浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，但是这样会消耗掉大量的时间和资源。

音频

语法：

<audio src="audio/1.mp3" controls></audio>

音频标签兼容性写法：

<audio controls >
    <source src="audio/1.mp3" type="audio/mpeg">
    <p>您的浏览器不支持 audio 元素。</p>
  </audio>

音频的其他属性与视频其他属性一样

创建超链接

超链接

超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分。

语法：

    <a href=""></a>
    <a href="https://www.baidu.com">这是一个链接</a>

href——超文本引用或目标，其包含一个网站。

其他属性：

title——鼠标悬停的提示文字。

target——打开页面的方式：_self 当前窗口打开（默认） / _blank新窗口打开

eg：

<a href="baidu.com" target="_blank">这是一个链接</a>

补充：

空链接

——在HTML中，空连接通常指的是没有实际指向目标的超链接，符号是 # 。

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

下载链接

——如果是exe或者压缩包点击是下载。

<a href="download.exe">下载</a>

邮件链接

——某些简单场景或个人使用情况下使用。

<a href="mailto:123@qq.com">123@qq.com</a>

锚点链接

锚点链接允许用户在同一个页面内跳转到指定位置。

创建步骤：

  • 定义锚点目标

使用 id 属性创建锚点目标

<h2 id="h2">这是h2标题</h2>
  • 创建跳转链接

使用 # 标记锚点目标

<a href="#h2">跳转到h2标题</a>
  • 页面活动效果

想要点击链接之后。页面具有滑动效果。

<style>
    html{
      scroll-behavior: smooth;
    }
  </style>

布局标签

网站结构标签（H5新增）

由页眉、导航栏、主内容、侧边栏、页脚等构成。

标签作用
<header>网页页眉（头部）
<main>网页内容，每个页面只能有一个
<nav>导航栏
<article>文章相关
<section>分块
<asaide>侧边栏
<footer>页面页脚（底部）

image.png

eg：

  <header>页眉</header>
  <nav>导航</nav>
  <main>
    <aside>侧边栏</aside>
    <article>文章</article>
  </main>
  <footer>页脚</footer>

无语义标签

没有合适语义标签时，在进行一些布局时候可以选择：div 和 span 标签列表标签.

div 标签

特点：

  1. 块级元素：默认独占一行，前后会自动换行。

  2. 通常用于布局结构，作为其他元素的容器。

  3. 可以包含其他块级或行内元素。

  4. 默认没有语义。

span 标签

特点：

  1. 行内元素：不会换行，仅包裹内容的一部分。

  2. 用于对 文本或行内元素 的局部样式或操作。

  3. 默认没有语义。

列表标签

HTML 列表是网页内容组织的重要元素。可以让我们显示内容更加整齐有序。

无序列表 ul

——顺序无关紧要的列表。

无序列表在我们布局中非常常用。常用于一些整齐对齐的模块中使用。

语法：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>

特点：

<ul>:

  • 定义列表的容器

  • 只能包含<li>元素

<li>:

  • 定义列表的选项

  • 里面可以放其他html元素

有序列表 ol （很少使用）

——顺序有关紧要的列表。

有序列表在我们布局中较少。了解即可，实际开发即使有顺序，我们一般也是用其他替代。

语法：

<ol>
    <li>这是第1项</li>
    <li>这是第2项</li>
    <li>这是第3项</li>
  </ol>

特点：

<ol>:

  • 定义列表的容器

  • 只能包含<li>元素

<li>:

  • 定义列表的选项

  • 里面可以放其他html元素

描述列表 dl

——标记一组项目及相关描述。

描述列表在我们布局中主要是在页面底部。

语法：

<dl>
    <dt>电器</dt>
    <dd>电视</dd>
    <dd>冰箱</dd>
  </dl>

eg:

image.png

表格

基本表格

表格作用： 以结构化方式展示行列数据，使信息清晰、易读且便于对比。

表格组成：

标签作用
<table>表格容器标签
<tr>行标签
<td>单元格标签
<th>表头单元格

image.png

eg：

<table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>18</td>
    </tr>
  </table>

表格结构标签：增强表格语义，让表格结构更加清晰。

组成：

标签作用
<thead>定义表格的头部区域
<tbody>定义表格的主体内容
<tfoot>定义表格的底部区域

eg：

<table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>18</td>
      </tr>
    </tbody>
  </table>

合并单元格

表格开发中很少使用合并，因为会导致表格难以维护，且可能影响响应式适配（尤其在移动端）。可借助AI。

步骤：

1.确定是跨行合并还是跨列合并。

2.若是跨行，则使用rowspan；若是跨列，则使用colspan。

3.找到目标单元格，使用左上原则，写上合并数量，即rowspan='2'。

4.删除多余单元格。

eg：

<table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>张三</td>
      <td colspan="2">18</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>19</td>
      <td>女</td>
    </tr>
  </table>

表单

表单：是用于收集用户输入数据，并将数据提交到后端进行处理。

表单的核心标签有三部分组成：

表单容器

<form>：定义表单的容器，包裹所有表单控件，默认包含action属性。

语法：

<form action=""></form>

action 属性定义了在提交表单时，应该把所收集的数据送给谁（URL）去处理。

表单控件

包含<input>通用输入控件、<textarea>多行文本输入框、<select>下拉选择框、<button>自定义按钮等。

input表单

输入标签<input>是最常用的表单元素之一，它可以创建文本输入框、密码框、单选框、复选框等。type 属性定义了输入框的类型。

语法：

<input type="text">
  <input type="password">
  <input type="radio">
  <input type="checkbox">
  <input type="file">

1.单行文本框和密码框

type属性值说明
text单行文本框
password密码框
其他属性说明
placeholder提示信息
name元素名称
maxlength允许的最大字符数
accesskey使元素获得焦点的快捷键
autocomplete用于控制表单的自动填充行为，帮助浏览器决定是否根据用户历史输入自动填充字段值取值 on / off，默认为on

eg：

  <input type="text" name="zi" placeholder="请输入姓名" maxlength="3" accesskey="n"  autocomplete="off">

2.单选框和复选框

type属性值说明
radio单选框
checkbox复选框
其他属性说明
name表单名称实现分组
value表单值
checked是否默认选中

eg：

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

3.文件域

type属性值说明
file文件域
其他属性说明
multiple允许选择多个文件
accept规定选择的文件类型，多个类型中间用逗号隔开

eg：

<input type="file" multiple accept=".exe,.doc,.docx,.ppt,.pptx,.xls,.xlsx">
textarea表单

<textarea> HTML 元素是一个多行纯文本编辑控件，适用于允许用户输入大量自由格式文本的场景，例如评论或反馈表单。textarea 多行文本框也称为文本域。

语法：

<textarea></textarea>
常见属性说明
name表单名称
placeholder提示信息
rows文本行数，正整数，默认为2
cols文本列数，正整数，默认20

eg：

<textarea name="text" cols="30" rows="10" placeholder="请输入内容"></textarea>
select下拉表单

HTML <select> 元素表示一个提供选项菜单的控件。

语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
  </select>

<select>元素是容器， <option>是每一个选项标签，每个选项要跟一个值要想默认选中一个选项，可以添加 selected 属性。

eg：

<select>
    <option value="1">选项1</option>
    <option value="2" selected>选项2</option>
    <option value="3">选项3</option>
  </select>

因为select很难修改为好看的效果，大部分下拉列表可以通过其他标签模拟实现

button按钮

<button>标签定义一个按钮。元素内部可以放置内容，比如文本或图像。

disabled 属性可以禁用按钮，无法点击。

语法：

<button disabled>点击我</button>

辅助标签

<label>：关联输入控件的文本标签，提升可访问性（点击标签可聚焦输入框）更好的提高表单的用户体验。

即点击单选框文字也能够选中该选框。

方式一：

利用for和id关联

eg：

<input type="radio" name="gender" value="male" id="male">男
  <label for="male">男</label>
  <input type="radio" name="gender" value="female" id="female">女
  <label for="female">女</label>
方式二

直接包含（我觉得方便）

eg：

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

补充：

字符实体：

   <p>大于号：&gt;</p>
   <p>小于号：&lt;</p>
   <p>和号：&amp;</p>
   <p>引号：&quot;</p>
   <p>单引号：&apos;</p>
   <p>版权符号：&copy;</p>
   <p>注册符号：&reg;</p>
   <p>商标符号：&trade;</p>
   <p>欧元符号：&euro;</p>
   <p>英镑符号：&pound;</p>
   <p>美元符号：&dollar;</p>
   <p>分号：&semi;</p>
   <p>冒号：&colon;</p>
   <p>逗号：&comma;</p>
   <p>句号：&period;</p>
   <p>问号：&quest;</p>
   <p>感叹号：&excl;</p>
   <p>空格：&nbsp;</p>
avatar
文章
阅读
粉丝