程序员经验分享-hwhale

学习HTML后总结

2023-05-16

目录

  • 一、HTML简介
  • 二、软件、插件使用
  • 三、HTML的文档结构
    • 1.元素
    • 2.文本格式
    • 3.标题
    • 4.超链接
    • 5.图片、文件路径img
    • 6.表格
    • 7.列表List
    • 8.表单Form
    • 9.其他内容

一、HTML简介

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
在我看来HTML相当于Web的结构；CSS用于装饰；JS是内部行为。

二、软件、插件使用

**VS Code：**微软推出的开源文本编辑器，异常的强大
插件：
Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense fo CSS、Material Icon、Open HTML in Browser、Path Intelligence等

三、HTML的文档结构

1.元素

HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如<：head>，，，<header>，<footer>，<article>等<br/> 检查我们刚创建的 HTML 文档你会发现，整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成。</article></footer></header>

<head>，<title>，<body>，<header>，<footer>……
<!DOCTYPE html>: 声明文档类型；
<html></html>: <html>元素。包含全部页面，可以嵌套其他的元素；
<head></head>: <head>元素。 类似于C语言编程中的头文件，不会在浏览器中的html页面显示。
<meta charset="utf-8">: 设置文档使用utf-8字符集编码，用来识别文本内容。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 浏览器标签图标显示图。
<title></title>: 页面标题，也就是浏览器收藏标签。
<body></body>: <body>元素。 html的主体内容。

空元素： 元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，我们称其为空元素，如下：

<br>, <hr>, <input>, <img>, <a>等等。

元素的属性： 元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

2.文本格式

HTML使用标签来对输出的文件进行格式输出，但是使用比较少，如果需要进行美化，会使用CSS来进行。常见文本格式标签有：

<em>	着重文字
<i>	    斜体字
<small>	小号字
<strong>加重语气
<sub>	下标字
<sup>	上标字
<ins>	插入字
<del>	删除字

3.标题

HTML 提供了从大到小6级标题，分别是：h1 ~ h6：

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

4.超链接

HTML 使用超级链接与网络上的另一个文档相连，点击即可跳转。
超链接可以是字、词、图像等。
语法：

<a href="url">链接文本</a>

说明：
href即为要跳转去的地址 URL；
target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
例：

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

锚点：也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
说明：使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可，元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4，超链接中的地址需要有#符号。

5.图片、文件路径img

在网页中显示图像，图像由img 标签定义。
语法：

<img src="url" alt="some_text">

说明：src属性为要显示图片文件的位置 URL，图片文件的路径；alt属性当获取图片出现问题时显示的文字（占位符）。
对于小尺寸的图片，现在可采用 base64 编码进行，可提高页面加载速度。
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

绝对路径：
<img src="url" alt="some_text">
相对路径：
 <img src="picture.jpg"alt="MDB Logo">

6.表格

将表格在网页中呈现，使用相应的标签即可。

<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）<table>
<table>
    <tr>
      <th>年级</th>
      <th>班级</th>
      <th>姓名</th>
    </tr>
    <tr>
      <td>18</td>
      <td>01</td>
      <td>甲</td>
    </tr>
    <tr>
      <td>18</td>
      <td>01</td>
      <td>乙</td>
    </tr>
  </table>
年级班级姓名
1801甲
1801乙

7.列表List

我们也可以使用列表来呈现内容，分为无序列表和有序列表。
无序列表使用ul标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
有序列表使用ol标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

8.表单Form

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。

<form>
        <!-- 文本框，注意有 placeholder 提示符 -->
        用户名：<br>
        <input type="text" name="name" placeholder="请输入用户名"><br>
        <!-- 密码框 -->
        密码：<br>
        <input type="password" name="ps" placeholder="请输入密码"><br>
        年龄：<br>
        <!-- 数字输入框，注意 min 和 value 属性-->
        <input type="number" name="age" min="18" value="18"><br>
        <!-- 单选按钮, 注意 checked 属性 -->
        性别：<br>
        <input type="radio" name="gender" value="male" checked> 男<br>
        <input type="radio" name="gender" value="female"> 女<br>
        <input type="radio" name="gender" value="other"> 其它<br>
        <!-- 下拉列表，注意 selected 属性 -->
        
        </select><br>
        <!-- 多选框 -->
        您有哪些交通工具：<br>
        <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
        <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
        <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
        <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
        <!-- 日期选择器 -->
        您的工作日期：<br>
        <input type="date"><br>
        <!-- 文件选择器 -->
        上传您的照片:<br>
        <input type="file" name="photo"><br>
        <!-- 文本输入区域，注意 rows 和 cols 属性 -->
        您的建议：<br>
        <textarea name="message" rows="5" cols="30">
          The cat was playing in the garden.
        </textarea><br><hr>
        <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
        <input type="submit" value="提 交">
        <input type="reset" value="重 置">
      </form>

