02-HTML常用标签

2023-09-20 16:31:45

02-HTML常用标签

2.1 标签的构成

  1. 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
  2. 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容就是标签名。
  3. 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容（比如：<hr>、<br>)。

结构图：
image-20230919085853853

2.2 标签的关系

可以分为：父子关系和兄弟关系

  1. 父子关系（嵌套关系）

image-20230919090050023

  1. 兄弟关系（并列关系）

image-20230919090057914

2.3 常用标签

2.3.1 标题标签

<h1>标题</h1>
  1. h1~h6，从一级标题到六级标题
  2. 重要程度依次递减

2.3.2 段落标签

<p>段落标签</p>

2.3.3 换行

<br>

2.3.4 文本格式化

  1. 加粗
    <!-- 加粗:b -->
    <b>超文本标记语言</b>
  1. 下划线
    <!-- 下划线:u -->
    <u>超文本标记语言</u>
  1. 倾斜
    <!-- 倾斜：i -->
    <i>超文本标记语言</i>
  1. 删除线
    <!-- 删除线：s -->
    <s>超文本标记语言</s>

2.3.5 图片标签

<img src="../img/xiongmao.jpg" alt="小熊猫" title="小熊猫 你好！！！！" width="30%" height="50%">
  1. src=“路径”：指定图片所在的位置（相对位置、绝对位置）
  2. alt=“小熊猫”：当图片加载不出来时显示的提示文本
  3. title=“小熊猫 你好”：当鼠标悬停在图片上时显示的文字
  4. width=“30%”：图片的宽度（值可以是数值，比如：90px）
  5. height=“50%”：图片的高度

扩展——相对位置

相对位置是本文件为主体去查找路径

  1. 同级：可以直接写，或者用./，比如：src="img/xiongmao.jpg" | src="./img/xiongmao.jpg"
  2. 下一级：./文件/图片，比如： src="./img/xiongmao.jpg"
  3. 上一级：../(..表示往上一级走)，比如：src="../img/xiongmao.jpg"

2.3.6 音频标签

    <audio src="../img/music.mp3" controls loop></audio>
  1. src : 路径
  2. controls：显示播放的控件
  3. autoplay：自动播放（有的浏览器并不支持）
  4. loop：循环播放

2.3.7 视频标签

<video src="../img/video.mp4" controls autoplay muted></video>
  1. src : 路径
  2. controls：显示播放的控件
  3. autoplay：自动播放（需要 静音 muted ）
  4. loop：循环播放

2.3.8 超链接

<a href="https://pan.baidu.com/" target="_blank">点击跳转网盘</a>
  1. href ：跳转的链接地址
  2. target=“_blank” ：重新打开一个窗口
  3. target=“_self”：默认值，在当前窗口跳转

2.3.9 列表

  1. 有序列表
<!-- 有序列表 ol ->li  -->
<ol>
    <li>哈哈哈</li>
    <li>嘻嘻嘻</li>
    <li>咯咯咯</li>
</ol>
  1. 无序列表
<!-- 无序列表 ul -> li -->
<h1>爱好列表：</h1>
<ul>    
    <li>打篮球</li>
    <li>唱歌</li>
    <li>跳舞</li>
</ul>
  1. 自定义列表
<dl>
    <dt><b>帮助中心：</b></dt>
    <dd>联系我们</dd>
    <dd>上门查水表</dd>
    <dd>线下单杀</dd>
</dl>

2.3.10 表格标签

<table border="3px">
        <caption>学生成绩表</caption>
    <!-- 头部 -->
    <thead>
        <tr> 
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
    </thead>
    <!-- 主体 -->
    <tbody>
        <tr>
            <td>文书舒</td>
            <td>59分</td>
            <td>名字不好记</td>
        </tr>
        <tr>
            <td>张三</td>
            <td rowspan="2">100分</td>
            <td rowspan="2">很帅气</td>
        </tr>
        <tr>
            <td>张三</td>
            <!-- <td>100分</td> -->
            <!-- <td>很帅气</td> -->
        </tr>
        <tr>
            <td>张三</td>
            <td>100分</td>
            <td>很帅气</td>
        </tr>
    </tbody>
    <!-- 尾部 -->
    <tfoot>
        <tr>
            <td colspan="3">...</td>
            <!-- <td>...</td>
            <td>...</td> -->
        </tr>
    </tfoot>
