Web--HTML基础

文章目录

  • 安装环境
  • HTML
    • html框架
    • html基础标签
    • 语义标签
    • html特殊符号

安装环境

安装vscode后
安装插件
在这里插入图片描述
可以先不写后台直接将前度界面展示出来
在这里插入图片描述
自动补全tag,同时修改tag时自动改另一半
在这里插入图片描述
在设置里将保存自动格式化的选项勾上

创建一个index.htm文件,这个文件一般是网站主页内容,也就是入口
创建imagestylesscripts文件夹等

HTML

html框架

学习前端的技术文档网站

html超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用来结构化 Web 网页及其内容的标记语言。使用树形结构来书写的。

  • 元素基本结构:
    在这里插入图片描述

  • 属性:
    在这里插入图片描述
    属性包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。本例中,class 是属性名称,editor-note 是属性的值。class 属性可为元素提供一个标识名称,以便进一步为元素指定样式或进行其他操作时使用。

  • 空元素
    不包含任何内容的元素称为空元素。比如<img>元素:

    <img src="images/firefox-icon.png" alt="My test image" />
    

    本元素包含两个属性,但是并没有 </img> 结束标签,元素里也没有内容。这是因为图像元素不需要通过内容来产生效果,它的作用是向其所在的位置嵌入一个图像。

<!DOCTYPE html> --文档类型。这是必不可少的开头。混沌初分,HTML 尚在襁褓(大约是 1991/92 年)之时,这个元素用来关联 HTML 编写规范,以供自动查错等功能所用。而在当今,它作用有限,可以说仅用于保证文档正常读取。

<html></html>——<html> 元素。该元素包含整个页面的所有内容,有时候也称作根元素。里面也包含了 lang 属性,写明了页面的主要语种。

<head></head>——<head> 元素。所有那些你加到页面中,且不向观众展示的页面内容,都以这个元素为容器。其中包含诸如提供给搜索引擎的关键字和页面描述、用于设置页面样式的 CSS、字符集声明等等。

<meta charset="utf-8">——该元素指明你的文档使用 UTF-8 字符编码,UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。以它为编码还可以避免以后出现某些问题,没有理由再选用其他编码。

<title></title>——<title> 元素。该元素设置页面的标题,显示在浏览器标签页上,也作为收藏网页的描述文字。

<body></body>—— 元素。该元素包含期望让用户在访问页面时看到的全部内容,包括文本、图像、视频、游戏、可播放的音轨或其他内容。

<meta name="viewport" content="width=device-width">——视口元素可以确保页面以视口宽度进行渲染,避免移动端浏览器上因页面过宽导致缩放。

<meta name="description" content="为心之怪盗团加油,发送需要悔改的对象"> -浏览器显示时页面下面的介绍部分
在这里插入图片描述

<meta name="keywords" content="p5r, 雨宫莲,女神异闻录5">浏览器搜索时查找用的关键字

<link rel="icon" href="/images/logo.jpg">浏览器顶部标签页的图标
在这里插入图片描述

图像

<img width = "300" height = "500" src="images/firefox-icon.png" alt="My test image" />

元素通过包含图像文件路径的地址属性src,可在所在位置嵌入图像
还包含一个替换文字属性alt, 是图像的描述内容,用于当图像不能被用户看见时显示

音频
<audio> HTML 元素用于在文档中嵌入音频内容。<audio> 元素可以包含一个或多个音频资源,这些音频资源可以使用 src 属性或者 <source> 元素来进行描述:浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。
属性:

  • autoplay 布尔值属性;声明该属性,音频会尽快自动播放,不会等待整个音频文件下载完成。
  • controls 如果声明了该属性,浏览器将提供一个包含声音,播放进度,播放暂停的控制面板,让用户可以控制音频的播放。
  • loop 布尔属性;如果声明该属性,将循环播放音频。
  • muted 表示是否静音的布尔值。默认值为 false,表示有声音。
  • src 嵌入的音频的 URL。该 URL 应遵从 HTTP access controls (en-US). 这是一个可选属性;你可以在 audio 元素中使用 <source> 元素来替代该属性指定嵌入的音频。

