HTML 前端学习（1）—— 初识HTML

最新推荐文章于 2022-08-13 00:13:10 发布
最新推荐文章于 2022-08-13 00:13:10 发布
阅读量595 收藏
点赞数 2
分类专栏： HTML 前端开发学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShiJieDeYinYu/article/details/124013649
版权

学习 HTML

HTML 前端学习（1）—— 初识HTML

浏览器输入网址回车后发生了几件事？

1. 浏览器朝服务端发送请求
2. 服务端接收请求（eg：请求百度首页）
3. 服务端返回相应的响应（eg：返回一个百度首页）
4. 浏览器接收响应，根据特定的规则渲染页面展示给用户看

如何做到浏览器能和多个客户端之间进行数据交互

1. 浏览器可以自动识别不同服务端做出不同的处理
2. 制定一个统一的标准，即 HTTP 协议

HTTP协议

超文本传输协议

1. 用来规定服务端和浏览器之间的数据交互格式
2. 该协议可以不遵循，但是你的服务端不能被浏览器正常访问，就自己写客户端，用户使用就下载你专门的 APP

四大特性

1. 基于请求响应

2. 基于 TCP/IP 作用于应用层

3. 无状态
	不保存用户信息
	eg：一个人来了一千次，你都记不住，当作是第一次见面
	由于 HTML协议 是无状态的，所以后续出现了一些专门来记录用户状态的技术：session，cookie，token
	
4. 短/无链接接
	请求来一次响应一次
	长链接：双方建立链接之后默认不断开，如 webstorm

请求数据格式

请求首行（标识 HTTP 协议版本，当前请求方式 ）
请求头（一大堆 K,V 键值对）
\r\n
请求体（并不是所有的请求方式都有。get没有post有，存放的是post请求提交的敏感数据）

响应数据格式

响应首行（标识 HTTP 协议版本，当前响应状态码）
响应头（一大堆K,V键值对）
\r\n
响应体（返回给浏览器展示给用户看的数据，及页面）

请求方式

Get 请求
	从服务端（浏览器）获取数据
	一般情况下不使用请求体存储数据，如果要存储数据一般使用URL后面直接加数据的方式
		例如：url?username=aoteman&password=abc123
		eg.输入网址获取对应的内容

Post 请求
	向服务端（浏览器提供数据）
	eg.用户登录，输入用户名和密码，提交到服务端后端做身份校验

响应状态码

用一串简单的数字表达一段简单的状态或者描述性信息。

1xx：服务端已经成功接收到你的数据正在受理，你可以继续提交额外的信息

2xx：服务端成功响应了你想要的数据（200 表示请求成功）

3xx：重定向（当你在访问一个需要登陆才能看的页面，你会发现自动跳转到登陆页面）

4xx：请求错误
     404：请求资源不存在
     403：当前请求不合法或者不符合访问资源的条件

5xx：服务器端出现问题，比如服务器崩溃

HTML

超文本标记语言

注释

注释是代码之母
	1. <!--单行注释-->
    2. <!--
    	多行注释
        多行注释
        -->
	3. 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
        <!--导航条开始-->
         导航条所有 HTML 代码
         <!--导航条结束-->

文档结构

<html>
	<head></head> 写HTML文件配置内容，不是给用户展示的，即用户不需要看懂
	<body></body> 浏览器渲染展示给用户看的部分
</html>

标签分类

单标签和双标签

单标签，如：<img src="" alt="">
双标签，如：<a href=""></a>

块级标签和行内标签

常见的块级标签
	独占一行
	div标签，p标签，h1~h6
		1. 块级标签可以修改长宽，行内标签不可以，修改了也不会变化
    	2. 块级标签内部既可以嵌套块级标签也可以嵌套行内标签
        ps: p 标签只能嵌套行内标签，但如果嵌套了行内标签也没有问题，因为在运行的时候浏览器会自动解套

常见的行内标签 
	自身文本多大就占多大位置
	span标签 i u s b
		行内标签可以嵌套行内标签

head内常用标签

<title>Title</title>             定义页面名称

<style></style>                  CSS层叠样式