</table>

  1. 组成

    table : 整体，包裹tr 和 td

    tr ：一行

    td ：一个单元格

  2. 属性

    border：表格的外边框宽度

    width：表格宽度

    height：表格高度

  3. 表格标题和单元格标题

    标题：<caption>学生成绩表</caption>

    单元格标题：<th>姓名</th>

  4. 主体结构

    thead：头部

    tbody：主体

    tfoot：尾部

  5. 合并

    1. 跨行合并（垂直合并）：rowspan="2"
    2. 跨列合并（水平合并）：<td colspan="3">...</td>
    3. 合并数据保存原则：左上原则

2.3.11 表单标签

1. input标签

   <form action="https://www.baidu.com" >
        用户名：<input type="text" placeholder="亲爱的坤，请输入您的名字" value="" name="user"> <br>
        密码：<input type="password" placeholder="请输入密码" value=""> <br>
        性别：
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <input type="radio" name="sex" checked>你猜
        <br>
        爱好：
        <input type="checkbox" checked>唱
        <input type="checkbox" checked>跳
        <input type="checkbox">rap
        <input type="checkbox">篮球
        <br>
        头像：
        <input type="file" multiple>
        <br>
        <input type="submit" value="提交注册">

        <br>
        <input type="reset" value="点我试一下">

        <br>
        <input type="button" value="普通按钮">
    </form>
1. 文本框（text）
 用户名：<input type="text" placeholder="亲爱的坤，请输入您的名字" value="" name="user">

placeholder=“提示” ：做站位符，表示提示信息

value=“输入框的值”：如果写了，文本框会默认显示value的值

name=“user”：为input输入框取名字，一般结合 value 属性一起将数据整理发送给后端，比如：

value="张三",name="user" ==> 组成 ： user="张三" 发送给后端
2. 密码框（password）
密码：<input type="password" placeholder="请输入密码" value="">

属性同上 text 文本框

3. 单选框（radio）
性别：
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex" checked>你猜

name=“sex”：将同name值的radio标签分为一组，保证一组只能选中一个

checked：默认选中

4. 多选框（checkbox）
爱好：
<input type="checkbox" checked>唱
<input type="checkbox" checked>跳
<input type="checkbox">rap
<input type="checkbox">篮球

checked：默认选中

5. 文件上传（file）
头像：<input type="file" multiple>

multiple：多文件上传

6. input按钮系列
<input type="submit" value="提交注册">
<input type="reset" value="点我试一下">
<input type="button" value="普通按钮">
  • 提交（submit）
  • 重置（reset）
  • 普通按钮（button）

value=“名字”：按钮名字

2. button按钮

button按钮根据 type 属性不同分为3种：

  1. submit：提交
  2. reset：重置
  3. button：普通按钮，和js连用

基本上和 input 的 按钮差不多，

注意：

button 是一个双标签，可以嵌入图片、音频…等作为按钮

    <button type="submit">点击提交 </button>
    <button type="submit"> <img src="../img/xiongmao.jpg" alt=""> </button>

3. select下拉菜单

请选择地区：
<select>
    <option ></option>
    <option >北京</option>
    <option >上海</option>
    <!-- selected：默认被选中，如果不跟selected，默认第一个被选中 -->
    <option selected>重庆</option>
    <option >四川</option>
    <option >云南</option>
</select>

<select>：表示下拉菜单的整体

<option>：表示下拉菜单中的每一项

selected：表示默认被选中，不写默认第一行被选中

4. textarea文本域

<textarea cols="50" rows="10"></textarea>

cols：文本域的宽度

rows：文本域的行数

文本域可以自动拉伸大小

2.3.12 字符实体

在网页中展示特殊符号效果时，需要使用字符实体替代

常用字符实体

image-20230920150016356

你好！ &nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;  hello！
更多推荐

【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.2 完成整体布局

本章要实现的整体效果如下：在讲解实际的事件之前，本节先把整体布局搭建好。布局整体包括左侧的导航和右侧的主窗体1.新建工程新建一个窗口类MainWidget，继承自QWidget，并且取消“Generateform”复选框也就是不使用UI设计师界面拖拽控件，而是纯代码来实现界面。最终新建工程如下：此时，直接运行是一个空白

