Web前端入门

news2024/11/26 6:19:07

文章目录

  • 前言
  • 1 Web前端概述
    • 1.1 网站和网页
    • 1.2 HTML语言
    • 1.3 网页的形成
    • 1.4 常用浏览器
    • 1.5 浏览器内核（渲染引擎)
    • 1.6 web标准
  • 2 HTML标签
    • 2.1 开发工具
    • 2.2 HTML语法规则
    • 2.3 标签的关系
    • 2.4 HTML注释标签
    • 2.5 结构标签
  • 3 常用标签
    • 3.1 标题标签
    • 3.2 段落标签
    • 3.3 换行标签
    • 3.4 文本格式化标签
    • 3.5 div和span标签

前言

“贾谊上书忧汉室，长沙谪去古今怜”    —刘长卿 《自夏口至鹦鹉洲夕望岳阳寄源中丞》

在这里插入图片描述

1 Web前端概述

1.1 网站和网页

  • 网站：是使用 HTML等制作的用于展示特定内容相关的网页集合。

  • 网页：是网站中的一页，通常是 HTML格式的文件，它要通过浏览器来阅读。

  • 网页构成：通常由图片、链接、文字、声音、视频等元素组成。

1.2 HTML语言

  • HTML：指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
  • 超文本：即超越了文本限制，可以加入图片、声音、动画、多媒体等内容
  • 标记语言：语法是由一套标记标签构成的。

注意：HTML 不是一种编程语言，而是一种标记语言 (markup language)。

1.3 网页的形成

  • 前端人员开发代码
  • 浏览器解析显示代码（也称为渲染）
  • 生成最后的 Web 页面

1.4 常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。
在这里插入图片描述

1.5 浏览器内核（渲染引擎)

        浏览器内核(渲染引擎)：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

浏览器内核备注
IETridentIE、360极速浏览器、百度浏览器
firefoxGecko火狐浏览器
SafariWebkit苹果浏览器
chrome/OperaBlinkchrome/opera浏览器

1.6 web标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

1. 为什么需要Web标准？

  • 浏览器不同，它们显示页面或者排版就有些许差异
  • 遵循 Web 标准可以让不同的开发人员写出的页面更标准、更统一。

2. web标准的构成

       主要包括 《结构Structure》 、《表现（Presentation）》和《行为（Behavior）》三个方面。

标准说明备注
结构结构主要是即网页的整体框架，即HTML结构类似于身体
表现表现主要是网页的外观样式，即CSS表现类似于外观
行为行为主要是网页的交互，及JavaScript行为类似于行为

在这里插入图片描述

2 HTML标签

2.1 开发工具

web前端的开发工具推荐使用微软公司的VSCode，使用步骤如下：

       1.下载open in browser插件。

       2.新建文件，以.html结尾。

       3.生成页面骨架结构。 输入!按下 Tab/enter键。

       4.保存（Ctrl + S ）,记住每次写完代码必须保存。

       5.空白位置单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。

2.2 HTML语法规则

  • HTML标签：是由尖括号包围的关键词，例如 <html>
  • 双标签：HTML标签通常是成对出现的，例如 <html> 和 </html> ，标签中第一个是开始标签，第二个是结束标签
  • 单标签：有些特殊的标签必须是单个标签（极少情况），例如<br/>

2.3 标签的关系

       双标签关系可以分为两类：包含关系和并列关系

// 1.包含标签
<head>  
   <title> </title> 
</head>

// 2.并列标签
<head> </head>
<body> </body>

2.4 HTML注释标签

       HTML注释标签：<!-- 注释内容 -->

       快捷键：Ctrl + /

2.5 结构标签

       每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写

       1. 标签说明

标签名说明
<html></html>根标签
<head></head>文档的头部
<title></title>文档的标题
<body></body>文档的主体

       2. 代码演示

<!-- 1.文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.-->
<!DOCTYPE html>
<!-- 2.用来定义当前文档显示的语言。en定义语言为英语zh-CN定义语言为中文-->
<html lang="en">

<head>
    <!-- 3.指定文档编码为UTF-8-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>

<body>
    流光飒沓,世事朦胧
</body>

</html>

       3. 图片演示

在这里插入图片描述

3 常用标签

3.1 标题标签

       标题标签有6个，即<h1>~<h6>,字体依次变小，代码示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>

<body>
    <h1>一号标题</h1>
    <h2>二号标题</h2>
    <h3>三号标题</h3>
    <h4>四号标题</h4>
    <h5>五号标题</h5>
    <h6>六号标题</h6>
</body>

</html>

3.2 段落标签

       在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落,代码示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>

<body>
    <p>我是一个段落标签</p>
</body>

</html>

3.3 换行标签

       在HTML中，换行标签是一个但标签，即<br/>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>

<body>
    我很想看到渐次泛白的黎明时分的天宇，<br/>想喝热气腾腾的牛奶，<br/>想闻树木的清香，<br/>想翻晨报的版面。<br/>山川寂寥，<br/>街市井然，<br/>居民相安无事。<br/>可惜人无身影，<br/>无记忆，<br/>无心。