<link rel="stylesheet" href="">  href 调用本地的 CSS 文件进行渲染

<script></script>                书写 js 命令 或是 调用 js 文件

<meta name="keywords" content=""> 当你在用浏览器搜索时，只要输入了 keywords 后面指定的关键词那么该网页就有可能被百度搜索出来展示给用户

<meta name="description" content=""> 网页的描述信息

body内常用标签

<a href="" target=""></a>        超链接
                                 href 可以输入网址也可以输入该HTML文件中的标签 id ，实现跳转
                                	如：<a href="#hq" target="">跳转</a>
                                        <h1 id="hq">123</h1>
                                 target 默认是 _blank 表示新打开一个网页跳转页面
                                               _self  表示在原有网页的基础上跳转页面

<img src="" alt="">              图片标签
                                 src 可以输入本地图片路径
                                 	也可以输入 url （注意这里 url 既可以是图片的url 也可以是网址的 url）
                                 alt 是图片加载不出来展示给用户的描述性信息
                                 title 鼠标悬浮到图片上之后，自动展示的提示信息
                                 height="800px"
                                 width=""
                                 	高度和宽度只修改一个参数时，另一个参数会等比例缩放

<p></p>                          段落标签，展示时自动换行

<h1></h1>                        标题标签，从 h1~h6

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

HTML 中特殊符号

	&nbsp; 空格
    &gt; 大于号
    &lt; 小于号
    &amp; &符号
    &yen; 羊角符?
    &copy; 版权?
    &reg; 商标?

标签的两个重要属性

id 值
	类似于身份证，在一个 HTML 文档中，不能有相同的 id 值
	
class 值
	该值有点类似于面向对象里面的继承，一个标签可以继承多个 class 值

列表标签

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
 </ul>
