WEB前端01-HTML5基础(01)

一.WEB相关概念

  • 软件架构
  1. C/S: Client/Server (客户端/服务器端):在用户本地有一个客户端程序,在远程有一个服务器端程序

    优点:用户体验好

    缺点:开发、安装,部署,维护麻烦

  2. B/S: Browser/Server (浏览器/服务器端):只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序

    优点:开发、安装,部署,维护 简单

    缺点:如果应用过大,用户的体验可能会受到影响。对硬件要求过高。

1. 静态资源:使用静态网页开发技术发布的资源。
* 所有用户访问,得到的结果是一样的。
* 如:文本,图片,音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源
2. 动态资源:使用动态网页及时发布的资源。
* 所有用户访问,得到的结果可能不一样。
* 如:jsp/servlet
* 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
  • Web标准

HTML:负责网页结构(页面元素与内容)

CSS:负责网页表现(页面元素的外观,页面样式)

JavaScript:负责网页行为(交互效果)

二.HTML基础

  • HTML基本概念
Hyper Text Markup Language 超文本标记语言
超文本: 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
标记语言:由标签构成的语言。<标签名称> 如 html,xml标记语言不是编程语言
  • HTML标签规范

标签使用规范

1. 围堵标签:有开始标签和结束标签。如 <html> </html>
2. 自闭和标签:开始标签和结束标签在一起。如 <br/>

注意:

1.标签可以嵌套使用,但不可以交叉使用
2.html中不区分大小写
3.书写开始与结束标签时,在左尖括号与标签名或与斜杠“/”之间不能留有多余空格,否则浏览器对标签不能识别,导致错误标签直接显示在页面上,影响页面美观效果

1.基本标签

HTML文件包括头部和主体两部分

  • <html**>**元素:文档以标签开始,以标签结束,所有内容都需要放在这两个标签之间。
  • –<head**>** 元素:页面头部信息,用于向浏览器提供整个 页面的基本信息,但不包含页面的主体内容。头部信息中主要包括页面的标题、元信息、CSS样式、 JavaScript脚本等元素。页面头部信息通常并不在浏览器中显示,标题元素(标签的内容)除外, 会显示在浏览器窗口的左上角。
  • –<body**>** 元素:网页的正文,是用户在浏览器主窗口中 看到的信息,包括图片、表格、段落、视频等内容, 且需位于标签之内;但并不是所有的内 部标签都是可见的。
<!-- 文档类型为HTML -->
<!DOCTYPE html><!-- HTML5中用来声明文档的类型 -->
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 标题设置 --><title>团日活动</title>
</head>
<body>
</body>
</html>

2.头部标签

  • "title"标签
<title></title>
1.浏览器标题栏,默认快捷方式,收藏夹,搜索引擎标题
2.一个页面只有一个标题
3.标题长度小于64个字符
  • "meta"标签(单标签)
<meta>的作用:提供有关页面的元信息
• 对页面的属性设置,如设置刷新、失效期、缓存、 cookie等,通过http-equiv属性进行指定。
• 对搜索引擎的属性设置,如设置关键字、简介、作者、机器人向导、 版权、编辑器等,通过name属性进行指定。
• 在HTML5中新增字符编码的属性设置,通过charset属性进行指定
格式:
<meta http-equiv="" content="">
<meta name="" content="“>

image-20231224192356307

image-20231224192417829

  • "link"标签(单标签)
<link>标签的作用:定义文档与外部资源的关系,
最常见的用途是链接样式表。<link rel="" type="" href="">

image-20231224192615833

3.文本标签

  • **概述:**HTML中文本元素包括
“**标题段落标签**”:<h1>-<h6>, <p>“**文本格式标签**”:< br> , <hr>, 修饰标签,<div>“**特殊字符标签**”:以”&“开头,”;“结尾
  • 标题标签 h 系列
