初识前端html

最新推荐文章于 2024-05-21 23:21:19 发布
最新推荐文章于 2024-05-21 23:21:19 发布
阅读量166 收藏
点赞数
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuan_kong/article/details/129903384
版权

软件选用vscode

什么是前端，所谓前端就是我们看到的网页，视图，呈现出来，是我们人眼在显示屏上看到的东西，就叫前端。

前端三剑客:
html : 是一个网页的基本组成.给用户看的东西都是写在这里面.相当于人类的身体/骨架
css: 负责美化网页内容/优化网页性能(字体,排版,颜色,透明度) 相当于人类的衣服/化妆品
JavaScript: 脚本语言.主要用来实现动态效果,前后端通信,交互

初识html – 超文本标记语言

前端的两个好处:
	1.简单好上手
	2.见效很快.很快就可以做出来成果

怎样才算是一个网页文件?它的后缀应该是什么
	一个文件.它的内容为html网页 文件后缀为.html 那就是一个网页文件
		多喝热水.html

超文本: 
	比普通的文本更厉害.可以插入图片/音乐/视频/超链接/排版
标记语言:
	可以把html当成是一块拼图.它的代码称为标签.我们要做的就是把一个个正确的标签放在合适的位置上(不需要考虑太多的逻辑)

标签: 写在html里的代码
	单标签:   一般是作为功能标签,有特别的含义
		<br>	--> 换行	
		<hr>    --> 分割线
	双标签: 一般是用来包裹/保存内容.显示东西用的.它是成双成对的,需要闭合(开关门)
		<标签名>内容</标签名>	
		<h1>多喝热水</h1>
		<h1>
			多喝热水
		</h1>

html基本框架

在vscode中,建立好一个html文件后输入!+回车.就可以生成网页模板

基本框架代码:
	<html></html>  --> 是网页的基本组成.基本上所有东西都写他里面
	<head></head>  --> 头标签.里面的内容主要是写给浏览器看的/出列的. 网页介绍.样式
	<body></body>  --> 身体标签.里面写的内容写给用户看的

html中注释的写法:
	注释的快捷键:  ctrl + /
	<!--  注释内容 -->
	<!-- 多喝热水 -->

html基本文字标签

前端html中内容应该由标签包裹着.不要裸奔 
在网页里面.显示出各种各样的文字
<h1>标题内容</h1>
	一级标题.网页里的老大.从规范的角度来说,一个网站只能有一个h1标签.
<h2>标题内容</h2>
	二级标题.分块标签.作用就是区分网页内容.可以有多个
<h3>标题内容</h3>
	三级标题.分块内容标题
h系列为h1-h6标签.常用的主要就是h1-h3	

<p>段落内容</p>
	段落标签.常用的文本标签.因为是段落,会自动换行
<span>行内内容</span>
	行内文本标签.不会自动换行.后续主要配合css使用

<br> -- 换行标签
<hr> -- 分割线标签

<b></b>  && <strong></strong>   粗体标签.
	b标签只是单纯加粗,起到视觉效果. strong标签带有语义性,起强调作用
<i></i>	 && <em></em>  斜体字标签
<u></u>  && <ins></ins>  下划线标签

养成一个好习惯.代码写完了,改完了随手ctrl + s保存	
不用滥用h标签.它们是作为标题使用,不是放普通文字,文章的

转义字符

在前端开发时,有的符号可能会产生歧义.不好是被.所以用转义字符来代替 : 比如想单纯显示一个< 或 > 
	< -- 小于号 -- &lt;
	> -- 大于号 -- &gt; 
	  -- 空格符 -- &nbsp;
	¥ -- 人民币 -- &yen;

语义化与SEO:

seo --> 搜索引擎优化
	优化你的网页内容.提高权重,让网站排名在搜索引擎里面更考勤.
	提升标签的语义,设置meta属性

网站排名靠前的好处:
	越靠前.浏览量,点击量更多 --> 用户量/流量更多	

互联网上最值钱:
	1.数据
	2.流量 --> 用户量