世界的隐喻
关注
专栏目录
前端学习——HTML初学__1 初识
m0_53428059的博客
06-29 254
HTML5学习
前端基础——初识
yinyinlee07的博客
01-06 543
前端基础学习第一天 一、HTML CSS JavaScript初步了解 HTML是整体框架，CSS设置不同样式，JavaScript实现动态请求、网络交互等效果。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
前端的学习（HTML基础篇）
m0_46234959的博客
07-12 198
HTML
前端学习（基础）html
m0_58461769的博客
04-18 825
前言 在网站开发中，前端是直观的展示在页面上的，可以让人看见并感知的。那前端开发就是可视化内容的代码实现。 一、在学习之前需要了解的基础知识 常见五个浏览器：IE浏览器，火狐浏览器，谷歌浏览器，safari浏览器，opera浏览器 浏览器内核，可以将代码转换成页面，内核不同，加载代码的速度不一样，展示效果也不同 Web标准：HTML（负责网页的结构）,CSS（负责网页的表现）,JavaScript（负责网页的行为） web标准就是在开发时，默认需要遵守的一系列规范，从标准中来看，...
前端基础学习——带你全面掌握HTML语言
weixin_53919192的博客
07-04 1417
本文详细的讲解了HTML的各种知识，希望对你有帮助~~
前端学习之HTML基础（一）
Queen_is_king的博客
07-08 1762
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。 学习HTML就是学习各种标签，然后针对我们想要的内容来使用相应的标签。 1、html标签 整个网页是从这里开始的，然后到结束head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容” body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）标题标签： 段落标签： 网页特殊
Android中的羊角符
haizishiwo的专栏
04-02 1万+
简介 人民币羊角符是现在APP常使用的符号，有人会问，这个符号不是很简单吗？键盘结合输入法一敲就有了啊！当然，问题不会这么简单。 为什么强调“人民币”三个字呢？因为日元也是用羊角符，并且两者长得非常相似！我想问一下APP开发的码农们，你们用的人民币羊角符对吗？
初识HTML——前端
m0_53619602的博客
05-11 1122
一、HTML的结构 1.什么是HTML HTML（Hyper Text Markup Language）的全称是超文本标记语言，是一种标记语言。 HTML代码由不同的标签组成，可以对网页的各种元素进行整理分类。 HTML可以通过修改文本文档的后缀名来实现将文本内容显示在网页上，HTML的后缀名为.html/.htm 2.HTML的基本语法 HTML文件中的标签都是由一对尖括号包含的，标签间的关系有两种：包含和并列。简单的来说，包含关系就相当于是父子关系，如下图中的<html><
HTML笔记——初识web前端（附vscode基础操作）
yueooo的博客
08-21 233
vscode基础操作 vscode中进行注释的方法： 单行注释，使用“Ctrl + /”，或者先按“CTRL+K”，再按“CTRL+U”； 块注释，使用“Alt+Shift+A”。 vscode中快速新建HTML文档的方法： Ctrl+n新建文件 Ctrl+shift+s另存为 !+table生成模板 或者 HTML：5+table vs code快速复制一行代码 快捷键 1.复制到下一行 Alt+Shift+下键（上下左右的下）； 2.复制到上一行 Al...
前端学习（初识HTML 下）——表格、表单和元素
weixin_43866830的博客
03-13 4626
这里写目录标题一、HTML表格1.表格基本结构 一、HTML表格 1.表格基本结构 表格的基本结构就是 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html课程表</title> </head> <body> <table border="1"> <caption>课程表</capti
五套十分精美的个人博客模板（html+css+js）
04-11
页面美观，可以根据需要修改样式，很适合初学者拿来练习，修改一下就能做自己的个人博客！
我的博客网站静态html
10-15
我的博客页面，使用静态html页面实现，能够进行各个页面的跳转，其中功能使用div和table进行布局，使用frame框架实现整体布局，是代码演示见如下链接：http://blog.csdn.net/suwu150/article/details/52802357
人民币(¥)符号在html中的显示
12-01 2万+
在html页面显示RMB符号（¥）出现？乱码     我是在html页面的金额数前面直接 ¥ 100 这样写，结果本地的可以正常显示，但是部署在服务器上不能正常显示，请求的服务器是linux，放项目的服务器是win， 修改如下： 把原来的金额符号换成了 ￥ 结果这个金额符号显示的中间是一横。于是我又改成了¥ 显示正常。so 解决问题了
人民币符号在html的显示方法
热门推荐
梦里回忆-专栏
08-30 3万+
之前做页面的时候碰到一个问题——人民币符号 (￥) 的显示问题，IE6下特别明显。font-size:12px;的时候显示没有问题，但是一旦大于12px就会显示异常。于是上网查了一下看有什么方法不，解决方案如下：人民币符号 ¥ 的页面显示：1. 直接复制粘贴使用 " ￥ "2. 使用 "&#65509;" (没看出什么效果，跳过)3. css设置字体属性 font-family:Aria...
网页制作html与css博客世界,用HTML做一个属于你的 “世界“
weixin_39583222的博客
07-01 225
前言当你学会了HTML语言，你就可以做一个你自己想要的并且可以分享的“简易世界”。HTML简介HTML 是用来描述网页的一种语言。. HTML 指的是超文本标记语言,最基础的网页语言 (Hyper Text Markup Language). HTML 不是一种编程语言，而是一种标记语言 (markup language). HTML是用标记(标签/元素)来描述网页内容的,. HTML是文档的一种...
android 羊角符号（￥）在不同手机上显示不同
H291850336的专栏
06-17 7198
问题，部分手机显示为单个横 1.设置字体加粗，即可解决但是不美观 2.自定义字体 3.svg 4.直接使用图片
HTML做一个个人博客页面（纯html代码）
HTML网页设计
08-13 2974
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
入驻CSDN博客世界20200903
记录IT技术学习，分享IT学习体验
09-03 285
现在是2020年9月3日23:23:31，我要开始我的java博客生涯了！ 先来一段入门java代码： public class Me{ public static void main(String[] args){ System.out.println("Hello CSDN!"); } } 入门小白听我解释： public是对象之间访问权限的一种，它表示公开的，全世界的对象都可以访问。 class是java中的核心关键字，表明一种类型，类型是从实际世界中抽象出来的一种概念，其中包含了需要
spark学习之路——1.初识spark
最新发布
06-28
### 回答1： Spark是一种大数据处理的框架，它可以处理大量的数据并进行分析。初学者可以通过学习Spark的基本概念和使用方法，了解Spark的工作原理和应用场景。在学习Spark的过程中，需要掌握Spark的核心组件和API，例如Spark Core、Spark SQL、Spark Streaming等。此外，还需要学习Spark的部署和调优，以及与其他大数据技术的集成。 ### 回答2： Spark是一种基于内存的分布式计算框架，是大数据处理中最流行的技术之一。Spark简单易用，能够快速地处理海量数据，尤其是在机器学习和数据挖掘领域中表现突出。本文将从初识Spark的角度入手，介绍Spark的基本概念和使用。 一、Spark的基本概念 1. RDD RDD全称为Resilient Distributed Datasets，中文意思是弹性分布式数据集，它是Spark的核心数据结构。RDD是一个不可变的分布式的对象集合，可以跨越多个节点进行并行处理。一个RDD可以分为多个分区，每个分区可以在不同的节点上存储。 2. DAG DAG即Directed Acyclic Graph（有向无环图），它是Spark中的一个概念，用来表示作业的依赖关系。Spark将一个作业拆分成一系列具有依赖关系的任务，每个任务之间的依赖形成了DAG。 3. 窄依赖和宽依赖 对于一个RDD，如果一个子RDD的每个分区只依赖于父RDD的一个分区，这种依赖就称为窄依赖。如果一个子RDD的每个分区依赖于父RDD的多个分区，这种依赖就称为宽依赖。宽依赖会影响Spark的性能，应尽量避免。 二、Spark的使用 1. 安装Spark 要使用Spark，首先需要在本地或者集群上安装Spark。下载安装包解压缩即可，然后设置环境变量，即可在命令行中运行Spark。 2. Spark Shell Spark Shell是Spark的交互式命令行界面，类似于Python的交互式控制台，可以快速测试Spark代码。在命令行中输入spark-shell即可进入。 3. Spark应用程序 除了Spark Shell，Spark还支持以应用程序的形式运行。要创建一个Spark应用程序，可以使用Scala、Java、Python等语言进行编写。使用Spark API，读取数据、处理数据、保存数据等操作都可以通过编写代码完成。 总之，Spark是一种优秀的分布式计算框架，能够在海量数据处理中发挥出强大的作用。初学者可以从掌握RDD、DAG、依赖关系等基本概念开始，逐步深入学习Spark的使用。 ### 回答3： Spark是一种快速、分布式数据处理框架，它能够在成千上万个计算节点之间分配数据和计算任务。Spark的优势在于它支持多种语言和数据源，可以在内存中快速存储和处理数据。 在初学Spark时，我们需要对Spark的架构和核心组件有一些了解。首先，Spark的核心组件是Spark Core，它是一个可以用于建立各种应用程序的计算引擎。与此同时，Spark持有丰富的库，包括Spark SQL、Spark Streaming、MLLib和GraphX等，以支持在各种数据类型（文本、图像、视频、地理定位数据等）上运行各种算法。 若想要在Spark中进行任务，有两种编程API可供选择：Spark的核心API和Spark的SQL及DataFrame API。Spark的核心API基于RDDs（弹性分布式数据集），它是不可变的分布式对象集合，Spark使用RDD来处理、缓存和共享数据。此外，Spark的SQL及DataFrame API提供了更高层次的语言，可以处理结构化和半结构化数据。 除了组件和API之外，我们还需要了解Spark的4个运行模式：本地模式、Standalone模式、YARN模式和Mesos模式。本地模式由单个JVM上单个线程（本地模式）或四个线程（local[*]模式）运行。Standalone通常用于小规模集群或开发和测试环境。在YARN或Mesos模式下，Spark将任务提交给集群管理器，并通过管理器分配和管理资源。 总体来说，初学Spark时，我们需要了解Spark的核心组件、编程API和运行模式。熟悉这些概念以及Spark的架构，可以帮助我们更好地理解Spark和构建高效且可扩展的Spark应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值