视频
<video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器,用于支持文档内的视频播放。你也可以将<video>标签用于音频内容,但是 <audio> 元素可能在用户体验上更合适。
属性使用时现查,类似属性如音频

html基础标签

  • <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器,在不使用CSS的情况下,其对内容或布局没有任何影响。(块状元素带回车)
    <h1>, <p>, <pre>, <ul>, <ol>, <table>等都是<div>元素的扩展不过加了css样式

  • <span> 元素是短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者 Id 属性),或者这些元素有着共同的属性,比如lang。应该在没有其他合适的语义元素时才使用它。(行内元素,不会换行)
    <i>, <b>, <del>, <ins>, <tb>, <a>等都是行内元素

  • 注释

    <!-- 需要注释的内容 -->
    
  • 标题(Heading)包含六个基本的标题

    <h1>主标题</h1>
    <h2>顶层标题</h2>
    <h3>子标题</h3>
    <h4>次子标题</h4>
    

    备注: 你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗字体,因为标题对于 无障碍访问 和 搜索引擎优化 等问题非常有意义。要保持页面结构清晰,标题整洁,不要发生标题级别跳跃。

  • 段落

    <p>这是一个段落</p>
    

    <p>标签将空格和回车都过滤掉了

    • 可以在内容中加<br>实现回车的效果
    • &nbst可以实现空格效果
    • <hr>加一条水平线


    <pre>标签则会保留

  • 列表(List)

    1. 无序列表:项目的顺序并不重要,用一个<ul>元素包围
    2. 有序列表:项目的顺序很重要,用
      1. 元素包围
    <p>At Mozilla, we're a global community of</p><ul><li>technologists</li><li>thinkers</li><li>builders</li>
    </ul><p>working together…</p>
    
  • 链接
    链接是赋予web网络属性,使用<a>包围元素它是anchor(锚)的缩写

    <a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>
    

    href中是链接的url(需要是完整的),<a>包围的是链接显示的字体
    加上属性 <target = "_blank">就可以跳到一个新的页面

    备注: href 这个名字可能开始看起来有点令人费解,代表超文本引用( hypertext reference)。

  • 表单
    当注册登录等进行时所需要使用的输入用户名密码的东西,用来提交给服务器
    <form> 元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。
    属性: action提交表单后跳转的页面

    <input> 元素用于为基于 Web 的表单创建交互式控件,以便接受来自用户的数据。取决于设备和用户代理不同,表单可以使用各种类型的输入数据和控件。<input> 元素是目前是 HTML 中最强大、最复杂的元素之一,因为它有大量的输入类型和属性组合。
    属性:

    • name : 名称
    • id:唯一id
    • maxlength:最大长度
    • minlength:最小长度
    • required:是否必填
    • placeholder:当表单控件为空时,控件中显示的内容
  • 文本框
    <textarea> 元素表示一个多行纯文本编辑控件,当你希望用户输入一段相当长的、不限格式的文本,例如评论或反馈表单中的一段意见时,这很有用。

  • 多选框
    <select>元素表示一个提供选项菜单的控件

    <label for="pet-select">Choose a pet:</label><select name="pets" id="pet-select"><option value="">--Please choose an option--</option><option value="dog">Dog</option><option value="cat">Cat</option><option value="hamster">Hamster</option><option value="parrot">Parrot</option><option value="spider">Spider</option><option value="goldfish">Goldfish</option>
    </select>

    option属性:selected默认选中

  • 表格
    <table> 元素表示表格数据——即在一个由包含数据的行和列组成的二维表格中呈现的信息。

    • <caption>表格名称
    • <thead>表头
      • <tr>包围着一行
      • <th>包围着一个单元格
    • tbody表头下面的数据区
      • <tr>包围着一行
      • <td>包围着一个单元格

语义标签