搜索引擎本质全是就是爬虫.通过大型爬虫获取到要搜索的	数据. 里面的网站排名:
		1.给了多少钱
		2.网页内部的权重(规范 语义性 原创内容)

语义化: 判断一个网页权重,性能,规范性的标准:
	一个网站.全是h1	标签 --> 负面例子
	合理的运用标签

b标签 只是单纯的加粗 --> 肉眼可见,对于浏览器来说只是一段普通的文字
strong 在加粗之外.会起到强调的作用 --> 浏览器会优先获取strong标签里的数据.

琅琊榜 --> h1
<strong>胡歌</strong>     搜索引擎会把胡歌当成重点. 显示也是加粗的
<b>胡歌</b>  文字加粗了.但是对浏览器来说.就是普通的数据,不会强调
星_奕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
初识HTML——前端
m0_53619602的博客
05-11 1034
一、HTML的结构 1.什么是HTML HTML（Hyper Text Markup Language）的全称是超文本标记语言，是一种标记语言。 HTML代码由不同的标签组成，可以对网页的各种元素进行整理分类。 HTML可以通过修改文本文档的后缀名来实现将文本内容显示在网页上，HTML的后缀名为.html/.htm 2.HTML的基本语法 HTML文件中的标签都是由一对尖括号包含的，标签间的关系有两种：包含和并列。简单的来说，包含关系就相当于是父子关系，如下图中的<html><
初识前端
01-08
核心技术编辑HTML、CSS、JavaScript这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然...
初识前端HTML5
weixin_73805051的博客
10-14 35
在元素内部，可能会包括如（定义文档中的区段）、（定义一个段落）、（定义一个超链接）、（定义一个图像）、到（定义六级标题）等元素。在元素内部，可能会包括如（定义文档的标题，显示在浏览器的标题栏或标签页上）、（提供了关于HTML文档的元数据，例如文档的字符集、渲染引擎等）等元素。此外，也可以使用标签在部分定义文档的标题，显示在浏览器的标题栏或标签页上。
初识前端标记语言HTML
a15766649633的博客
03-08 1138
这是一篇初识HTML5/H5的文章，高手请划走，新手可留下
一.初识前端
qwertyuidmdnb的博客
07-12 170
前端初识
初识前端.
2301_81290732的博客
01-27 462
HTML叫做超文本标记语言超文本：文本，声音，图片，视频，表格，链接那如何做到一个页面上展示上面的数据呢？由许许多多的标签，即一个又一个的标记。标记：由许许多多的标签组成。HTML页面是运行在浏览器上面的。所以要运行HTML页面首先需要一个浏览器。
让我们初识前端
Z2301160504051的博客
04-20 998
而且由于现在是web应用时代，各种尺寸的电子设备增长式的爆发，只要和屏幕有关的就是颜值，颜值代表了一切，可以说是前途一片光明；元素浮动之后，会被移出正常的文档里，根据设置向左或者向右平移，直到碰到了所处容器的边框，或者是另外一个浮动的元素。和js相比，这些库的语法更简单，可以很容易地浏览文档，选择元素，处理事件等，也降低了开发人员的门槛。是网页，网页 ，网页，据统计现在全世界有亿级别的网页，这是什么概念，前途一片光明；最最直观的：前端的工资从前几年的平均几K，到现在的10k、20k ，真的是前途一片光明！
起章：初识前端——html
weixin_68160847的博客
10-27 106
接触代码，让我学到最多的地方不是代码底层原理，也不是代码实际的运用，而是学会了遇到问题，学会直面，学会分析，学会解决，学会效率，提升了处理问题的能力。
初识 HTML
qq_30094821的博客
02-29 218
通过使用 HTML，我们可以将文本、图像、链接等元素组合在一起，形成一个完整的网页
前端,初识HTML,HTML基础
最新发布
05-22
前端第一课,接触HTML,入门新手第一课
初识前端，学习html+css.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
Web前端开发技术-初识JavaScript.pptx
07-07
JavaScript内嵌于HTML网页中，通过浏览器内置的JavaScript引擎进行解释执行，把一个原本只用来显示的页面转变成支持用户交互的页面程序。 浏览器是访问互联网中各种网站所必备的工具，JavaScript主要就是运行在...
vue源码之mustache模板引擎1
qweasl_的博客
05-21 165
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 675
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1118
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 255
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
综合性练习-验证码
cj13106811623的博客
05-15 822
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
初识html：简单的hello world网页制作
06-28
### 回答1： Hello World网页制作是HTML编程的入门级别。以下是制作Hello World网页的步骤： 1. 打开文本编辑器，如记事本或Sublime Text等。 2. 在文本编辑器中输入以下代码： <!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html> 3. 保存文件，文件名为“helloworld.html”，确保文件类型为“所有文件”。 4. 在浏览器中打开“helloworld.html”文件，即可看到“Hello World!”的标题。 这个简单的网页由HTML标记组成，其中包括文档类型声明、HTML标签、标题标签和正文标签。HTML标记告诉浏览器如何显示网 ### 回答2： HTML是超文本标记语言的英文缩写，是用来制作网页的一门标记语言。在网页制作中，HTML主要用来编写网页的内容和结构，决定网页中各个元素的排列和位置。 制作HTML网页的第一步，是编写一个简单的“hello world”网页。这个网页的基本结构如下所示： <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>Hello World！</h1> </body> </html> 该网页有三个部分组成： 1.头部（head）：用于描述文档的基本属性，包括文档类型声明、字符编码、文档title等。文档title会在浏览器的标题栏中显示。 2.主体（body）：用于展示文档内容。在body中，可以添加文本、图片、链接、表格等各种元素。 3.文本（text）：在该网页中，<h1>标签表示网页的标题，这里的标题是“Hello World！”。 当我们在编辑器中输入以上代码，保存为一个html文件，使用浏览器打开它，就可以看到“Hello World！”这个简单的网页了。 尽管这只是一个简单的网页，但它展示了HTML的基本属性，如何在HTML中描述文档的结构和展示内容，为之后学习其他更加复杂的HTML网页制作奠定了基础。 ### 回答3： HTML 是一种标记语言，是网页制作的基础。在制作网页时，首先需要创建一个 HTML 文件，并在文件中编写 HTML 代码。最简单的 HTML 代码就是 Hello World 网页。下面我来介绍一下如何制作这个网页。 首先，我们需要创建一个 HTML 文件。可以使用文本编辑器（如 Notepad++、Sublime Text 等）来创建 HTML 文件。以 Notepad++ 为例，创建一个新文本文件，将文件后缀名改为 .html，这样我们就创建了一个 HTML 文件。接下来，我们需要在 HTML 文件中编写代码。 HTML 代码由标签和内容组成。标签用来标记 HTML 文档中的不同部分，内容则是标签所包含的文本、图片、链接等等。以 Hello World 网页为例，我们可以编写以下代码： ``` <!DOCTYPE html> <!-- 文档类型声明 --> <html> <!-- html 根标签 --> <head> <!-- head 标签 --> <title>Hello World</title> <!-- title 标签，设置网页标题 --> </head> <body> <!-- body 标签，设置网页的 body 部分 --> <h1>Hello World</h1> <!-- h1 标题标签，设置网页主标题 --> <p>This is my first HTML web page.</p> <!-- p 标签，设置网页主要内容 --> </body> </html> ``` 上述代码中，第一行 ``<!DOCTYPE html>`` 是文档类型声明，告诉浏览器这是一个 HTML5 文档。接下来的 ``<html>`` 标签是 HTML 文档的根标签，所有其他标签都嵌套在它内部。``<head>`` 标签用于设置网页的头部内容，例如网页标题、样式表等等。标签内部的 ``<title>`` 标签用于设置网页标题。``<body>`` 标签用于设置网页的 body 部分，即网页中显示的内容。``<h1>`` 标签用于设置网页主标题，“Hello World” 就是我们的主标题。``<p>`` 标签是段落标签，用于设置网页主要内容。 将上述代码保存为 .html 后，我们就可以用浏览器打开它，看到我们刚刚编写的 Hello World 网页了。这是一个非常简单的网页，但它包含了 HTML 的基础标签和使用方法，对于初学者来说是非常有帮助的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值