9.其他内容

区块元素：区块元素在浏览器显示时，通常会以新行来开始（和结束）。
内联元素：内联元素相反，他们总是一个接一个进行显示，不会新起一行。
预设格式：如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。

<!-- pre标签中的内容将保持格式不变 -->
<pre>
              内容
</pre>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

学习HTML后总结 的相关文章

  • 带你了解无人机的大脑-飞控

    无人机大脑 xff1a 飞控 无人机之所以能够在空中自主飞行就是因为无人机也和人一样 xff0c 也拥有一个大脑 xff0c 究竟是什么样的一个大脑才能够控制一架飞机在空中自动驾驶呢 xff1f 一起来看看 通俗点说 xff0c 能够自主起

  • STM32F103串口（ISP）下载

    1 ISP简介 ISP Iin System Programming 在系统可编程 xff0c 指电路板上的空白器件可以编程写入最终用户代码 xff0c 而不需要从电路板上取下器件 xff0c 已经编程的器件也可以用SP方式擦除或再编程 I

  • 用Docker搭建更酷的本地开发环境

    以前要在本地跑一些有意思的工程和实验 xff0c 都需要通过在本地装上一大堆软件来实现 最近发现有一种更酷的方式 xff1a Docker 用Docker在本地搭建开发环境有一系列显而易见的优势 xff1a 不用依赖公司的资源 xff0c

  • 只需修改一个像素，让神经网络连猫都认不出 | 论文+代码

    夏乙 编译整理 量子位 出品 公众号 QbitAI 想骗过神经网络 xff0c 让它认错图像 xff0c 需要对图像做多少修改 xff1f 一个像素就够了 一项来自日本的研究表明 xff0c 改动图片上的一个像素 xff0c 就能让神经网络

  • 小米迎来NLP首席科学家王斌：中科院研究员，雷军崔宝秋亲学弟

    雷刚 发自 凹非寺 量子位 报道 公众号 QbitAI 曾经武大郎 xff0c 今日小米科学家 小米又有AI科学家加盟 xff0c 这次是中国科学院信息工程研究所研究员王斌 xff0c 他将出任小米AI实验室NLP首席科学家 xff0c 负

  • IGMPv1,v2,v3详解

    简介 IGMP IGMP Internet Group Management Protocol xff09 作为因特网组管理协议 xff0c 是TCP IP协议族中负责IP组播成员管理的协议 xff0c 它用来在IP主机和与其直接相邻的组播

  • 华为最强AI芯片麒麟980发布：全球首款7nm手机芯片，双核NPU，6项世界第一

    安妮 雷刚 发自 凹非寺 量子位 报道 公众号 QbitAI 遥遥领先 xff01 这是华为消费者业务CEO余承东放下的狠话 xff0c 他说自家即将推出的手机芯片麒麟980 xff0c 将在全球范围内遥遥领先 而且领先的不是别家 xff0

  • Haar小波提升算法

    传统的小波变换是在傅里叶变换的基础上演变而来 xff0c 计算过程中存在着大量的卷积运算或是乘累加的计算 xff0c 如若在硬件上实现 xff0c 势必会消耗大量的寄存器资源 xff0c 而且速度也上不去 提升小波又称为第二代小波 xff0

  • 【Docker学习】Docker Hub + GitHub实现镜像自动构建

    近期学习Docker的相关知识 xff0c 尝试了一下Docker Hub 43 GitHub自动构建镜像 xff0c 在此记录一下过程 将GitHub账号关联到Docker Hub账号 设置位置 下滑到Linked Accounts xf

  • spring整合mybatis报错Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 前言中不允许有内容

    在spring的配置文件中配置mybatis时使用的是 xff1a span class hljs comment lt 控制和MyBatis整合 gt span span class hljs tag lt span class hljs

  • linux中UDP编程

    在前面的文件中 xff0c 我们介绍了linux网络编程中与IP相关的知识和常用的函数总结 xff0c 本文针对具体的UDP通信 xff0c 来详细的介绍UDP通信的使用 xff0c 包括UDP通信中的点对点通信 xff0c 多播 xff0

  • 语音增强--卡尔曼滤波介绍及MATLAB实现

    语音增强 卡尔曼滤波 状态方程 x k 43 1 61

  • 树莓派官方系统（raspbian）安装及使用教程

    以下内容为本人原创 xff0c 欢迎大家观看学习 xff0c 禁止用于商业用途 xff0c 作者 xff1a 64 Yhen 原文网站 xff1a CSDN 原文链接 xff1a https blog csdn net Yhen1 arti

  • 主键和外键的区别

    一 什么是主键 外键 主键 xff1a 关系型数据库中的一条记录中有若干个属性 xff0c 若其中某一个属性组 注意是组 能唯一标识一条记录 xff0c 该属性组就可以成为一个主键 比如 1 学生表 学号 xff0c 姓名 xff0c 性别

  • C++中，使用libCurl实现http的post请求

    span class token macro property span class token directive hash span span class token directive keyword include span spa

  • nodejs版本管理NVM

    nodejs版本管理NVM NVM全称 xff08 Node Version Manager xff09 是一个用来管理node版本的工具 因为在开发electron版本应用时遇到了 xff0c nodejs使用版本冲突 xff0c 所以我

  • OSPF中DR、BDR竞选机制【转载】

    OSPF DR BDR 竞选机制详解 OSPF 上篇技术文章中提到了建立邻居和邻接关系 xff0c 而邻居关系建立成功之后 xff0c 在broadcast NBMA网络上会进行DR BDR竞选 DR产生背景 在MA网络中 xff0c 任意

  • Citrix Receiver在linux系统（Ubuntu）下的安装使用

    本文为解决在linux系统下Citrix Receiver安装完成后无法登录服务器的情况 xff0c windows下没有这个问题 其中报错为无法识别安全证书 提示 xff1a no such file or directory verif

  • ORA-28000:the account is locked错误解决

    Oracle数据库日志中出现ORA 28000 the account is locked的错误 xff0c 可以按下面的步骤处理 xff1a 1 查询FAILED LOGIN ATTEMPTS参数默认值 xff0c 这个参数限制了从第一次

  • 在Ubuntu上安装boost库

    boost中 xff0c 用到了别的函数库 xff0c 所以为了使用boost中相应的功能 xff0c 需要先安装系统中可能缺失的库 apt get install mpi default dev 安装mpi库 apt get instal

