HTML1:html基础

HTML

冯诺依曼体系结构

运算器

控制器

存储器

输入设备

输出设备

c/s(client客户端) 客户端架构软件

需要安装,更新麻烦,不跨平台

b/s(browser浏览器) 网页架构软件

无需安装,无需更新,可跨平台

浏览器

浏览器内核:

处理浏览器得到的各种资源

网页:

结构 HTML(超文本标记语言)

表现 CSS

行为 JavaScript

冲突的标签属性以先写的为主

127.0.0.1:5500服务器地址

HTML

超文本标记语言

html注释
html文档声明

h5文档声明

编码和解码

ascii编码 128个字符

iso编码 256个编码

GBK 2000+个中文字符

UTF-8(推荐) 万国码

编码声明:

在标签中添加charset属性=“UTF-8”

HTML设置语言

浏览器会自动解读文字判断语言

设置语言

在html标签中添加属性lang=“zh-CN”//设置语言为简体中文

HTML标准结构

HTML开发者文档

w3c网站设计标准

w3school国内资料网站

MDN(推荐)

HTML排版

h1-h6标题标签 不能互相嵌套

p段落标签 里面不能有块级元素

div

HTML语义化标签

标签默认的效果不重要,重要的是语义

语义化的好处:

1,代码的可读性强

2,有利于SEO(搜索引擎优化)

独占一行的元素:块级元素

不独占一行的元素:行内元素

规则:

块级元素中几乎可以写所有元素(块级元素,行内元素)

但行内元素中不能写块级元素

文本标签

用于包裹词汇和短语

斜体,代表着重阅读

十分重要的内容

没有语义,用于包裹短语

不常用的文本标签

cite 作品标题

dfn 专属名词

del与ins删除的文本和插入的文本

sub 下标 sup 上标

code 一段代码

samp 提取一部分文本内容

kbd 键盘文本

abbr 缩写

bdo 更改文本的方向

var 标记变量

small 细则

b 摘要中的关键字

i 人物的思想活动

u 反差文本

q 短引用

blockquote 长引用 块元素!!!

address 地址信息 块元素!!!

HTML图片标签

Img 标签 行内块元素

src=“图片链接”

alt=“默认文字”

width,height=""单独调整一个不会影响图片比例

相对路径和绝对路径

相对路径

./…同一个文件夹下

…/…上一个文件夹下

/下一级

绝对路径

1,本地绝对路径:

从盘符出发到文件的路径(不推荐,局限性强)

2,网络绝对路径:

图片对应的网址(有防盗链情况下无法使用)

常见图片格式

jpg:有损压缩格式

支持颜色丰富

占用空间小

不支持透明背景,不支持动态图

除了对图片要求高的地方均可以使用

png:无损压缩格式,比jpg质量更高

支持颜色丰富,占用空间略大,支持透明背景

不支持动态图

bmp:不压缩格式,在最大程度上保留图片更多的细节

支持的颜色丰富,保留的细节更多

占用空间非常大

不支持透明背景

不支持动态图

gif:仅支持256种颜色,色彩呈现不完整

主要特点:支持的颜色少,支持简单透明背景,支持动态图

一般在需要使用动态图时使用

webp:谷歌推出的一种格式,专门用于在网页中呈现图片

支持动态图

主要特点:具备上述格式的优点,但兼容性不好,一旦使用需要先解决兼容性问题

如果在文件的格式后缀有多个,会优先识别最后一个使用,如果无法兼容,再使用前面的格式

eg: abb.jpg.webp

base64转码:

将图片进行base64编码,形成一串文本,可以通过浏览器打开

直接作为img标签的src的值即可

超链接

帮助跳转

a标签

href属性用于放网址

target属性blank为新标签页中打开

​ self为在本标签页中打开,为默认值

超链接中不能放超链接

超链接跳转文件

超链接中放浏览器中可以直接打开的文件,会直接打开,例如图片,视频,pdf等

如果放不能打开的文件会触发下载

如果想强制触发下载,可以使用download属性,

超链接跳转锚点

一个超链接A name属性设置为xxxx

另一个超链接B href属性设置为#xxxx

即可从B跳转到A

或者在P标签中设置id属性为 xxxx

也可以从B跳转到C

跳转到其他页面的锚点xxx.html#xxxx

回到页面顶部,设置href属性为#

刷新页面,设置href属性为空

href中设置js语句可以执行js语句

超链接唤起指定应用

href=“tel:手机号”

href=“mailto:邮箱名”

href=“sms:手机号”

超文本的真正含义

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

懒得打字了,反正也没用

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SRS 实时视频服务器搭建及使用

一、SRS 介绍 SRS是一个开源的(MIT协议)简单高效的实时视频服务器,支持RTMP、WebRTC、HLS、HTTP-FLV、SRT、MPEG-DASH和GB28181等协议。 SRS媒体服务器和FFmpeg、OBS、VLC、 WebRTC等客户端配合使用,提供流的接收和分发的能力&am…

【机器学习】机器学习创建算法第4篇:K-近邻算法,学习目标【附代码文档】

机器学习(算法篇)完整教程(附代码资料)主要内容讲述:机器学习算法课程定位、目标,K-近邻算法定位,目标,学习目标,1 什么是K-近邻算法,1 Scikit-learn工具介绍,2 K-近邻算法API。K-近邻算法,1.4 …

Java:接口应用(Clonable 接口和深拷贝)

目录 1.引例2.Object中clone方法的实现3.Cloneable接口讲解4.深拷贝和浅拷贝4.1浅拷贝4.2深拷贝 1.引例 Java 中内置了一些很有用的接口, Clonable 就是其中之一. Object 类中存在一个 clone 方法, 调用这个方法可以创建一个对象的 “拷贝”. 但是要想合法调用 clone 方法。必…

