网站开发涉及到的技术内容介绍——前端

news2024/9/24 11:24:58

一、网站开发涉及前后端交互模式

        一般来说网站项目分为两种【前后端不分离、前后端分离】,其中前后端不分离的项目是(后端语言可以直接与前端的html等内容糅合在一起,后端语言可以操作数据进行动态渲染前端的html文件进行展示)。后端分离的项目是(后端语言不会直接对前端的html文件进行动态渲染,而是后端语言直接将处理好的数据给到前端的javascript代码,javascript代码将数据动态渲染到html文件中;目前国内比较流行的前端框架有:Vue   Angular    React 官方中文文档)。

        HTML(超文本标记语言——HyperText Markup Language)是一种用于创建网页的标记语言,网页文件的扩展名:.html或.htm;它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript)。

二、网站前端开发涉及技术

2.1、HTML 超文本标记语言

<!DOCTYPE html>
<html lang="ZH-CN">
    <head>
        <meta charset="UTF-8">
        <title>HTML的基本文档结构</title>
    </head>

    <body>
        这是HTML的基本文档结构,这里可以放置各类文本标签内容
    </body>
</html>

2.1.1、HTML文档结构介绍

HTML基础icon-default.png?t=N7T8https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics

<!--对基础HTML文档的内容介绍说明-->
<!DOCTYPE html> <!--声明文档类型为HTML文档-->
<html lang="ZH-CN"> <!--<html>、</html>是文档的开始标记和结束的标记-->
    <head>          <!--<head>、</head>定义了HTML文档的开头内容。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据,搜索引擎关键字,网站简介和描述等内容,是给浏览器解析使用-->
        <meta charset="UTF-8">  <!--网页编码-->
        <meta name="Keywords" content="CSDN博客,CSDN学院,CSDN论坛,CSDN直播" />  <!--搜索引擎关键字(我们使用浏览器搜索就是靠这里的关键字)-->
        <meta name="Description" content="CSDN是全球知名中文IT技术交流平台,提供原创、优质、完整内容的专业IT技术开发社区." />    <!--网站的简介和描述-->
        <title>HTML的基本文档结构</title>   <!--网站的标题名称-->
    </head>

    <body>  <!--<body>、</body>之间的文本是可见的网页主体内容-->
        这是HTML的基本文档结构,这里可以放置各类文本标签内容
    </body>
</html>

 

2.1.2、HTML的标签语法

HTML文档标签是由一对尖括号包含的关键字表示,如<html>、<title>、<body>等。

1、HTML标签通常是成对出现如(<html></html> ,<head></head>,<body><body>)等,这种成对标签中第一个标签表示是开始,第二个标签是结束;
2、只有一个标签,如(<meta>、<br>、<hr>)等;
3、标签里面可以指定多个属性,也可不带任何属性。

2.1.3、常用标签

2.1.3.1、文本标签
<!--文本标签-->
<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

<p>这是一个段落</p>

<b>内容加粗</b>
<strong>强调内容加粗</strong>

<i>内容设置为斜体</i>
<em>强调内容设置为斜体</em> 

<u>给内容设置下划线</u>

<del>删除线</del>

<sup>上标</sup>
<sub>下标</sub>

<br>    <!--换行-->
<hr>    <!--分割线-->

示例:

<!DOCTYPE html> 
<html lang="ZH-CN"> 
    <head>
        <meta charset="UTF-8"> 
        <meta name="Keywords" content="搜索引擎关键字" />  
        <meta name="Description" content="网站的简介和描述" />  
        <title>HTML的基本文档结构</title>  
    </head> 

    <body>
        这是HTML的基本文档结构,这里可以放置各类文本标签内容

        <hr><br>你好,</br>欢迎你
        <hr>
        <h1 id='01'>Coffeemilk 01</h1>
        <p>这是一个测试段落1</p>
        <p>这是一个测试段落2</p>
        <b>测试字体加粗</b></br>
        <i>测试斜体内容</i></br>
        <u>测试下划线</u><br>
        <strong>strong测试字体加粗</strong></br>
        3*<sup>2</sup>+log<sub>2</sub><sup>4</sup>=11
        <p>
            原价=<del>199</del><br>
            现价=168
        </p>
    </body>
