电商网站开发python,软件公司网站模板,做网站能赚钱吗,卓老师建站特色功能HTML相关知识
目录
前言
准备工作
WEB前端是什么#xff1f;
HTML是什么#xff1f;
如何运行HTML文件#xff1f;
标签
概念
分类
双标签和单标签
行内标签和块标签
HTML文档结构
预告和回顾
UI设计相关
Markdown | Md文档相关
项目合作管理相关
后话 前…HTML相关知识
目录
前言
准备工作
WEB前端是什么
HTML是什么
如何运行HTML文件
标签
概念
分类
双标签和单标签
行内标签和块标签
HTML文档结构
预告和回顾
UI设计相关
Markdown | Md文档相关
项目合作管理相关
后话 前言
本系列的博客将分享前端HTML的相关知识点。
本篇作为本系列的第一期博客主要讲解HTML入门的一些知识点。在文章的结尾我会给出本篇已经整理好的Markdown笔记源码需要的朋友可以自行取用。
HTML我也是刚刚入门的水平所以写的可能没那么深入但是对于前端小白而言是足够用了。
主打分享多多包涵抱拳。
准备工作
软件【参考版本】Visual Studio Code有关VS Code的下载安装方式可以自行站内搜索。
*使用HBuilderX或者其他的HTML编辑器都是可以的哈*
浏览器版本Chrome
系统版本 Win10/11/其他非Windows版本
*我的电脑是Win10的版本仅供参考*
WEB前端是什么
前端即网站前台部分运行在PC端移动端等浏览器上展现给用户浏览的网页。
通常来说前端可以分为前端设计和前端开发两个模块先由设计人员做出网页的视觉设计然后提交给开发人员进行代码上的实现。
对于整个全栈项目而言实质上整个流程里还有后端开发、软件测试以及运行维护等诸多岗位这里就暂时不展开来说了。
一般来说WEB前端网页由三个层次结构组成
结构层HTML表现层CSS行为层JavaScript
其实很好理解HTML就是网页的框架结构相当于房屋里的钢筋混凝土提供了一个网页的所有构成元素。
比如下面这段代码暂时不用知道它的含义提供了一个最简单的HTML5网页
!DOCTYPE html
html langenheadmeta charsetUTF-8title我是一个标题/title
/headbodyh1我是网页标题/h1p我是第一段内容/pp我是第二段内容/p
/body/html
在Chrome浏览器中运行应该是如下的效果 CSS表现为网页的所有样式相当于房子的装潢提供了网页的视觉效果。
在刚才的HTML页面中如果我想使标题和文字的视觉效果发生改变就可以使用CSS样式表实现。只需在 head/head 标签里面引入这一段样式
styleh1 {color: #e12a2a;font-family: 宋体;}p {color: #f68e43;font-family: 楷体;font-size: larger;}
/style
那么网页的效果就会变成下边这样 JavaScript表现为网页上的所有动作相当于房子里的家具用来实现各种行为和实际的功能。
在刚才的网页中我们可以在 head/head 添加下面这段代码实现点击第二段文字打开一张指定图片的功能
scriptfunction openImage() {window.open(https://profile-avatar.csdnimg.cn/e495e388550d4706b75bf7261bed6d28_zc13786305863.jpg!1, _blank);}
/script
注意第二段文字里面要加上鼠标点击时触发的JS动作
p onclickopenImage()我是第二段内容/p
然后再次点击第二段文字时就可以打开指定的图片了 这个案例我将会放到文章的最后感兴趣的可以拿去跑跑看。
CSSJS在这里暂时不去扩展本文先从最基本的HTML开始。
HTML是什么
HTML是HyperText Mark Language的缩写中文全称叫“超文本 标记 语言”。
它是一种用来创建网页的标准的标记语言html文件运行在浏览器上默认由浏览器解析。
!-- 1.标记语言由一套或多套标记标签组成(MarkupTag)用来描述、编辑网页的2.注意标记语言和编程语言的区别前者是解释性的逐行解析
--
html文档文件在浏览器上展示为Web页面。也可以说HTML文档就是Web页面。
如何运行HTML文件
HTML运行的位置通常来说是浏览器。
常见的浏览器大概有以下这些
360 ie 谷歌 搜狗 猎豹 夸克 uc 火狐 safari qq 2345
推荐使用Chrome浏览器也就是谷歌浏览器。 当然也可以使用系统自带的Edge浏览器。
这里涉及到一个概念叫浏览器的内核。它是一种渲染引擎(页面渲染)、 JS引擎可以完成页面的逻辑以及操作并解析和执行js代码。
这里例举几种浏览器的内核 浏览器 内核 IETrident内核也是俗称的IE内核Chrome(谷歌) 统称为Chromium内核或Chrome内核以前是Webkit内核现在是Blink内核火狐(FireFox) Gecko内核俗称Firefox内核safari Webkit内核Opera最初是自己的Presto内核后来是Webkit现在是Blink内核Edge默认Chromium的Blink内核,可以打开Internet explore模式也就是Trident内核
标签
概念
标签(MarkupTag)又叫标记标签在HTML中是用来描述、编辑网页的(HTML Tag)。
任意纯HTML文件都是由标签和内容两个基本组成部分构成的。
html标签的形式通常有这两类
aaa/aaa
bbb/
*第一排是双标签第二排是单标签关于标签的分类后面会讲*
标签和内容一起构成了HTML的基本元素。
分类
标签的分类标准有很多种具体来说有两种标准
双标签和单标签行内标签和块标签
注意这只是两种分类的标准罢了 并不是说行内标签就一定是双标签或者单标签中的一种而块标签就是另一种两种分类并没有严格的对应关系。
双标签和单标签
双标签由开始标签开放标签和结束标签闭合标签组成这两种标签就像一对双胞胎一样相互对应。但是结束标签比开始标签多一个 / 符号。以html标签为例
html/html
在双标签之间是可以填写文本内容的而标签可以描述这些内容。
比如 p/p标签之间的内容就可以显示为一个段落
p这是一个段落/p
单标签自闭合标签是没有另一半与之对应的它自己就是一个完整的标签并不能包裹任何内容。
以常见的hr /标签为例表现为一段分割线
hr /
行内标签和块标签
行内标签在页面中仅仅占一行只有到达浏览器可视区域或者所在盒子的边界才会自动换行。即使自动换行后由于没有设置边距上下两行文字也是挨在一起的。
以普通文本标签为例使用的文字为《出师表》中的一段代码和浏览器中展示的效果如下
span先帝创业未半而中道崩殂今天下三分益州疲弊此诚危急存亡之秋也。然侍卫之臣不懈于内忠志之士忘身于外者盖追先帝之殊遇欲报之于陛下也。诚宜开张圣听以光先帝遗德恢弘志士之气不宜妄自菲薄引喻失义以塞忠谏之路也。
/span 块标签在页面中独自占用一块区域包括文本内容和边距等。
在上一个行内标签的后面加入一组p/p标签同样也是《出师表》的内容代码和效果如下
p宫中府中俱为一体陟罚臧否不宜异同。若有作奸犯科及为忠善者宜付有司论其刑赏以昭陛下平明之理不宜偏私使内外异法也。
/p 可以看到两部分文字之间有一定的边距。为了更直观的看到块标签和行内标签的区别我们可以在浏览器的空白区域右键单击选择“检查” 在右侧的检查区域中鼠标悬浮到指定的文本的位置比如说第一段就可以在左侧看到当前文本所占的区域 可以看到行内标签所占的位置只有其中元素占的位置。
还是检查区域鼠标悬浮到第二段文字的位置可以看到它所占的区域 不难发现除了文本本身所占的区域段落还包括上下的边距。
在此之后添加一个span文本可以看到新的文本被自动换行了。 对于所有的块元素本身都是自带换行的。
HTML文档结构
在了解了标签的相关内容之后我们便可以知道一个标准的HTML5HTML的版本由哪些部分构成了。为了方便解释为之前章节中的代码加上注释
!-- 文档类型html --
!DOCTYPE html!-- html根标签 --
html!-- 头部 --
head!-- 元数据编码类型 --meta charsetUTF-8!-- 网页标题 --title/title
/head!-- 主体 --
body/body/html
DOCTYPE
声明文档的类型可以大写也可以小写。
Doc是Document文件的缩写Type是种类类型。html代表文件类型为HTML。
html
和末尾的/html作为一对组成根标签。根标签是标记语言的最高级的标签网页所有的元素都是它的子元素。其概念源自可扩展标记语言Extensible Markup Language, XML感兴趣的读者可以自行了解后面也可能会单独出一期XML的杂谈笔记。
head
和后面的/head作为一对组成头部标签。头部标签中的内容是交给浏览器识别的通常来说包含元数据、标题、链接、样式、JS行为等子标签。
对于纯HTML文档而言目前暂时只需要知道其中的两项的一小部分。
meta
meta中间的内容是元数据示例代码中的meta标签中的属性“charset”代表字符集类型。UTF-8是一种常用的字符集类型目前绝大部分的程序、代码都是使用这个字符集进行编码的。
*注意错误的编码类型会导致乱码问题比如使用GBK编码书写的文档内容直接添加到一个标注了字符集类型为utf-8的网页中将导致文件内容不可读*
title
和后面的/title作为一对组成网页标题标签。网页标题显示在浏览器最上边的位置 body
和后面的/body作为一对组成主体标签。其中的内容是浏览器窗口中可视化的元素。
预告和回顾
在我的HTML第二期博客中将会介绍HTML的基本标签的使用并会加上实际的案例。
本博客是HTML系列的第一篇博客也是代码编写的第一篇博客。而所有的这些内容最终都是为我们的全栈项目服务的。
对全栈项目感兴趣的朋友也可以看看我之前的博客——
UI设计相关
PS第三期http://t.csdnimg.cn/NDKCS
Markdown | Md文档相关
Markdown全一期http://t.csdnimg.cn/pdtLW
项目合作管理相关
SVN全一期http://t.csdnimg.cn/Oz5zA
后话
在全栈领域博主也只不过是刚刚摸到了它的门槛。关于这篇博客主要是记录一下自己学习的一些经历然后把自己领悟到的一些东西总结一下分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的一些定义性的文字加入了笔者自己的很多理解在里面所以仅供参考。如果有说的不对的地方还请谅解。
【H2O2】