A. 标题标签: <h1> - <h6><h1>111111111111</h1><h2>111111111111</h2><h3>111111111111</h3> <h4>111111111111</h4> //与默认文本大小基本相同<h5>111111111111</h5> //小于默认文本大小<h6>111111111111</h6>B. 效果 : h1为一级标题,字体也是最大的 ; h6为六级标题,字体是最小的。   
C. 默认情况下,HTML会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。       
D. 具有align属性:left,right,center,justify
  • 段落标签

段落标签: <p> 如: <p> 这是一个段落 </p>

段落标签<p>是双标签,用于对网页内容提供块级格式,即首定义的内容从新的一行开始,并于上一段之间有一个空行。
  • 换行标签

注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签

  • 水平分页线标签
<hr> </hr>
Size: 表示水平线的宽度。
Width:表示水平线的长。
Align: 表示水平线的对齐方式。
Noshade: 表示线段无阴影属性,为实心线段。
Color:表示线段的颜色
  • 文本修饰标签
效果标签标签(强调)
加粗bstrong
倾斜iem
下划线uins
删除线sdel

前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果,是没有强调语义的。 而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时,还带有强调语义。

image-20231217201813988

image-20231217201833987

image-20231217201848455

  • 特殊字符标签

image-20231224201332050

  • 文字标签
<font></font>
face:字体样式
size:大小
color:颜色
  • 有关文本标签常见元素
* color:
1. 英文单词:red,green,blue
2. rgb(值1,值2,值3):值的范围:0~255  如  rgb(0,0,255)
3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF
* width:
1. 数值:width='20' ,数值的单位,默认是 px(像素)
2. 数值%:占比相对于父元素的比例

4.图片标签

  • 图片的格式
gif:动态图片
png:体积更小
jpg: 色彩更加丰富,但每改一次都会失真
  • 图片标签
<img/>
src:指定图像的url(绝对路径 / 相对路径)
width:图像的宽度(像素 / 相对于父元素的百分比)
height:图像的高度(像素 / 相对于父元素的百分比)<!-- img标签 -->
路径书写方式
相对路径:
./ : 当前目录, ./可以省略
../ : 回退上一级目录,不可以省略
绝对路径:
1.绝对网络路径https://www.gqt.org.cn/images/20210809_tuanhui_new.png
2.绝对磁盘路径:D:\VSCode\HTML\img\1.jpg大小标签
width:  宽度    px,像素; %,相对于父元素的百分比
height: 高度    px,像素; %,相对于父元素的百分比可替代文本(当图片为加载时显示的文字信息):
alt="sada"图片的位置:
algin:top/middle/bottom/left左浮动/right右浮动(默认为bottom)
vspace:设置图像顶部和底部的间隙
hspace:设置图像左右两侧的间隙

5.列表标签

  • 无序列表
<ul>:无序列表<li>:表示列表中的每一项type:disk,circle,square
  • 有序列表
<ol>:有序列表<li>:表示列表中的每一项type:1,A,a,I,istart:列表的初始值,取值可以是1,2,3..
  • 自定义列表
<dl>:自定义列表
<dl>
<dt>自定义列表名称1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>      

6.链接标签

  • 作用一:页面间链接
文本超链接:
<a href="链宿" target="目标窗口位置">涟源</a>
图像超链接
<a href="path" target="目标窗口位置">链接文本或图像</a>
href(必填):网址 表示要跳转到哪个网页
name:创建文档内的书签
title:指向链接的提示信息
target:指定打开的目标窗口,有5种取值:
_parent -上一级窗口;
_blank-新窗口; 
_self - 同一窗口,默认值;
_top - 整个窗口打开; 
framename-框架名
  • 作用二:锚链接
--本页面跳转(用name标签进行标记)
#跳转标记
--其他页面跳转
要跳转页面#跳转标记
a.设置一个锚标记
<a name="标记">标记名</a>
b.跳转至此标记---------#
<a href="#跳转标记">标记名</a>
  • 作用三:功能性链接