Qt | Qt 的重要文件简介(推荐)

一、项目文件(pro 文件)及其语法 1、项目文件(pro 文件)的作用是列举项目中的源文件, 2、pro 文件的语法形式为:“变量 操作符 值”,比如 QT += widgets,多个值之间使用空格分开。 3、pro 文件的注释:从“#”开始,直至本行结束。 4、pro 文件的操作符见下表 5、pro 文…

【美团笔试题汇总】2023-09-02-美团春秋招笔试题-三语言题解(CPP/Python/Java)

🍭 大家好这里是KK爱Coding ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新美团近期的春秋招笔试题汇总~ 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢&#x1f…

使用 mitmproxy 抓包 grpc

昨天在本地执行 grpc 的 quick start(python版本的),我了解 grpc 内部使用的是 HTTP2,所以我就想着抓包来试试,下面就来记录一下这个过程中的探索。 注意:我的电脑上面安装了 Fiddler Classic,…

数据结构day2--双向链表

双向链表: 即可以从头遍历到尾部和从尾部遍历到头部的链表,每个结点包括两个链域:前驱指针域和后继指针域,所以比起单向链表,其可以在任意一个结点访问前后两个结点 关于双向链表的一个完整步骤为: 创建一个表头结构…

微软detours代码借鉴点备注

comeasy 借鉴点1 Loadlibray的时间选择 注入库wrotei.dll,为了获取istream的接口,需要loadlibrary,但是在dllmain中是不建议这样做的。因此,动态库在dllmain的时候直接挂载了comeasy.exe的入口 //获取入口 TrueEntryPoint (i…

【其他】灾害预警,科技助力:手机地震预警功能设置指导

22024年4月3日7时58分在台湾花莲县海域遭遇了一场7.3级的强烈地震,震源深度12公里,震中位于北纬23.81度,东经121.74度,距台湾岛约14公里。震中5公里范围内平均海拔约-3560米。这场突如其来的自然灾害给当地居民的生活带来了巨大的…

【MATLAB】GA_BP神经网络时序预测算法

有意向获取代码,请转文末观看代码获取方式~ 1 基本定义 GA_BP神经网络时序预测算法是一种结合了遗传算法(GA)和反向传播(BP)神经网络的时序预测方法。它利用了遗传算法的全局搜索和优化能力,以及BP神经网络的学习和逼近能力,可以更有效地预…

Qtxlsx第三方库的安装和使用

本文仅作为一个记录,安装QtXlsx方便操作excel,主要参考了这篇博文:https://blog.csdn.net/u014779536/article/details/111769792 1,下载安装Perl脚本Strawberry Perl for Windows,默认安装strawberry-perl-5.30.0.1-…

【Redis教程0x0F】Redis实战篇

Redis如何实现延迟队列? 延迟队列是指把当前要做的事情,往后推迟一段时间再做。延迟队列的常见使用场景有以下几种: 在淘宝、京东等购物平台上下单,超过一定时间未付款,订单会自动取消;打车的时候&#x…

ES6学习(五)-- Module 语法

文章目录 Module 语法1.1 痛点介绍(1) 异步加载(2) 私密(3) 重名(4) 依赖 1.2 解决方法(1) 解决异步加载问题(2) 解决私密问题(3) 重名解决方法(4) 解决依赖问题 1.3 模块化使用案例 Module 语法 之前js 出现的某些痛点: 在script 中引入的变量名不可以重复&#…

深入了解 Python 中标准排序算法 Timsort

🍉 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ Timsort:一个非常快速的、时间复杂度为 O ( n l o g n ) O (n \ log\ n) O(n log n)、稳健(即不改变等值元素间的相对顺序)的排序算法,在处理真实世界数…

蓝桥杯单片机真题实践篇

这里就不完全写思路过程代码什么的,这一篇文章就写我在训练真题中遇到的过程。 (呜呜呜,时间不够辣,能做多少算多少吧....) 十三届省赛题 问题1:数码管的数字消影不明显 (参考:蓝…

ms-前端八股文

1、暂时性死区 是指在 JavaScript 中使用 let 或 const 声明变量时,变量在其声明之前不能被访问或使用的特性。 var可以变量提升(在 JavaScript 中,变量声明提升是指在执行代码之前,变量声明会被提升到作用域的顶部。&#xff0…

SSM 项目学习(Vue3+ElementPlus+Axios+SSM)

文章目录 1 项目介绍1.1 项目功能/界面 2 项目基础环境搭建2.1 创建项目2.2 项目全局配置 web.xml2.3 SpringMVC 配置2.4 配置 Spring 和 MyBatis , 并完成整合2.5 创建表,使用逆向工程生成 Bean、XxxMapper 和 XxxMapper.xml2.6 注意事项和细节说明 3 实现功能 01-…

【C++】二叉搜索数

目录 一、二叉搜索树的概念 二、二叉搜索树的模拟实现 1、定义节点 2、构造二叉树 3、析构二叉树 ​4、拷贝二叉树 5、二叉树赋值 6、插入节点 🌟【非递归方式】 🌟【递归方式】 7、打印节点 8、搜索节点 🌟【非递归方式】 &…

臻奶惠无人售货奶柜:定义新时代的健康生活方式

臻奶惠无人售货奶柜:定义新时代的健康生活方式 臻奶惠的无人售货奶柜,代表着科技与生活方式融合的一个新趋势,它不仅仅是一个简单的购买平台,更是一种全新的生活体验。在这个快节奏的时代,臻奶惠通过其无人售货奶柜&a…

第四百四十三回

文章目录 1. 概念介绍2. 思路与方法2.1 整体思路2.2 使用方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"自定义Action菜单"相关的内容,本章回中将介绍如何获取屏幕相关参数.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在本…