随机推荐

  • 嵌入式平台算法优化

    嵌入式平台算法优化 目录 目录 前言 4 1 嵌入式系统优化流程 6 1 xff0c 选用更优的算法 6 2 xff0c 选择嵌入式平台型号 6 3 xff0c 算法优化一般流程 9 2 高效的编程 15 1 xff0c 数据类型 15 2

  • [028] Gazebo构建Kinect模型，在RVIZ中显示点云PointCloud2出错：点云位姿错误，浮在空中

    一 Bug描述 1 发生错误的 urdf代码 xff08 也不是代码错误 xff0c 是gazebo的bug xff09 lt link name 61 34 camera link 34 gt lt visual gt lt origin

  • Win10校园网宽带连接频繁秒断

    问题 xff1a 宽带连接连上过后很快就断开 解决方法 xff1a 1 Win 43 R输入regedit打开注册表编辑器 2 打开路径 xff1a 计算机 HKEY LOCAL MACHINE SYSTEM ControlSet001 S

  • UML类图--泛化关系

    泛化关系 Generalization 属于类的继承关系 xff0c 表明了子类如何特化或实现父类的属性和方法 UML类图表示 xff1a 箭头指向 xff1a 带箭头的实线 xff0c 箭头指向父类 代码实现 xff1a 测试类 publ

  • 汉诺塔问题解析（C语言）

    目录 一 什么是汉诺塔问题二 汉诺塔移动图解三 代码实现总结 一 什么是汉诺塔问题 汉诺塔问题是一个经典的问题 汉诺塔 xff08 Hanoi Tower xff09 xff0c 又称河内塔 xff0c 源于印度一个古老传说 大梵天创造世界

  • Shell脚本学习——字符串处理

    最近在做很多的字符串处理的工作 xff0c 主要用的还是excel xff0c 但是很费神 xff0c 总是Ctrl 43 C和Ctrl 43 V 就想用shell脚本对对应的字符串进行批量处理 1 xff09 首先是读取文件中的每一行字符

  • DSP算法移植---总结

    总结 很久没有写文章了 xff0c 今天逛了逛博客 xff0c 看到DSP算法移植的文章 xff0c 至于这个项目 xff0c 本人解释下 本人7月份将硕士毕业了 xff0c 不久就要离开校园了 xff0c 所以我基本上不接触这个项目了 x

  • L2TP协议【转载】

    L2TP协议 一 43 L2TP Layer 2 Tunnel Protocol 第2层隧道协议 xff0c 是为在用户和企业的服务器之间透明传输PPP报文而设置的隧道协议 43 特性 灵活的身份验证机制以及高度的安全性 多协议传输 支持R

  • ROMFS文件系统分析

    ROMFS文件系统分析 ROMFS是一种简单的只读文件系统 xff0c 主要是用来当做初始文件系统来使用的 xff0c 在嵌入式linux或是uclinux中通常使用这中文件系统来作为引导系统的文件系统 xff0c 甚至uclinux有时就

  • Linux/Ubuntu 怎么设置打开远程桌面登录连接

    Liux Ubuntu 怎么设置打开远程桌面登录连接 Linux Ubuntu 下做一些设置在windows中就可以打开远程桌面登录Ubuntu 或者在本地Ubuntu远程登录windows或者Ubuntu远程登录别的Ubuntu桌面 xf

  • Latex论文复杂组合图片设计

    最近在使用Latex写博士论文 xff0c 中间遇到了一些想设计一幅图片中多个子图位置的问题 如果想画普通的横排多图或者竖排多图 xff0c 可以使用 begin figure centering subfigure includegrap

  • 打麻将清一色自摸后偏瘫？高血压患者这些事项要注意

    最近有一条让人哭笑不得的热搜 xff0c 上海一男子居然因为打麻将清一色自摸兴奋过度 xff0c 导致脑出血偏瘫了 细究原因 xff0c 是因为该男子平时就有高血压 xff0c 又爱打麻将 对此医生也提醒 xff0c 情绪过于激动时极易诱发

  • 对idea2020.1.1的遇坑实测【实时更新】

    1 第一坑 xff0c 你可以更换maven库 xff0c 但是不管你怎么换 xff0c idea2020 1 1还是会使用 m下的 虽然你在project structrue里看起来都很正常 xff0c 但是你一打包运行就会发现你的art

  • 在Ubuntu系统中编译C语言程序

    在Ubuntu系统中编译C语言程序 用gcc命令编译主程序main1 c 并运行在VC 43 43 6 0中编译主程序main1 c 并运行在ubuntu系统下用Makefile的方式编译主程序 用gcc命令编译主程序main1 c 并运行

  • STM32简单程序的编译——LED闪烁

    LED闪烁 程序编译总结 程序编译 默认已经完成MDK5软件和STM32包的安装 首先利用keil建立工程 打开Keil uVision5软件 xff0c 点击左上角的File xff0c 然后点击New建立新文件 然后点击Project选

  • Ubuntu下opencv的安装使用

    目录 一 Ubuntu下安装opencv二 Ubuntu下opencv摄像头的使用1 打开摄像头显示处理视频的程序2 改进 三 总结 一 Ubuntu下安装opencv 1 下载oencv 在ubuntu的浏览器中输入官网链接 https

  • Proteus仿真运行stm32程序

    目录 一 原理图二 keil程序编译三 proteus仿真四 总结 一 原理图 1 创建工程 打开proteus xff0c 选择新建工程 编辑名称和目录 xff0c 点击下一步 选择下图模板 选择创建固件项目 xff0c 系列选择Cort

  • 框式路由器MPU、SFU、LPU、SRU科普

    MPU xff08 Main Processing Unit xff09 主控单元SFU xff08 Switch Fabric Unite xff09 交换网板LPU xff08 Line Processing Unit xff09 线路

  • 在STM32下完成基于FreeRTOS的多任务程序

    目录 一 任务要求二 FreeRTOS移植1 简单介绍2 应用实例 一 任务要求 在STM32下完成一个基于FreeRTOS的多任务程序 xff0c 执行3个周期性task task1 xff0c 每间隔500ms闪烁 xff08 变化 x

  • 学习HTML后总结

    目录 一 HTML简介二 软件 插件使用三 HTML的文档结构1 元素2 文本格式3 标题4 超链接5 图片 文件路径img6 表格7 列表List8 表单Form9 其他内容 一 HTML简介 HTML是超文本标记语言 xff08 Hyp

热门标签