超越创意，从用户创造内容到AI生成内容的新时代

在这个信息爆炸的时代，内容创作正经历前所未有的变革，其频率和多样性令人瞠目结舌。曾经，我们主要依赖传统媒体，需要专业团队为人们打造内容，这被称为专业生成内容（PGC，Professional-generatedContent）。但随着互联网的广泛渗透，用户生成内容（UGC，User-generatedContent）逐

【Python小项目之Tkinter应用】随机点名/抽奖工具大优化：新增查看历史记录窗口！语音播报功能！修复预览文件按钮等之前版本的bug！

文章目录前言一、实现思路二、关键代码查看历史记录按钮语音播报按钮三、完整代码总结前言老生常谈，先看效果：（订阅专栏可获取完整代码）初始状态下，我们为除了【设置】外的按钮添加弹窗，提示用户在使用工具之前要先【设置】。在设置界面，我们主要修改了【预览文件】按钮，从之前的只预览前5条变为预览文件全部内容，但是内容是只读的。同

SCRUM产品负责人（CSPO）认证培训课程

课程简介Scrum是目前运用最为广泛的敏捷开发方法，是一个轻量级的项目管理和产品研发管理框架。产品负责人是Scrum的三个角色之一，产品负责人在Scrum产品开发当中扮演舵手的角色，他决定产品的愿景、路线图以及投资回报，他需要回答为什么做，以及做什么的问题。在两天的ScrumProductOwner认证课程中，我们将和

盘点数字人源头厂商哪家公司OEM定制能力好!

在当今的科技盛世，我们与数字人的互动越来越频繁。无论是在工作中的智能助手，还是数字人播，数字员工，还是在生活中的个性化推荐，数字人都在为我们的生活增添色彩。然而，大家可能并未意识到，这些数字人背后的源头——数字人源头厂家，数字人源头厂商，数字人源头公司，正是在默默推动着人工智能(AI)的发展。数字人技术源头厂商主要负责

六、不root不magisk不xposed lsposed frida原生修改定位

系列文章目录第一章安卓aosp源码编译环境搭建第二章手机硬件参数介绍和校验算法第三章修改安卓aosp代码更改硬件参数第四章编译定制rom并刷机实现硬改(一)第五章编译定制rom并刷机实现硬改(二)第六章不root不magisk不xposedlsposedfrida原生修改定位第七章安卓手机环境检测软件分享第八章硬改之设

论文阅读《2022WWW：Rethinking Graph Convolutional Networks in Knowledge Graph Completion》

论文链接论文工作简介KCN在建模图结构方面很有效。基于GCN的KGC模型通常使用编码器-解码器框架，GCNs和KGE模型分别充当编码器和解码器。许多基于GCN的KGC模型虽然引入了额外的计算复杂度，但未能超越最先进的KGE模型？作者发现GCNs中的图结构并没有对KGC的性能有显著提升，相反实体表示的转换为性能带来提升。

Vue 组件的单元测试

1、基本的示例单元测试是软件开发非常基础的一部分。单元测试会封闭执行最小化单元的代码，使得添加新功能和追踪问题更容易。Vue的单文件组件使得为组件撰写隔离的单元测试这件事更加直接。它会让你更有信心地开发新特性而不破坏现有的实现，并帮助其他开发者理解你的组件的作用。这是一个判断一些文本是否被渲染的简单的示例：<templ

Rxjs操作符理解篇

创建运算符ajaxbindCallback:把回调API转化为返回Observable的函数bindNodeCallback:把Node.js式回调API转换为返回Observable的函数。deferemptyfromfromEventfromEventPatterngenerateintervalofrangeth

【音视频笔记】Mediacodec+Muxer生成mp4，浏览器无法播放问题处理

文章目录背景解决过程曲线修复方案解决问题根源背景最近在测试视频录制功能时发现，AudioRecord+MediaCodec+MediaMuxer生成的MP4，PC浏览器无法播放，但是Android、Windows、Mac的播放器应用都能正常播放。虽然不禁想吐槽浏览器视频组件的容错性差，但我也意识生成的文件格式肯定也是有