</html>

2.1.3.2、HTML字符实体

HTML 字符实体icon-default.png?t=N7T8https://www.w3school.com.cn/html/html_entities.asp

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号  &apos; (IE不支持) &#39;
分(cent) &cent; &#162;
£ 镑(pound) &pound; &#163;
¥ 元(yen) &yen; &#165;
欧元(euro) &euro; &#8364;
§ 小节 &sect; &#167;
© 版权(copyright) &copy;

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

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

相关文章

c++| c++11左右值引用,完美转发,可变参数模板

c| c11的新特性 左&#xff0c;右值引用什么是左值&#xff0c;右值左值引用和右值引用右值引用解决什么问题呢&#xff1f;移动构造万能引用形式 完美转发格式 lambada表达式格式 可变参数模板可变参数模板实现打印不同类型emplace_push以list的emplace_back的实现举例 左&…

掌握 HTTP 请求的艺术:理解 cURL GET 语法

在 Web 开发和服务器通信领域&#xff0c;掌握 HTTP 请求对于寻求有效与 Web 服务和 API 交互的开发人员至关重要。在众多可用于发出 HTTP 请求的工具中&#xff0c;cURL 脱颖而出&#xff0c;成为全球开发人员信赖的强大且多功能的命令行工具。在这篇博文中&#xff0c;我们将…

MySQL分组查询有关知识总结

目录 4. 分组查询&#xff08;group by&#xff09; 4.1 概述 4.2 分组函数 4.2.1 单个使用 4.2.2 组合使用 4.2.3 注意&#xff01; 4.3 group by 4.3.1 单个字段 4.3.2 多个字段 4.3.3 提醒&#xff01; 4.4 having 4.5 分组查询演示 4. 分组查询&#xff08;…

海外仓怎么入局?货代还有发展的空间吗?

很多货代小伙伴可能都有一个疑惑&#xff1a;海外仓虽然火爆&#xff0c;但是怎么入局呢&#xff1f;显然&#xff0c;自建海外仓的试错代价太高了&#xff0c;成本高、选址难、管理起来更是一地鸡毛。既然无法自建&#xff0c;那转换赛道&#xff0c;管理别人的仓库&#xff0…

iOS面试之属性关键字(二):常见面试题

Q:ARC下&#xff0c;不显式指定任何属性关键字时&#xff0c;默认的关键字都有哪些&#xff1f; 对应基本数据类型默认关键字是:atomic,readwrite,assign 对于普通的 Objective-C 对象:atomic,readwrite,strong Q&#xff1a;atomic 修饰的属性是怎么样保存线程安全的&#x…

如何将本地下载的切片电影进行合成一个视频

合成后的时长1&#xff1a;41 没有合成前是50个电影切片 注明:电影切片不是真实的切片名称而是自定义从0-50的数字 import requests # with open("电影.m3u8","r") as f: # n0 # for line in f: # if line.startswith("#"): …

SpringBoot项目如何安装Selenium自动化(详解)

目录 一、打开intellij idea&#xff0c;创建Maven项目 二、添加依赖 三、在Test路径下创建自动化文件 3.1 项目结构 3.2 代码 四、运行自动化 前言&#xff1a; java版本最低要求为8。电脑至少已安装一种浏览器&#xff0c;如&#xff1a;Chrome&#xff08;推荐&#xff09;、…

十日Python项目——第五日(商品数据)

#前言&#xff1a; 在最近十天我会用Python做一个购物类项目&#xff0c;会用到DjangoMysqlRedisVue等。 今天是第五天&#xff0c;主要负责撰写响应具体的商品数据。若是有不懂大家可以先阅读我的前四篇博客以能够顺承。 若是大家基础有不懂的&#xff0c;小编前面已经关于…

RJ45空包弹网口描述与应用

RJ45空包弹网口&#xff0c;通常指的是RJ45接口的空芯线缆&#xff08;通常称为“空包”&#xff09;和相应的连接器。这种线缆和连接器组合常用于网络布线中&#xff0c;特别是在需要将网络信号从一端传输到另一端&#xff0c;同时保持信号完整性和隔离性的场合。 描述&#…

