(前端基础)HTML(一)

news2025/2/19 13:29:01

前提

W3C:World Wide Web Consortium(万维网联盟)

Web技术领域最权威和具有影响力的国际中立性技术标准机构

其中标准包括:机构化标准语言(HTML、XML)

表现标准语言(CSS)

行为标准(DOM、ECMAScript)

HTML:超文本标记语言

建立html文件

利用浏览器打开该文件

若出现错误提示:

  • 打开文件设置:

  • 选择Tools:

HTML基本结构

  • DOCTYPE:告诉浏览器,我们要使用什么规范
  • <html>:整个网页
  • head:网页头部
  • body:网页主体
  • title:网页标题
  • meta:描述性标签,用来描述网站的信息

Ctrl+/:html文件的注释快捷键 

meta标签使用:

如网易云:

 网页基本标签

  • 标题标签<h1>
  • 段落标签<p>
  • 换行标签<br/>
  • 水平线标签<hr/>
  • 字体样式标签<strong>、<em>
  • 注释和特殊符号&nbsp;  &gt;    &lt;    &copy;

块元素:无论内容多少,该元素独占一行(p、h1-h6)

行内元素:内容撑开宽度,左右都是行内元素的可以在排在一行(a、strong、em)

图像标签

常见图像格式JPG、GIF、PNG、BMP

利用img标签嵌入图像

<img src="图像地址" alt="图像的替换文字" title="鼠标悬停时提示文字" width="图像宽度" height="图像高度"/>

该处选择资源目录下的图片文件中的图片进行测试

src:图片地址

相对地址:../resources/image/apple.jpg

绝对地址:D:\学习资料\java\前端\resources\image\apple.jpg

图片不存在的情况:

链接标签

文本、图像超链接

<a href="链接路径" target="链接在哪个窗口打开"></a>

href:可以是html文件、URL地址

target:链接在哪个窗口打开

  • _blank:在新标签中打开
  • _self:默认值。在自己的网页中打开

锚标签

使用方法:

  • 需要一个锚标记
  • 跳转到标记#

页面跳转:

 

功能性链接

邮件链接:mailto:邮箱地址

列表标签

列表:信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者更快捷地获得相应的信息。

列表分类:

  • 无序列表
<ol>
    <li></li>
</ol>
  • 有序列表
<ul>
    <li></li>
</ul>
  • 定义列表
<dl>
    <dt>列表名称</dt>
    <dd>列表内容</dd>
</dl>

 表格

 表格简单通用,结构稳定。

基本结构有:单元格、行、列、跨行、跨列

如下:

  •  表格标签:table
  • 行row:tr
  • 列:td
  • 边框:border
  • 跨行:colspan,参数是跨的列数
  • 跨列:rowspan,参数使跨的行数
<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>

 媒体元素

视频元素标签:video

音频元素标签:audio

  • 属性src:所要选中的文件位置
  • 属性controls:控制播放
  • 属性autoplay:自动播放

<video src="mp4文件" controls autoplay></video>
<audio src="mp3文件" controls autoplay></audio>

 扩展:页面结构分析