邮箱链接:<a href="邮箱名"></a>
如:
<a href="mailto:someone@163.com?cc=someoneelse@163.com&bcc=someoneelse2@163.com&subject=
hello%20world&body=这是一封测试邮件!">给作者的意见或建议!</a
下载歌曲
<a href="../ch5/Try Everything.mp3">下载歌曲 &nbsp&nbsp Try Everything</a>

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

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

相关文章

Qt Qml编程 基础部分 认识qml

学习目标&#xff1a;认识Qml编程 学习内容 qml介绍 Qt QML 是一个用来设计和开发Qt应用程序用户界面的声明性语言。QML 是 Qt 的元对象语言(Meta-Object Language)的缩写。它与 C 一起使用,来为 Qt 应用程序创建用户界面。 QML 是一个标记语言,它允许开发人员使用类似 HTM…

Chapter 1:数据结构前言

在数字化的世界里&#xff0c;我们每天都在与数据打交道。然而&#xff0c;你是否曾想过&#xff0c;这些数据是如何被组织、存储和处理的&#xff1f;这就是数据结构的魅力所在。 数据结构&#xff0c;简单来说&#xff0c;就是数据的组织方式。它决定了我们如何高效地访问和操…

一文学会鉴别“套壳”ChatGPT模型

一文学会鉴别“套壳”ChatGPT模型 随着ChatGPT等明星模型的诞生&#xff0c;市场上也开始出现一些“套壳”现象&#xff0c;即部分模型表面标榜原创或先进&#xff0c;实则在核心算法上与知名模型高度相似。作为技术探索者&#xff0c;如何拨开迷雾&#xff0c;识别这些“李鬼…

/EtherCATInfo/Descriptions/Devices/Device/SubDevice/@Hideable

SubDevice/Hideable 属性 /EtherCATInfo/Descriptions/Devices/Device/SubDevice/Hideable 出现次数&#xff1a;可选 (0…1)数据类型&#xff1a;布尔值 该属性仅应在列出所有子设备的主设备的 ESI 文件中使用。该属性表示配置工具是否可以隐藏相应的子设备。只有不需要配置…

sublime text中的配置好用的报错插件,代码检查插件sublimelinter,cppcheck,对C++的环境进行配置-2024.7.13版

文章目录 一&#xff0c;sublimelinter能实现什么&#xff1f;二、sublimelinter 的安装教程配置sublime text 的基础环境配置cppcheck的环境变量配置sublimelinter的配置文件 一&#xff0c;sublimelinter能实现什么&#xff1f; 因为sublime 不自带任何的代码检查工具&#…

理解CNN中的Batch Normalization (补充 知乎博主)

理解CNN中的Batch Normalization - 知乎 (zhihu.com) https://zhuanlan.zhihu.com/p/403073810 BN层常见有针对1d特征&#xff08;全连接层后面的&#xff09; 举一个简单的例子吧 解释在全连接层&#xff08;Fully Connected Layer, FC Layer&#xff09;后加 BN 层时&#…

基于Adaboost的数据分类算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于Adaboost的数据分类算法matlab仿真,分别对比线性分类和非线性分类两种方式。 2.测试软件版本以及运行结果展示 MATLAB2022A版本运行 &#xff08;完整程序…

京鸿鑫源元宇宙革新探索:开启未来零售新纪元

随着科技的不断演进&#xff0c;元宇宙这一概念已成为科技领域的热门话题。作为中国零售业的佼佼者&#xff0c;京鸿鑫源零售公司正积极拥抱元宇宙技术&#xff0c;为用户带来前所未有的购物体验。本文将探讨京鸿鑫源如何在元宇宙领域进行创新实践&#xff0c;以及这些实践如何…

网络安全那些梗