在这里插入图片描述

  • <header> 元素用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等

  • <nav>元素表示页面的一部分,其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单,目录和索引。

  • <section> 元素表示 HTML 文档中一个通用独立章节,它没有更具体的语义元素来表示。一般来说会包含一个标题。

  • <footer> 元素表示最近一个章节内容或者根节点(sectioning root)元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

  • <article> 元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

  • <figure> 元素代表一段独立的内容,可能包含 <figcaption> 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。

html特殊符号

HTML源代码显示结果描述
&lt;<小于号或显示标记
&gt;>大于号或显示标记
&amp;&可用于显示其他特殊字符
&quot;"引号
&reg;®已注册
&copy;©版权
&trade;商标
&nbsp; 空格

尝试简单做一个p5r的心之怪盗团网站
项目地址:The_Phantoms

有对应的资源,欢迎star

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/647037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣80、删除有序数组中的重复项Ⅱ(中等)

1 题目描述 图1 题目描述 2 题目解读 对于有序数组nums&#xff0c;要求在不使用额外数组空间的条件下&#xff0c;删除数组nums中重复出现的元素&#xff0c;使得nums中出现次数超过两次的元素只出现两次。返回删除后数组的新长度。 3 解法一&#xff1a;双指针 双指针法可以…

防御第三次作业-防火墙组网实验(3)

目录 实验拓扑图 要求 1 2 针对10.0.2.10设备的安全策略&#xff1a; 针对10.0.2.20设备的安全策略&#xff1a; 3 4 实验拓扑图 各设备ip和接口已配好&#xff0c;均可可ping通防火墙。 要求 1.生产区在工作时间内可以访问dmz区域&#xff0c;仅可以访问http服…

Kali如何启动SSH服务并实现无公网ip环境远程连接

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 简单几步通过[cpolar 内网穿透](cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站)软件实现ssh 远程连接kali! …

最佳的reCAPTCHA v3验证码解析器,使用API或扩展自动解析reCAPTCHA v3

在在线安全领域&#xff0c;reCAPTCHA v3作为一种重要工具&#xff0c;用于保护网站免受自动机器人和恶意活动的侵害。在本文中&#xff0c;我们探讨了Capsolver的能力&#xff0c;这是征服reCAPTCHA v3挑战的终极解决方案。凭借其先进的功能&#xff0c;包括API集成和多功能的…

AI新工具(20240124) ComfyUI-InstantID-ComfyUI下的非官方InstantID实现;Lumiere是由谷歌时空扩散模型

ComfyUI-InstantID-ComfyUI下的非官方InstantID实现 ComfyUI InstantID是对InstantID的非官方实现&#xff0c;支持本地和huggingface hub模型&#xff0c;同时支持通用styler。它包括基础模型加载、InsightFace模型加载、ID ControlNet模型加载、Ipadapter_instantid模型加载…

【ProtoBuf】使用指南

一.什么是ProtoBuf 特点&#xff1a;ProtoBuf是用于序列化和反序列化的一种方法&#xff0c;类似xml和json&#xff0c;但是效率更高&#xff0c;体积更小。ProtoBuf具有语⾔⽆关、平台⽆关&#xff0c;扩展性、兼容性好等特点。 ProtoBuf是需要依赖通过编译生成的头文件和源…

oracle 12 查询数据库锁

在Oracle 12c中&#xff0c;查询数据库锁信息可以通过以下视图进行&#xff1a; v$locked_object&#xff1a;这个视图显示了当前被锁定的对象&#xff08;如表、行等&#xff09;的信息。 SELECT l.session_id sid, s.serial#, l.locked_mode,o.object_name,s.osuser,s.userna…

1.25学习总结

今天学习了二叉树&#xff0c;了解了二叉树的创建和遍历的过程 今天所了解的遍历过程主要分为三种&#xff0c;前序中序和后序&#xff0c;都是DFS的想法 前序遍历&#xff1a;先输出在遍历左节点和右节点&#xff08;输出->左->右&#xff09; 中序遍历&#xff1a;先…

网络工程师:新兴科技基础知识面试题(十四)