</body>

</html>

3.4 文本格式化标签

       在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

       1. 文本格式化标签

语义标签说明
加粗<strong></strong>或者<b></b>建议使用<strong></strong>
倾斜<em></em>或者<i></i>建议使用<em></em>
删除线<del></del>或者<s></s>建议使用<del></del>
下划线<ins></ins>或者<u></u>建议使用<ins></ins>

       2. 代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>

<body>
    <strong>举世皆浊我独清，众人皆醉我独醒</strong><br />
    <em>举世皆浊我独清，众人皆醉我独醒</em><br />
    <del>举世皆浊我独清，众人皆醉我独醒</del><br />
    <ins>举世皆浊我独清，众人皆醉我独醒</ins>
</body>

</html>

3.5 div和span标签

在HTML中，<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的

特点：大盒子：<div>标签一行只能一个；

           小盒子：<span>标签一行可以多个；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>

<body>
    <div>从别后，忆相逢，几回魂梦与君同。</div>
    <span>从别后，忆相逢，几回魂梦与君同。</span>
    <span>从别后，忆相逢，几回魂梦与君同。</span>
</body>

</html>

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

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

相关文章

开源城市运动预约的工具类小程序源码

开源城市运动预约的工具类小程序源码

运动场馆预约小程序是一款主要针对城市运动预约的工具类程序&#xff0c; 产品主要服务人群为20-45岁运动爱好者&#xff0c; 程序前后端完整代码&#xff0c;包括场馆动态&#xff0c;运动常识&#xff0c;羽毛球场地预约&#xff0c;足球场地预约&#xff0c;篮球场地预约&a…
阅读更多...
【C语言】常见概念

【C语言】常见概念

文章目录 库函数关键字字符和ASCll编码字符串与\0转义字符语句和语句分类注释 库函数 为了不再重复实现常见的代码&#xff0c;让程序员提升开发效率&#xff0c;C语言标准规定了一组函数&#xff0c;这些函数再由不同的编译器厂商根据标准进行实现&#xff0c;提供给程序员使…
阅读更多...
DAY4 程序流程控制

DAY4 程序流程控制

程序执行顺序 顺序结构、分支结构&#xff08;if switch&#xff09;、循环结构(for while do-while) 分支结构 IF SWITCH 表达式类型只能是byte、short、 int、 char&#xff0c;JDK5开始支持枚举&#xff0c;JDK7开始支持String、不支持double、 float、Long。 case给出的…
阅读更多...
基于Qt实现（PC）学生信息管理系统

基于Qt实现（PC）学生信息管理系统

学生信息管理系统 一、系统指南 本系统为表格式的学生信息管理系统&#xff0c;提供了文件新建、打开及保存功能&#xff0c;还可在表格中对数据进行增加、删除、修改、搜索&#xff0c;下面将一一介绍这些功能 1、新建文件 新建文件将会产生一个全新的空表格&#xff0c;…
阅读更多...
【Redis入门到精通十】Redis哨兵

【Redis入门到精通十】Redis哨兵

目录 哨兵&#xff08;Sentinel&#xff09; 1.哨兵的由来 2.哨兵的基本概念 3.基于docker安装配置Redis哨兵 4.哨兵选取主节点的原理 1.主观下线 2.客观下线 3.选举出哨兵的leader 4.leader挑选出合适的slave成为新的master 哨兵&#xff08;Sentinel&#xff09; Red…
阅读更多...
2-117 基于matlab的共振峰估计

2-117 基于matlab的共振峰估计

基于matlab的共振峰估计&#xff0c;共振峰参数包括共振峰频率和频带的宽度&#xff08;带宽&#xff09;。共振峰信息主要包含在语音频谱的包络中&#xff0c;其关键是估计自然语音频谱包络&#xff0c;通过倒谱法、LPC内插法、LPC求根法实现共振峰估计。程序已调通&#xff0…
阅读更多...
Spark_累加器

Spark_累加器

分布式共享只写变量 实现原理&#xff1a;  累加器用来把Executor端变量信息聚合到Driver端&#xff0c;在Driver程序中定义的变量&#xff0c;在Executor端的每个Task都会得到这个变量的一份新的副本&#xff0c;每个task更新这些副本的值后&#xff0c;传回Driver端进行mer…
阅读更多...
计算机视觉的应用36-人工智能时代计算机视觉技术在电力系统中的应用

计算机视觉的应用36-人工智能时代计算机视觉技术在电力系统中的应用

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用36-人工智能时代计算机视觉技术在电力系统中的应用。本文综述了人工智能时代计算机视觉技术在电力系统中的应用。文章首先介绍了项目背景&#xff0c;随后详细阐述了计算机视觉技术的模型、技术原理…
阅读更多...
轻松实现本地部署：任何人都能安装顶尖开源模型 LLaMA3！

轻松实现本地部署：任何人都能安装顶尖开源模型 LLaMA3！

