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;就是数据的组织方式。它决定了我们如何高效地访问和操…

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;完整程序…

更新商品前端接口编写

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

fullcalendar基础使用

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

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

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

Web3 社交领域的开发技术

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

Arcgis横向图例设置

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

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

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

C# Winform 系统方案目录的管理开发

在做一个中等复杂程度项目时&#xff0c;我们通常有系统全局配置&#xff0c;还要有对应的方案目录的管理和更新。 比如我们有如下需求&#xff1a;开发一个方案管理&#xff0c;可以新建、打开和保存方案&#xff0c;同时还需要保存方案中的各种文件。我设计的采用目录管理和…

在Linux上部署Java项目过程

文章目录 1、ps -ef | grep java2、杀死指定的.jar程序3、此时再查看java进程4、找到.jar包在linux上存储的位置5、切换到存放.jar目录5、把相应的.jar包放入这个目录6、启动指定的java程序 1、ps -ef | grep java [rootiZuf6332h890vozldoxcprZ bailian]# ps -ef | grep java…

fastadmin 如何通过权限组来控制列的显示与隐藏

方法1 以版本控制&#xff08;application/admin/controller/Version.php&#xff09;为例子 需求 就是在有时候&#xff0c;有些列不想让这个权限组的人看到&#xff0c;只给制定的权限组的人看 1.给权限组创建一个字段 ALTER TABLE lt_auth_group ADD COLUMN isBoothView T…

IDEA 中的调试方式(以 java 为例)

文章目录 IDEA 中的调试方式(以 java 为例)1. 基本介绍2. 断点调试的快捷键2.1 设置断点并启动调试2.3 快捷键 IDEA 中的调试方式(以 java 为例) 在开发中查找错误的时候&#xff0c;我们可以用断点调试&#xff0c;一步一步的看源码执行的过程&#xff0c;从而发现错误所在。 …

iPhone删除所有照片的高效三部曲

苹果手机用久了&#xff0c;系统缓存包括自己使用手机留下的内存肯定会越来越多。其中&#xff0c;相册中的照片数量可能会急剧增加&#xff0c;占据大量的存储空间。当用户们想要对相册进行彻底清理&#xff0c;实现iPhone删除所有照片时&#xff0c;不妨跟随以下详细的三部曲…

数据结构(3.9_1)——特殊矩阵的压缩存储

总览 一维数组的存储结构 如果下标从1开始&#xff0c;则a[i]的存放地址LOC (i-1)*sizeof(ElemType); 二维数组的存储 二维数组也具有随机存储的特性 设起始地址为LOC 在M行N列的二维数组b[M][N]中&#xff0c;若按行优先存储&#xff0c; 则b[i][j]的存储地址的LOC (i*…

百度2025校园招聘内推开始啦

百度2025校园招聘内推开始啦&#xff0c;快来投递你心仪的职位吧&#xff08; 网申链接地址&#xff1a;https://talent.baidu.com/jobs/list?recommendCodeIZB4S3&recruitTypeGRADUATE &#xff09;填入内推码&#xff0c;完成投递&#xff0c;get内推绿色通道~我的内推码…

ASP.NET Core中创建中间件的几种方式

前言 今天我们一起来盘点一下在ASP.NET Core应用程序中添加和创建中间件常见的四种方式。 中间件介绍 ASP.NET Core中间件&#xff08;Middleware&#xff09;是用于处理HTTP请求和响应的组件&#xff0c;它们被安排在请求处理管道中&#xff0c;并按顺序执行。中间件的设计是为…

ES 慢上游响应问题优化在用户体验场景中的实践

在抖音亿级日活流量的情况下&#xff0c;每天收到的用户反馈也是大量的&#xff0c;而用户反馈对于产品的发展与未来是至关重要的&#xff0c;因此用户体验管理平台&#xff08;简称VoC&#xff09;就应运而生&#xff0c;VoC 平台旨在通过技术平台化的方式&#xff0c;结合反馈…