网络安全领域的梗往往以幽默、讽刺或夸张的方式反映了该领域的某些现象、挑战或误解。以下是一些网络安全相关的梗&#xff1a; 关掉服务器是最有效的安全方法&#xff1a;这个梗源自一个笑话&#xff0c;讲述了一位程序员因误解妻子的话而只买了一个包子回家&#xff0c;随后被…

redis高性能得原因

Redis 之所以能够实现高性能和快速响应&#xff0c;主要归功于以下几个关键因素&#xff1a; ### 1. 内存存储 Redis 将所有数据存储在内存中&#xff0c;而不是磁盘上。内存的读写速度远远快于磁盘&#xff0c;因此 Redis 的数据访问速度非常快。 ### 2. 单线程模型 Redis 使…

C++:strcut与class的区别

在C中&#xff0c;struct和class在语法上非常相似&#xff0c;但它们之间确实存在一些关键的差异&#xff0c;这些差异主要体现在成员的默认访问权限和继承的默认方式上。然而&#xff0c;从更广泛的角度来看&#xff0c;它们都可以用来定义自定义数据类型&#xff0c;包含数据…

更新商品前端接口编写

文章目录 新增页面书写写表单价格符号的显示然后状态的书写后端枚举书写时间书写使用组件 新增页面书写 书写直接复制页面 写表单的绑定信息 然后绑定表单 表单绑定还有表单数据的绑定 标签中ref的作用就是将 该组件注册到vue对象的ref属性中 那么在vue运行的时候,会加载所…

fullcalendar基础使用

fullcalendar日历插件&#xff0c;下面是实现的一个基础模版实现任务的添加修改操作。 <div><div id"calendar" ref"calendarRef"></div><el-dialogv-model"dialogTableVisible"title"添加任务"width"500&…

利用PaddleOCR进行图片的跨页表格提取与合并(PDF扫描版)

利用PaddleOCR进行扫描版PDF的跨页表格提取与合并 前言1.环境准备2.文件路径与阈值设置3.定义辅助函数4.处理PDF文件5.总结 前言 在处理PDF文件中的表格时&#xff0c;常常会遇到表格跨页的情况。并且一些PDF文件为扫描版。这种情况下&#xff0c;如果要将跨页的表格合并为一个…

php将png转为jpg,可设置压缩率

/** * 将PNG文件转换为JPG文件 * param $pngFilePath string PNG文件路径 * param $jpgFilePath string JPG文件路径 * param $quality int JPG质量,0-100,值越低&#xff0c;压缩率越高 * return void * throws Exception */ function convertPngToJpg($pngFilePath, $jpgFile…

Golang:数据科学领域中的高性能并发编程新星

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 文章内容 📒📝 并发性能的卓越表现📝 系统级工具的便捷性📝 语言设计的简洁性📝 强类型系统的严格性📝 版本兼容性的稳定性📝 内置工具的全面性⚓️ 相关链接 ⚓️📖 介绍 📖 在数据科学和机器学习的广阔天地…

Web3 社交领域的开发技术

Web3 社交领域的开发技术主要包括以下几种&#xff0c;随着 Web3 技术的不断发展&#xff0c;Web3 社交领域将会出现更多新的技术和应用场景。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. 区块链技术 区块链技术是 Web3 社交的…

Arcgis横向图例设置

想把这个图例改成横向的 点击图例的属性&#xff0c;找到样式

Sklearn 入门教程:开启机器学习之旅

一、引言 在当今数据驱动的时代&#xff0c;机器学习已经成为解决各种实际问题的强大工具。Scikit-learn&#xff08;简称 sklearn&#xff09;是 Python 中广泛使用的机器学习库&#xff0c;它提供了丰富的算法和工具&#xff0c;使得构建和训练机器学习模型变得简单而高效。本…

虚幻引擎ue5游戏运行界面白茫茫一片,怎么处理

根剧下图顺序即可调节游戏运行界面光照问题&#xff1a; 在大纲里找到post&#xff0c;然后选中它&#xff0c;找到Exposure 把最低亮度和最高亮度的0改为1即可