引言 LLaMA3 在 2024年4月18 日正式发布了&#xff0c;作为开发人员怎么能不蹭一下热度&#xff0c;体验一下可以在个人电脑端部署的大语言模型呢&#xff1f;文末领取安装包和安装文档&#xff01; LLaMA3 LaMA3 是一个自回归语言模型&#xff0c;使用了优化的 Transformer …
阅读更多...
Java后端面试题(day16)

Java后端面试题(day16)

目录 java常见的引用类型java中深拷贝和浅拷贝如何设计一个秒杀系统?谈一下对高并发的理解&#xff0c;平时怎么处理高并发问题?Comparable和Comparator区别&#xff1f;解决hash冲突有哪些方法&#xff1f;Synchronized锁的升级过程 java常见的引用类型 java的引用类型一般分…
阅读更多...
【数据结构与算法】简单聊聊图数据的存储

【数据结构与算法】简单聊聊图数据的存储

文章目录 1. 邻接矩阵&#xff08;Adjacency Matrix&#xff09;2. 邻接表&#xff08;Adjacency List&#xff09;3. 邻接多重表4. 十字链表5. 图数据库&#xff08;Graph Database&#xff09; 存储图数据的方法主要有几种&#xff0c;每种方法都有其特定的应用场景和优缺点。…
阅读更多...
【工具】前端js数字金额转中文大写金额

【工具】前端js数字金额转中文大写金额

【工具】前端js数字金额转中文大写金额 代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>金额转…
阅读更多...
快递批量查询物流追踪只揽收无物流信息的单号

快递批量查询物流追踪只揽收无物流信息的单号

在电子商务和物流领域&#xff0c;快递单号的追踪是确保货物顺利送达的关键环节。然而&#xff0c;在实际操作中&#xff0c;经常会遇到一些只显示揽收信息而没有后续物流更新的单号&#xff0c;这给商家和买家都带来了不小的困扰。本文将介绍如何通过快递批量查询物流的方法&a…
阅读更多...
jdk多版本来回切换不生效

jdk多版本来回切换不生效

本人电脑安装了两个jdk1.8跟17 但是安装完17后发现怎么切换版本都是17&#xff0c;如图 解决思路也很简单&#xff0c;就是找到path 将%JAVA_HOME%/bin提到最前头&#xff0c;就解决了 但是需要注意的是jdk11以上就没有jre了
阅读更多...
YOLO11改进|注意力机制篇| 引入SpatialGroupEnhance注意力机制

YOLO11改进|注意力机制篇| 引入SpatialGroupEnhance注意力机制

目录 一、【 SpatialGroupEnhance】注意力机制1.1【 SpatialGroupEnhance】注意力介绍1.2【SpatialGroupEnhance】核心代码 二、添加【SpatialGroupEnhance】注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、【 SpatialGroupEnh…
阅读更多...
leetcode:反转字符串II

leetcode:反转字符串II

题目链接 string reverse(string s1) {string s2;string::reverse_iterator rit s1.rbegin();while (rit ! s1.rend()){s2 *rit;rit;}return s2; } class Solution { public:string reverseStr(string s, int k) {string s1;int i 0;//标记字符串下标int j 0;int length …
阅读更多...
程序员在AI时代扮演着多重角色：不仅是AI技术的创造者，也是使用者，更是AIGC的贡献者

程序员在AI时代扮演着多重角色：不仅是AI技术的创造者，也是使用者，更是AIGC的贡献者

程序员在AI时代扮演着多重角色&#xff1a;不仅是AI技术的创造者&#xff0c;也是使用者&#xff0c;更是AIGC的贡献者 引言 大家好&#xff0c;我是猫头虎&#xff0c;在当下的AI时代&#xff0c;程序员不仅是AI技术的推动者&#xff0c;更在这个生态中扮演着多重角色&#…
阅读更多...
ARM base instruction -- sdiv

ARM base instruction -- sdiv

有符号除法运算 Signed Divide divides a signed integer register value by another signed integer register value, and writes the result to the destination register. The condition flags are not affected. 将一个有符号整数寄存器值除以另一个有符号整数寄存器值&am…
阅读更多...
YOLOv11训练自己数据集_笔记1

YOLOv11训练自己数据集_笔记1

一、前言 官网yolov11-main yolov11代码地址 分析YOLO11的关键改进点 YOLO11 相比之前版本&#xff0c;带来了五大关键改进&#xff1a; 增强特征提取&#xff1a;通过改进Backbone和Neck架构&#xff0c;新增了C3k2和C2PSA等组件&#xff0c;提升了目标检测的精度。 优化效率…
阅读更多...
python使用装饰器来统计函数被调用次数、格式化dict以及Python-smtplib邮件发送的IP name possibly forged问题解决

python使用装饰器来统计函数被调用次数、格式化dict以及Python-smtplib邮件发送的IP name possibly forged问题解决

一、python调试&#xff1a;使用装饰器来统计函数被调用次数及格式化dict 喜欢调试的时候显示数据并显示一些其它的信息&#xff0c;比如区分是哪次调用的调试信息&#xff0c;比如友好的显示dict等相对复杂的数据类型&#xff0c;所以这里涉及到两个方面。一是统计函数被调用次…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023