Java版分布式微服务云开发架构 Spring Cloud+Spring Boot+Mybatis 电子招标采购系统功能清单

项目说明随着公司的快速发展，企业人员和经营规模不断壮大，公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境，最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范，以及审计监督要求；通过电子化平台提高招投标工作的公开性和透明性；通过电子化招投标，使得招标采购的质量更高、速度

热文推荐
  1. Git 基本操作【本地仓库与远程仓库的推送、克隆和拉取】

    文章目录一、Git简介二、Git的下载安装三、Git常规命令四、新建本地仓库五、本地分支操作六、Git远程仓库七、远程仓库克隆、抓取和拉取八、总结九、学习交流一、Git简介Git是分布式版本控制系统（DistributedVersionControlSystem，简称DVCS），分为两种类型的仓库：本地仓库和远程仓库工

  2. 51单片机1【单片机到底是什么】

    1.从电路到集成电路1.电路发展变化的趋势（1）功率：电子设备·越来越省电，待机时间越来越长，工作电压越来越低。（2）体积：体积越来越小（3）功能：功能越来越强大2.微器件（1）电路的核心：开关控制，倍率控制（2）电子管，晶体管3.集成电路（IC，芯片）的出现（1）IC（integratedcircuit，集成电路），

  3. [创业之路-76] - 创业公司如何在长期坚持中顺势而为？诚迈科技参观交流有感

    目录一、创业环境1.1.VUCA乌卡时代：易变、复杂、不确定性、模糊的时代1.2.中国用了四十年的时间完成了三次工业革命：机械化、电气化、数字化1.3.中国正在经历着第四次工业革命：智能化、生态化、拟人化1.4国产替代：国产化1.5所有的赛道都挤满了人二、创业公司在长期坚持中顺势而为的路径2.1做自己的熟悉行业：对行业

  4. annyang语音识别与语音合成库

    *text是Annyang.js中的一个通配符，表示匹配任何语音输入中的文本，并将其作为参数传递给命令回调函数。例如，如果用户说“searchforcats”，则可以使用以下命令来捕获输入中的搜索词：constcommands={'searchfor*text':(text)=>{console.log('Search

  5. Selenium和Requests搭配使用

    Selenium和Requests搭配使用前要1.CDP2.通过requests控制浏览器2.1代码一2.2代码23.通过selenium获取cookie,requests携带cookie请求前要之前有提过,用selenium控制本地浏览器,提高拟人化,但是效率比较低,今天说一种selenium和requests搭配使

  6. 人类的生成式与机器的生成式

    生成式是指一种基于模型的方法，通过给定的条件或输入，生成与之相符合的输出。在自然语言处理领域中，生成式模型通常用于生成文本、文章、对话等自然语言序列。生成式模型的训练主要涉及两个步骤：学习和生成。在学习阶段，模型通过对大量的训练数据进行学习和训练，以学习出模式、语法和语义等语言特征。在生成阶段，模型接受一个初始输入，并

  7. 【Redis】Redis的特性和应用场景 · 数据类型 · 持久化 · 数据淘汰 · 事务 · 多机部署

    【Redis】Redis常见面试题（3）文章目录【Redis】Redis常见面试题（3）1.特性&应用场景1.1Redis能实现什么功能1.2Redis支持分布式的原理1.3为什么Redis这么快1.4Redis实现分布式锁1.5Redis作为缓存2.数据类型2.1Redis常用的数据类型有哪些2.2有序列表的底层是如

  8. java 入门-使用eclipse、javaFX、SceneBuilder进行图形界面开发

    个人是一直在开C#CS端开发，目前公司的软件基本都使用了java作开发。为了更好适应环境，我也只能再次学习这个陌生的开发工具。java的开发界面非常不友好，对于我这样的初学者只能是借助插件来进行界面与后台联动，上网度娘了好多资料，java的开发环境非常不易构建特别是需要辅助界面设计的。谨以我这么多天的摸索经历来作下小记

  9. 高通recovery流程分析（编译、界面、图片）

    目录recovery界面菜单recovery界面操作recovery启动流程recovery编译makefilerecovery图片大小ramdisk、boot.img、recovery.img之间的关系authordaisy.skye的博客_CSDN博客-嵌入式,Qt,Linux领域博主recovery界面菜单rec