C++初阶:list的使用和模拟实现

关于list可以先看一下这个文档&#xff1a;list文档 一.list的介绍和使用 1.1 list的介绍 list实际上就是链表&#xff0c;是带头双向循环链表。 1.2 list的使用 list的使用跟我们以前用C语言实现时的一样。push&#xff0c;pop&#xff0c;insert等等。 1.2.1list的构造 …

【从零开始一步步学习VSOA开发】开发环境搭建

开发环境搭建 开发 VSOA 首先需要搭建开发环境&#xff0c;这里讲解 Windows 下 C/C 开发环境搭建方法。 下载 IDE 并申请授权码 SylixOS 的开发和部署需要 RealEvo-IDE 的支持&#xff0c;因此您需要先获取 RealEvo-IDE 的安装包和注册码。 RealEvo-IDE 分为体验版和商业版…

简单的 微服务netflix 学习

简单的 微服务netflix 学习 一.Eureka 学习 1. 服务简单搭建 1.1 首先确定pom文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-…

FPGA入门系列:计数器

目录 微信公众号获取更多FPGA相关源码&#xff0c;且微信公众号为首发&#xff0c;第一时间获取最新文章&#xff1a; 计数器是一种典型的时序器件&#xff0c;常用于对时钟脉冲的个数进行计数&#xff0c;还用于定时、分频、产生同步脉冲等 按触发方式分&#xff1a;同步计数…

国内SSL证书颁发机构哪家服务更优质?

SSL证书作为保障网站数据传输安全的关键工具&#xff0c;其重要性不言而喻。选择一个可靠的SSL证书代理商&#xff0c;不仅能够提供多样化的证书类型&#xff0c;而且能在众多品牌中进行比较&#xff0c;选择最适合自己的、性价比更高的产品。此外&#xff0c;优质的代理商还能…

JAVA项目基于Spring Boot的多媒体素材库

目录 一、前言 二、技术介绍 三、项目实现流程 四、论文流程参考 五、核心代码截图 专注于大学生实战开发、讲解和毕业答疑等辅导&#xff0c;获取源码后台 一、前言 信息化管理时代已至&#xff0c;计算机与互联网技术深度融合于生活点滴。本系统源于对用户需求的深刻洞…

Spark学习之SaprkCore

FlinkCore 1、JavaAPI 1、创建一个Topic并写入数据 向Kafka写数据 如果topic不存在则会自动创建一个副本和分区数都是1的topic package com.shujia.kafka;import org.apache.kafka.clients.producer.KafkaProducer; import org.apache.kafka.clients.producer.ProducerRecord…

JAVASpring学习Day2

面向切面编程 (AOP) 面向切面编程是一种编程范式&#xff0c;用于在程序中分离关注点&#xff0c;例如日志记录、事务管理和安全性。它主要由以下几个关键组成部分构成&#xff1a; 连接点 (Join Point)&#xff1a;在程序执行过程中可以插入切面的点&#xff0c;通常是方法的…

I2C 设备驱动编写流程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、修改设备树1、 IO 修改或添加2、在 i2c1 节点追加 ap3216c 子节点3、查看设备树节点创建是否成功 二、AP3216C 驱动编写 前言 提示&#xff1a;这里可以添…

9.11 与 9.9 哪个大? 大模型幻觉从何而来?用最通俗的例子讲清楚大模型原理。

​如下图&#xff0c;我们使用用 gpt-4-turbo 模型为例&#xff0c;问9.11 与 9.9 哪个大&#xff0c;并让他一步一步给出分析步骤。你会发现&#xff0c;它开始了胡说八道&#xff0c;这就是“大模型幻觉” 。 那么问题来了&#xff0c;为什么会出现这种结果&#xff1f;幻觉从…

【Python代码】如何在多个Excel文件中高效找出含有特定关键词的文件?

点击上方"蓝字" 关注木易巷&#xff01; 哈喽&#xff0c;大家好&#xff0c;木易巷来啦&#xff01; 想象一下&#xff0c;如果你有一个文件夹&#xff0c;里面堆满了近百个Excel文件&#xff0c;你需要从中找出包含特定关键词文本的文件。文件格式不统一&#xf…