116.简述模拟信号到数字信号是怎么转化的。 模拟信号到数字信号的转化过程是通过模数转换器&#xff08;ADC&#xff09;完成的&#xff0c;该过程也被称为采样和量化。 1. 采样&#xff1a; 模拟信号是连续的&#xff0c;而数字信号是离散的。在转换过程中&#xff0c;模拟信…

ip数据库.

IP库(也叫IP地址数据库)&#xff0c;是由专业技术人员经过长时间通过多种技术手段收集而来的&#xff0c;并且长期有专业人员进行更新、维护、补充。 IP库里面存放了大量的IP地址&#xff0c;方便用户查询&#xff0c;比如&#xff0c;你知道了某个IP&#xff0c;就可以查到这…

华为云磁盘性能指标(参考)

MD[华为云磁盘性能指标(参考)] 云硬盘&#xff08;Elastic Volume Service, EVS&#xff09; 根据性能&#xff0c;磁盘可分为极速型SSD V2、极速型SSD、通用型SSD V2、超高IO、通用型SSD、高IO、普通IO。 性能指标(参考)&#xff0c;测速说明&#xff1a;操作系统-windows …

如何配置Tomcat服务环境并实现无公网ip访问本地站点

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器&#xff0c;不仅名字很有趣&#xff0…

conda环境下使用youtube_dl模块下载youtube视频异常解决方法

1 问题描述 使用python的youtube_dl模块下载youtube视频时失败&#xff0c;错误信息如下&#xff1a; ERROR: Unable to extract uploader id; please report this issue on https://yt-dl.org/bug . Make sure you are using the latest version; see https://yt-dl.org/up…

LeeCode 438.找到字符串中所有字母异位词.

给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串&#xff08;包括相同的字符串&#xff09;。 示例 1: 输入: s “cbaebabacd”, p “abc” 输出:…

jquery练习

jquery练习 1.多图片展示 <!doctype html> <html> <head> <meta charset"utf-8"> <title>多图片展示效果</title> <link href"zns_style.css" rel"stylesheet" type"text/css" /> <sc…

从 Apk 提取代码到单独 dex

从 Apk 提取代码到单独 dex Android 中动态加载是指应用程序在运行时加载和执行 Dex 文件的过程&#xff0c;可以在运行时加载不同的代码或功能&#xff0c;而无需重新编译整个应用程序&#xff0c;动态加载 Dex 文件通常涉及以下步骤&#xff1a; 创建 Dex 文件 我们接触到的…

Redis的五种常用数据类型详解及相关面试问题

目录 Redis的五种常用数据类型详解 简述 Redis五种基本数据类型 String字符串 常用命令 应用场景 Hash散列表 常用命令 使用场景 List链表 常用命令 应用场景 Set( 集合) 常用命令 应用场景 SortedSet( 有序集合) zset 常用命令介绍 应用场景 面试题常问的数…

【Pytorch 第一讲】 如何加载预训练模型

一. 封装Pytorch的Model 加载pre-trianed Model import torch import torchvision.models as models from torchvision import transforms# 1. 下载并加载预训练模型 model models.resnet18(pretrainedFalse) # 设置pretrainedFalse&#xff0c;表示不加载预训练权重# 2. 下载…

退货通知单下推销售退货单,无法下推问题排查

文章目录 退货通知单下推销售退货单&#xff0c;无法下推问题排查报错界面排查原因 退货通知单下推销售退货单&#xff0c;无法下推问题排查 报错界面 排查 检验单已做。 原因 合格未勾选判退。

按键协管指南针加速计陀螺仪GPS等原理图纸2

1.imu电路。 加速计包含重力感应。 到传感器芯片u8, U16, U18的信息都是用的spi接口&#xff0c;如下图所示。OSCAR_TO_IMU_SPI_SCLK_FL, IMU_TO_OSCAR_SPI_MISO_FL, OSCAR_TO_IMU_SPI_MOSI_FL接了u8, u16, u18,通过片选信号cs选择哪个芯片接收。 加速计&#xff0c;陀螺仪&…