header标题头部区域内容(页面或页面中的一块区域)
footer标记脚部区域内容(整个页面或页面的一块区域)
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用(侧边栏
nav导航类辅助内容

iframe内联框架

<iframe src="页面地址" name="框架标识名" frameborder="0"></iframe>

使用方法:

width:宽度

height:高度

<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="700px"></iframe>

该处跳转到百度

 也可以通过a标签往iframe加东西

name:框架标识名

target:链接在哪个窗口打开

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

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

相关文章

pdf.js默认显示侧边栏和默认手形工具

文章目录 默认显示侧边栏(切换侧栏)默认手形工具(手型工具) 大部分的都是在viewer.mjs中的const defaultOptions 变量设置默认值,可以使用数字也可以使用他们对应的变量枚举值 默认显示侧边栏(切换侧栏) 在viewer.mjs中找到defaultOptions,大概在732行,或则搜索sidebarViewOn…

学习总结三十三

括号序列 如果它是一个右括号&#xff0c;考察它与它左侧离它最近的未匹配的的左括号。如果该括号与之对应&#xff08;即小括号匹配小括号&#xff0c;中括号匹配中括号&#xff09;&#xff0c;则将二者配对。简单理解&#xff0c;找到一个右括号&#xff0c;向左找一个左括号…

解决DeepSeek服务器繁忙问题

目录 解决DeepSeek服务器繁忙问题 一、用户端即时优化方案 二、高级技术方案 三、替代方案与平替工具&#xff08;最推荐简单好用&#xff09; 四、系统层建议与官方动态 用加速器本地部署DeepSeek 使用加速器本地部署DeepSeek的完整指南 一、核心原理与工具选择 二、…

Huatuo热更新--安装HybridCLR

1.自行安装unity编辑器 支持2019.4.x、2020.3.x、2021.3.x、2022.3.x 中任一版本。推荐安装2019.4.40、2020.3.26、2021.3.x、2022.3.x版本。 根据你打包的目标平台&#xff0c;安装过程中选择必要模块。如果打包Android或iOS&#xff0c;直接选择相应模块即可。如果你想打包…

flink cdc2.2.1同步postgresql表

目录 简要说明前置条件maven依赖样例代码 简要说明 在flink1.14.4 和 flink cdc2.2.1下&#xff0c;采用flink sql方式&#xff0c;postgresql同步表数据&#xff0c;本文采用的是上传jar包&#xff0c;利用flink REST api的方式进行sql执行。 前置条件 1.开启logical 确保你…

纪念日倒数日项目的实现-【纪念时刻-时光集】

纪念日/倒数日项目的实现## 一个练手的小项目&#xff0c;uniappnodemysql七牛云。 在如今快节奏的生活里&#xff0c;大家都忙忙碌碌&#xff0c;那些具有特殊意义的日子一不小心就容易被遗忘。今天&#xff0c;想给各位分享一个“纪念日”项目。 【纪念时刻-时光集】 一…

WPF的MVVMLight框架

在NuGet中引入该库&#xff1a; MVVMLight框架中的命令模式的使用&#xff1a; <StackPanel><TextBox Text"{Binding Name}"/><TextBox Text"{Binding Title}"/><Button Content"点我" Command"{Binding ShowCommand…

DeepSeek从入门到精通(清华大学)

​ DeepSeek是一款融合自然语言处理与深度学习技术的全能型AI助手&#xff0c;具备知识问答、数据分析、编程辅助、创意生成等多项核心能力。作为多模态智能系统&#xff0c;它不仅支持文本交互&#xff0c;还可处理文件、图像、代码等多种格式输入&#xff0c;其知识库更新至2…

【DeepSeek】DeepSeek R1 本地windows部署(Ollama+Docker+OpenWebUI)

1、背景&#xff1a; 2025年1月&#xff0c;DeepSeek 正式发布 DeepSeek-R1 推理大模型。DeepSeek-R1 因其成本价格低廉&#xff0c;性能卓越&#xff0c;在 AI 行业引起了广泛关注。DeepSeek 提供了多种使用方式&#xff0c;满足不同用户的需求和场景。本地部署在数据安全、性…

windows平台上 oracle简单操作手册

一 环境描述 Oracle 11g单机环境 二 基本操作 2.1 数据库的启动与停止 启动: C:\Users\Administrator>sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on 星期五 7月 31 12:19:51 2020 Copyright (c) 1982, 2013, Oracle. All rights reserved. 连接到:…

【弹性计算】弹性计算的技术架构

弹性计算的技术架构 1.工作原理2.总体架构3.控制面4.数据面5.物理设施层 虽然弹性计算的产品种类越来越多&#xff0c;但不同产品的技术架构大同小异。下面以当前最主流的产品形态 —— 云服务器为例&#xff0c;探查其背后的技术秘密。 1.工作原理 云服务器通常以虚拟机的方…

RAG(检索增强生成)落地:基于阿里云opensearch视线智能问答机器人与企业知识库

文章目录 一、环境准备二、阿里云opensearch准备1、产品文档2、准备我们的数据3、上传文件 三、对接1、对接文本问答 一、环境准备 # 准备python环境 conda create -n opensearch conda activate opensearch# 安装必要的包 pip install alibabacloud_tea_util pip install ali…

【踩坑】pytorch模型导出部署onnx问题记录

问题1&#xff1a;repeat_interleave 无法转译 具体报错为&#xff1a; TypeError: torch._C.Value object is not iterable (Occurred when translating repeat_interleave).原因是我的模型代码中有&#xff1a; batch_indices torch.repeat_interleave(torch.arange(can…

DeepSeek vs ChatGPT:AI对决中的赢家是……人类吗?

DeepSeek vs ChatGPT&#xff1a;AI对决中的赢家是……人类吗&#xff1f; 文章目录 DeepSeek vs ChatGPT&#xff1a;AI对决中的赢家是……人类吗&#xff1f;一、引言1. 背景2. 问题 二、DeepSeek vs ChatGPT&#xff1a;谁更胜一筹&#xff1f;2.1 语言生成能力评测对比场景…

基于ollama搭建本地deepseek大模型服务

基于ollama搭建本地deepseek大模型服务 简介准备工作系统要求ollama的安装ollama 模型ollama 安装流程ollama 如何运行大模型前端部署注意事项简介 本指南旨在帮助初学者在本地环境中设置和运行DeepSeek大模型服务。本文将使用Ollama平台来简化这一过程,确保即使是新手也能顺…

elementUI rules 判断 el-cascader控件修改值未生效

今天修改一个前端项目&#xff0c;增加一个多选字段&#xff0c;使用的是el-cascader控件&#xff0c;因页面是通过引用子页面组件形式使用&#xff0c;出现一个点选后再勾选原有值&#xff0c;输入框内不展示或取消后的也未正常隐藏&#xff0c;如果勾选的值是全新的则其他已选…

讯方·智汇云校华为授权培训机构的介绍

官方授权 华为授权培训服务伙伴&#xff08;Huawei Authorized Learning Partner&#xff0c;简称HALP&#xff09;是获得华为授权&#xff0c;面向公众&#xff08;主要为华为企业业务的伙伴/客户&#xff09;提供与华为产品和技术相关的培训服务&#xff0c;培养华为产业链所…

DeepSeek4j 已开源,支持思维链,自定义参数,Spring Boot Starter 轻松集成,快速入门!建议收藏

DeepSeek4j Spring Boot Starter 快速入门 简介 DeepSeek4j 是一个专为 Spring Boot 设计的 AI 能力集成启动器&#xff0c;可快速接入 DeepSeek 大模型服务。通过简洁的配置和易用的 API&#xff0c;开发者可轻松实现对话交互功能。 环境要求 JDK 8Spring Boot 2.7Maven/Gr…

MySQL数据库误删恢复_mysql 数据 误删

2、BigLog日志相关 2.1、检查biglog状态是否开启 声明: 当前为mysql版本5.7 当前为mysql版本5.7****当前为mysql版本5.7 2.1.1、Navicat工具执行 SHOW VARIABLES LIKE LOG_BIN%;OFF 是未开启状态&#xff0c;如果不是ON 开启状态需要开启为ON。{默认情况下就是关闭状态} 2.…

避雷,Ubuntu通过ollama本地化部署deepseek,open-webui前端显示

0.如题&#xff0c;预期在Ubuntu上本地化部署DeepSeek&#xff0c;通过浏览器访问达到chatgpt的对话效果。 1.裸机&#xff0c;安装Ubuntu。 原有的系统盘采用大白菜&#xff0c;下载24.04.1的镜像&#xff0c;插到电脑上&#xff0c;无法识别&#xff0c;重新查到笔记本&…