web前端(第一天HTML)

前端是什么?
网页?
将数据以各种方式(如:表格、饼图、柱状图等)呈现给用户,我们就可以称之为前端。
做前端所需要的工具?
notepad editplus notepad++ vscode webstorm 等,一般用于前端开发。
前端有那个语言?
html css Javascript vue react node.js 都是属于前端相关的语言。
HTML 介绍
什么是 HTML
HTML Hyper Text Markup Language (超文本标记语言),它可以支持超链接、图片、视频、音乐
等元素,然后使用不同的标签来对这些元素进行标记。
这个语言是由一个叫: Tim Berners-Lee( 蒂姆 · 伯纳斯 · )
HTML 是一种树型结构的文本。它主要包括两个部分:头部和主体。
头部中主要有标记、引入样式、设置文本编码、搜索优的的关键字、以及搜索优化的描述等信息。
主体就是我们可以看到的所有内容,都在这个部分。
HTML 的作用
它的作用是用于呈现数据的基石。
HTML 发展
HTML 1.0 :在 1993 6 月作为 互联网工程工作小组 ( IETF ) 工作草案发布。 [5]
HTML 2.0 1995 1 1 月作为 RFC 1866 发布,于 2000 6 月发布之后被宣布已经过时。 [5]
HTML 3.2 1997 1 14 日, W3C 推荐标准。 [5]
HTML 4.0 1997 12 18 日, W3C 推荐标准。 [5]
HTML 4.01 (微小改进): 1999 12 24 日, W3C 推荐标准。 [5]
HTML 5 HTML5 是公认的下一代 Web 语言,极大地提升了 Web 富媒体 、富内容和富应用等方面的
能力,被喻为终将改变 移动互联网 的重要推手。 Internet Explorer 8 及以前的版本不支持。
使用 HTML
环境安装和配置
要想运行 HTML ,只需要有浏览器即可。而我们系统中就自带了浏览器, 所以我们不需要额外的环境。
对于编写 HTML ,我们可以使用前面说的工具,我个人习惯使用 webstorm
在企业中,目前所使用的工具比较多的是两大类:
vscode ,它是微软开发的免费工具
webstorm ,它是 jetbrains 公司开发的收费工具
编写页面
打开工具,编写一个后缀为 .html 的页面,如: index.html
页面元素解析:
HTML 标签介绍
常用标签
b/strong 标签
这个标签是用于加粗文字的,一般用于强调某个部分的作用。
在以后使用中,推荐使用 strong 标签。
i/em 标签
它们的使用是让文字变为斜体
u 标签
它的作用是给文字添加下划线
del 删除线
它的使用是给文字添加删除线
br 换行
p 标签 *
这个标签是一个段落标签,它本身就自带了意思距。在这个标签中的文件会独占一行。
pre 预处理标签
这个标签的作用是书写的内容与显示的样式内容相同。
这个标签一般用于显示源码的。
span 标签 **
它是一个行内标签,它没有什么特殊的意义,但是在使用中却比较多。一般会接合 css 样式来修饰文本。
div 标签 ***
它是一个块状标签,一般用于页面布局。
sub 标签
这个标签的作用是指定下标,一般用于数字方面。
sup 标签
这个标签的作用是指定上标,一般用于数字方面。
hr 标签
这个标签用于给页面划水平线。
标签属性说明:
size :用于指定线的粗线,值越大线越粗
width :用于指定线的宽度,值越大越宽
align :用于指定线的对齐方式,有以下三个值:
left :居左对齐
center :居中对齐,它是默认值
right :居右对齐
hn 标签
这个标签中的 n 1 ~ 6 的数字,一般用于标题。
HTML5 中语义标签
这个标签是 HTML5 中定义的新的语义标签,有以下几个:
header :用于定义页面的顶部
article :用于表示文章的内容
section :用于定义内容的分块信息
nav :用于定义页面的导航部分
aside :用于定义页面的侧边栏
footer :用于定义页面的页脚部分
address :用于定义用户邮件、地址等信息
特殊字符
HTML 中有很多特殊字符,如下表所示
多媒体标签
img***
这个标签的作用是在页面中引入图片
标签属性说明:
src :这个属性非常重要,用于指定图片显示的路径,可以是相对路径,也可以是绝对路径。(简单来说,
windows 中带了盘符,在 Linux 中以 / 开头的路径,在链接中以 http:// 开头的就是绝对路径,
其他都是相对路径。相对路径的参考点就是这个对象本身。)
width :用于指定图片显示的宽度,如果只指定宽,则高会根据宽度来等比例绽放
height :用于指定图片显示的高度,如果只指定高,则宽度会根据高度来等比例绽放。注意: width
height 两个属性不要同时指定。
border :用于指定力图片显示的边框粗细,默认是无边框
alt :是在图片不能正常显示时才会显示这个文字内容
title :用于当鼠标移动到图片上时显示的提示信息。一般用于搜索引擎优化。
a 标签 ***
这个标签是用于作链接的标签。
第一种用法:超链接
属性说明:
href :这个属性是一个必须属性,用于指定要打开的目标地址
target :链接打开的方式,有以下几个值:
- _blank :在新窗口打开
- _self :在本窗口打开,默认值
- _top :在父窗口打开,一般用于 frame 框架时
- _parent :在父窗口打开,一般用于 frame 框架时
第二种用法:锚点
demo1.html
demo2.html
audio 标签
这个标签是用于播放音乐的标签。常用支持格式为 mp3 格式。
标签属性说明:
1. controls :它是用于对播放器进行控制器的,即显示播放器的控制按钮
2. src :用于指定音频文件的路径
3. autoplay :指定是否自动播放
4. loop :指定是否循环播放
video 标签
标签属性说明:
1. src :指定要播放的视频地址,可以是相对路径,也可以是绝对路径。这个标签所支持的视频格式不
多,目前只把持 mp4 ogg 两种
2. controls :显示播放控制按钮
3. autoplay :自动播放
4. loop :自动循环
5. width :设置播放器的宽度
6. height :设置播放器的高度
表格标签 **
在我们进行数据展示时,很多时候都会用到表格,特殊是在后台进行数据管理时,或者显示列表数据
时,就会用表格。
要使用表格就需要用到 table 标签,而表格是由行和列组成。行的标签是 tr ,而列的标签是 td th
基本表格
表格的标签和属性说明:
table :用于绘制表格
tr :用于绘制表格的行
td :用于绘制表格的列(单元格)
width :指定表格的宽度,也可以是 td 的属性
border :指定表格的边框粗细
cellspacing :指定单元格之间的间距
cellpadding :指定单元格边框与单元格中内容的距离
align :用于指定表格对齐方式:
- left :左对齐,默认值
- center :居中对齐
- right :右对齐
align 属性可以是 table ,也可以是 tr ,还可以是 td 。如果是 table 的,表示对整个表格有
效;如果是 tr 的,表示对当前行有效;如果是 td 的表示只对当前的单元格有效。
带标题的表格
使用 caption 来指定表格的标题,使用 thead 标签来指定表格的头, tbody 来指定表格数据区, tfoot
定表格的尾部。
td th 的区别:
1. td 中的内容是普通格式,而 th 中的内容是加粗的格式
2. td 中的内容是左对齐,而 th 中的内容是居中对齐
跨行跨列表格
相关属性说明:
1. colspan :用于指定要跨多少列,它的值是一个数字
2. rowspan :用于指定要跨多少行,它的值是一个数字
表格嵌套
列表标签 ***
HTML 中,列表标签有以下几种:
ul
ol
dl
ul
它是无序列表标签
标签和属性说明:
ul :用于指定无序列表
li :指定列表中的某一项
type :指定无序列表的格式,有以下几个值:(了解)
- disc :实心圆形,默认值
- square :实心方形
- circle :空心圆形
ol
它是有序列表
type 属性有以下值:
1. 数字:默认值
2. a :以小写字母 a 开始
3. A :在大写字母 A 开始
4. i :以罗马字开始
dl
它数据列表
表单标签 ***
form 标签
这个标签是用于表单提交的标签,一般在与用户交互时就会用到 form 标签。
标签属性说明:
name :用于给这个表单取一个唯一的名称,便于后续使用 js 来操作这个表单
action :表单提交的地址
method :表单提交的方式,有以下两个值:
- get :表单以 get 方式提交
- post:表单以 post 方式提交
补充 get post 提交的区别:
1. get 提交的数据会以参数的形式体现在浏览器地址栏中,而 post 提交的数据是在请求头中
2. get 提交方式提交的数据不能超过 4k 大小,而 post 提交方式理论上是没有大小限制的
input
这是表单元素中非常重要一组标称,它有很多类型:
text :最常见的类型,用于提交文本字符串内容
password :用于提交密码数据
radio :单选按钮
checkbox :多选按钮
submit :提交按钮
reset :重置按钮
button :普通按钮
image :图片按钮
file :文件上传域
select
select 是下拉列表标签
标签属性说明:
name :表单提交时要获取对应元素值是所需要的属性
value :指定 select 中每一个子元素的值
size :指定 select 可看到的元素个数,默认值是 1
multiple :表示可以多选
textarea
这个标签是用于输入大文本内容的标签。
标签属性说明:
name :用于获取元素值的属性
cols :用于指定文本框的宽度
rows :用于指定文本框的高度

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

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

相关文章

搜索+哈希/平衡树,LeetCode 987. 二叉树的垂序遍历

目录 一、题目 1、题目描述 2、接口描述 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 给你二叉树的根结点 root ,请你设计算法计算二叉树的 垂序遍历 序列。 对位于 (row, col) 的每个结点而言,其左右子结…

Netty应用——通过WebSocket编程实现服务器和客户端长连接(十八)

Http协议是无状态的,浏览器和服务器间的请求响应一次,下一次会重新创建连接要求:实现基于webSocket的长连接的全双工的交互改变Http协议多次请求的约束,实现长连接了, 服务器可以发送消息给浏览器客户端浏览器和服务器端会相互感知…

【python】Fraction类详解及生成分数四则运算“试卷”

文章目录 一、前言实验所需的库终端指令Fraction类1. Fraction(numerator, denominator):2. Fraction(numerator)3. Fraction()4. 分数作参数5. 负分数作参数6. 字符串作参数7. 小数作参数8. 科学计数法9. 浮点数作参数10. 浮点数精度问题11. Decimal对象作参数 二、…

新年快乐(水)

首先,祝大家新年快乐,龙年大吉! 然后我来大概解释一下春晚上两个魔术的原理吧。切,要不是我电脑坏了才不看春晚呢。 第一个魔术根数学没多大关系,主要就是换了一副牌,然后假洗。至于计时器吗,那基本就是后…

【Java程序设计】【C00264】基于Springboot的原创歌曲分享平台(有论文)

基于Springboot的原创歌曲分享平台(有论文) 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的原创歌曲分享平台 本系统分为平台功能模块、管理员功能模块以及用户功能模块。 平台功能模块:在平台首页可以查看首…

Linux系统安全——iptables相关总结

在使用iptables时注意要先关闭firewalld(systemctl stop firewalld.service) 1.查看iptables规则 iptables -vnL 选项含义-v查看时显示更多详细信息-n所有字段以数字形式显示-L查看规则列表 例,拒绝来自192.168.241.22的源地址 直接丢弃 …

可视化工具:将多种数据格式转化为交互式图形展示的利器

引言 在数据驱动的时代,数据的分析和理解对于决策过程至关重要。然而,不同的数据格式和结构使得数据的解读变得复杂和困难。为了解决这个问题,一种强大的可视化工具应运而生。这个工具具有将多种数据格式(包括JSON、YAML、XML、C…

Swift Combine 用 Future 来封装异步请求 从入门到精通十一

Combine 系列 Swift Combine 从入门到精通一Swift Combine 发布者订阅者操作者 从入门到精通二Swift Combine 管道 从入门到精通三Swift Combine 发布者publisher的生命周期 从入门到精通四Swift Combine 操作符operations和Subjects发布者的生命周期 从入门到精通五Swift Com…

16 亚稳态原理和解决方案

1. 亚稳态原理 亚稳态是指触发器无法在某个规定的时间段内到达一个可以确认的状态。在同步系统中,输入总是与时钟同步,因此寄存器的setup time和hold time是满足的,一般情况下是不会发生亚稳态情况的。在异步信号采集中,由于异步…

【C++】STL之string 超详解

目录 1.string概述 2.string使用 1.构造初始化 2.成员函数 1.迭代器 2.容量操作 1.size和length 返回字符串长度 2.resize 调整字符串大小 3.capacity 获得字符串容量 4.reserve 调整容量 5.clear 清除 6.empty 判空 3.string插入、追加 、拼接 1.运算…

DataBinding源码浅析---初始化过程

作为Google官方发布的支持库,DataBinding实现了UI组件和数据源的双向绑定,同时在Jetpack组件中,也将DataBinding放在了Architecture类型之中。对于DataBinding的基础使用请先翻阅前两篇文章的详细阐述。本文所用代码也是建立在之前工程基础之…

利用Windows10漏洞破解密码(保姆级教学)

前言: 本篇博客只是技术分享并非非法传播知识,实验内容均是在虚拟机中进行,并非真实环境 正文: 一.windows10电脑密码破解 1)开启windows10虚拟机,停留在这个页面 2)按5次Shift键,出现这个粘滞键,如果没有出现的,则说明漏洞已经修复 3)重新启动,在这个页面的时候…

conda 相关命令

创建并激活环境:打开终端,并创建一个新的conda环境,以确保安装的软件与M1芯片兼容。运行以下命令: conda create -n myenv python这将创建一个名为"myenv"的新环境,并安装Python。然后,激活该环境…

只用cin和cout

ios::sync_with_stdio(false); ——> 在c中之所以cin,cout效率低,是因为先把要输出的东西存入缓冲区,再输出,导致效率降低,而这段语句可以来打消iostream的输入和输出缓存,可节省时间&#…

P1928 外星密码

网址如下&#xff1a; P1928 外星密码 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) C的string真的是太好用辣&#xff01; 思路就是用一个函数来递归翻译 代码如下&#xff1a; #include<iostream> #include<string> #include<cctype> using namespace…

2024/2/7 图的基础知识 1

图的存储 B3643 图的存储 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路&#xff1a;mp[n][n]用来存邻接矩阵&#xff0c;二维vector用来存每个点连的点 完整代码&#xff1a; #include <bits/stdc.h> #define int long long const int N 1e5 10; int n, m; …

C++重新入门-字符串

C 提供了以下两种类型的字符串表示形式&#xff1a; C 风格字符串C 引入的 string 类类型 1.C 风格字符串 C 风格字符串是使用字符数组来表示的&#xff0c;以空字符 \0 结尾。它们通常被称为 "C-style strings"。例如&#xff1a; char str[] "Hello"…

Qt4版本的信号槽写法

​​​​​​ connect(teacher,SIGNAL(hungry(QString)),student,SLOT(treat(QString))); 这里使用了SIGNAL和SLOT这两个宏&#xff0c;宏的参数是信号函数和槽函数的函数原型。 因为直接填入了函数原型&#xff0c;所有这里边编译不会出现因为重载导致的函数指针二义性的问…

CSC8014: Software Development – Advanced Techniques 第二周

2.3 Introduction to the Collections Framework The Collections Framework • A unified, generic framework for the representation and manipulation of groups of objects –Manipulation is independent of representation • Includes: –Interfaces that define typ…

QT 信号和槽的拓展

​​​​​​ 一个信号可以和多个槽相连 如果是这种情况&#xff0c;这些槽会一个接一个的被调用&#xff0c;但是槽函数调用顺序是不确定的。像上面的例子&#xff0c;可以将一个按钮点击信号连接到关闭窗口的槽函数&#xff0c;同时也连接到学生请吃饭的槽函数&#xff0c;…