零基础HTML
文章平均质量分 72
零基础HTML
程序员大阳
挖掘机哪家强,山东新泰找大阳
展开
-
零基础HTML教程(1)--序言
闲谭,亦作闲谈。原创 2021-09-06 22:47:16 · 1175 阅读 · 0 评论 -
零基础HTML教程(2)--神秘的程序员
程序员要想与计算机进行沟通,也得有一种语言跟计算机进行沟通,这就是编程语言了。编程语言是程序员和计算机之间沟通的语言,程序员得通过编程语言,来给计算机下命令,好让计算机完成任务。原创 2021-09-07 22:38:07 · 626 阅读 · 1 评论 -
零基础HTML教程(3)--网站者,网页的家
网站,聚集了很多网页,等待人们的访问。网站就是很多网页的集合体,这些网页共同为人们提供信息服务。例如百度网提供搜索服务,爱奇艺提供视频服务,淘宝网提供网上购物服务。原创 2021-09-09 22:18:46 · 4449 阅读 · 1 评论 -
零基础HTML教程(4)--写第一个网页
本文目录1. 文件类型2. 隐藏拓展名3. 网页的拓展名4. 网页的打开方式5. 小结1. 文件类型在学习编写网页之前,大家一定要掌握一个非常基础且不可或缺的概念,就是文件类型。我们知道文件分为txt文本文件、word文件、excel表格文件、ppt演示文档、mp3音乐文件等等不同的类型。那么电脑是怎么区分这些类型的呢,电脑只有区分开文件类型,才能使用正确的程序打开这些文件。实际上,我们的电脑是通过文件的拓展名,来区分文件的,也是通过文件的拓展名,来决定打开文件时使用什么程序。例如:记事本编写的原创 2021-09-10 08:49:21 · 1564 阅读 · 0 评论 -
零基础HTML教程(5)--开始写HTML代码
本文目录1. 什么是HTML2. 为啥叫HTML3. 什么是标记4. HTML的标记5. 编写第一段HTML网页代码6. 小结1. 什么是HTML在上一章的学习中,我们已经开发了一个空白的网页。但是空白的网页啥作用呢?毫无作用啊!!所以我们需要设计一个好看的,有内容的网页,而HTML语言,就是用来编写网页内容的语言。我们使用HTML语言规范编写的网页,浏览器就能按照相应的规则展示我们设计的内容。2. 为啥叫HTMLHTML,英文全称HyperText Markup Language,翻译为中文原创 2021-09-10 21:36:25 · 6848 阅读 · 1 评论 -
零基础HTML教程(6)--HTML发展小简史
本文目录1. 前言2. HTML版本号3. 网页类型声明4. 一个完整的网页代码5. 小结1. 前言如果我们买了一部苹果手机,然后要研究它如何使用,我们得先知道这部手机的版本,是iPhone4,还是iPhone5/6/7…。同样,如果我们买了一辆汽车,也应该先知道它的型号,比如同一款车型,也得分上个2019款/2020款/2021款。对于HTML来说,也是一样的,现在很火的一个名词H5,其实就是指的HTML5,这个5就是版本号。2. HTML版本号目前来说,基本上浏览器对HTML5的支持都很到位原创 2021-09-22 09:29:19 · 857 阅读 · 0 评论 -
零基础HTML教程(7)--body标签:充实网页的躯体
本文目录1. 题外话2. 关于标签3. 学习一个重要标签``4. ``作用5. 小结1. 题外话今天是一个重要的一天,新建了一个QQ学习群,将我的一部分学生拉到群里。以后可以通过QQ群更好的跟学生交流,了解本教程的问题并进行及时的改进。另外一些自习课,我也可以抽空去答疑,希望能他们毕业的时候,能够多多成才,有一个美好的未来。2. 关于标签网页是HTML代码编写的,而HTML代码是由标签组成的。标签的样式形如<xxx></xxx>,注意<xxx>是标签的开头部分原创 2021-09-11 21:12:36 · 1337 阅读 · 2 评论 -
零基础HTML教程(8)--中文咋乱码了
本文目录1. 网页中文会乱码2. 为啥会乱码3. 让浏览器支持中文4. 标签的属性5. 小结1. 网页中文会乱码之前的章节中,我们陆续学习了4个标签:html:整个网页head:网页头部title:网页头部的标题body:网页内容通过这四个标签,我们可以编写一个简单的网页:<html><head> <title>我的网页</title></head><body> 这是我的个人网页</body&原创 2021-09-12 20:29:18 · 2025 阅读 · 0 评论 -
零基础HTML教程(9)--p标签:为你写诗
本文目录1.何为段落2. HTML中的段落3. 小结1.何为段落段落者,英文名paragraph也,表示问文章的一个分段。一般来说,每个分段的最前面是要缩进2个字符的,同时不同的分段之间会换行。2. HTML中的段落如果你以为HTML会使用<paragraph>作为段落的标签,那你就太天真了。因为paragraph这个单词实在是有点长,太难记了,所以我严重的怀疑HTML创立者因为这个原因,将其简化为了<p>标签。所以HTML中,使用<p>标签来描述一个段落。原创 2021-09-15 19:44:20 · 2351 阅读 · 1 评论 -
零基础HTML教程(10)--h标签:标题要起好
本文目录1. 标题的作用2. 如何编写HTML标题3. 标题大小对比4. 小结1. 标题的作用很多东西都得有标题、题目。诗歌要有个题目,传达中心含义。书本要有个题目,揭示书籍内容。网页也需要有标题,概括网页的内容。需要注意的是,本篇内容讲述的标题不是网页头部的<ttile>标题,而是网页<body>内容区域里面的标题。从英文来讲,比较好区分,网页头部标题是title,而内容区域的标题是heading。2. 如何编写HTML标题HTML的标题有6个级别,对应标签分别是&l原创 2021-09-13 21:45:58 · 2262 阅读 · 0 评论 -
零基础HTML教程(11)--寻找最炫的编辑器
本文目录1. 编辑器2. 编辑器是干啥的3. VSCode编辑器的特长4. VSCode下载与安装5. VSCode安装6. 小结1. 编辑器在之前的章节中,我们一直使用最原始的记事本进行代码的编辑。然后将文件拓展名修改为.html后,通过浏览器进行查看。随着我们学习的标签种类越来越多,大家可能已经发现了,用记事本写一段网页代码是非常费劲的。所以本篇,我们就来给大家介绍一款超好用的代码编辑器,也是当前前端开发领域最流行的编辑器——VSCode。2. 编辑器是干啥的注意,如果是同样的一段代码,使用原创 2021-09-18 18:50:08 · 960 阅读 · 0 评论 -
零基础HTML教程(12)--VSCode小试牛刀
本文目录1. 前言2. 界面修改为中文3. 管理项目文件夹4. 添加文件夹5. 添加网页文件6. 编辑文件7. 代码格式化8. 代码格式化说明9. 预览网页10. 快速预览网页11. 小结1. 前言VSCode虽然是一个代码编辑器,没有从本质上改变编写代码的含义。但是VSCode的使用还是比较复杂的,为啥复杂呢,因为它提供了各式各样的功能,功能多,自然就复杂了。所以还是要给各位新同学介绍下VSCode的基本用法,便于大家快速的上手操作。2. 界面修改为中文首先就是要将默认的英文界面,修改为熟悉的中原创 2021-09-22 08:57:40 · 3839 阅读 · 0 评论 -
零基础HTML教程(13)--霸道的div与和气的span
本文目录1. 块级元素2. 行级元素3. div标签4. span标签5. 小结1. 块级元素上一篇我们讲了<p>标签,它表示一个段落,在该便签后面会自动换行。所以<p>标签是一个块级元素,它独自形成一块,跟后面的内容不会出现在同一行。2. 行级元素行级元素也可以称之为内联元素,就是在行的内部进行连接。所以行级元素是可以共同出现在同一行的,行级元素之后并不会换行。3. div标签<div>标签是一个标准的块级元素,它的效果跟<p>标签类似,都会将原创 2021-09-16 22:47:27 · 1000 阅读 · 0 评论 -
零基础HTML教程(14)--hr:黄昏的地平线
本文目录1. 水平线的概念2. 水平线的用法3. 小结1. 水平线的概念HTML中有一个比较特别的标签,叫做水平线,写作<hr>。该标签可以在网页上显示一条横线,一般用来分隔不同的网页内容。2. 水平线的用法使用方法很简单,在需要分割的地方,添加一个<hr>标签即可。例如:<!DOCTYPE html><html><head> <title>水平线实例</title> <meta c原创 2021-09-22 20:49:05 · 10759 阅读 · 0 评论 -
零基础HTML教程(15)--br标签:换行,重新开始
本文目录1. 前言2. 换行标签br3. 标签的闭合问题4. 小结1. 前言我们之前学习过段落标签<p>,该标签中间的内容会形成一个段落,不同的段落之间会有换行的效果。我们也可以直接使用换行标签<br>,该标签的作用就是生成一个换行。2. 换行标签br比如我们想写一首诗,让诗歌的每一句都独占一行,此时我们可以用<p>标签如下实现: <p> 假如生活欺骗了你 </p> <p>原创 2021-10-08 15:13:55 · 10957 阅读 · 0 评论 -
零基础HTML教程(16)--聊聊元素与标签
了解元素、标签、双标签、单标签即可。原创 2023-03-03 14:40:56 · 810 阅读 · 3 评论 -
零基础HTML教程(17)--让HTML结构更舒适
本文目录1. 注释2. 程序注释3. HTML注释4. 注释的作用5. 小结1. 注释几乎所有的语言都有注释,例如我本人学习过的C/C++/OC/C#/Java/Python/HTML/CSS/JavaScript/SQL,这些语言都提供了注释功能。可见注释是非常重要的。那么什么是注释呢,在我们学习古代文言文或者诗词的过程中,可能已经多次接触过注释这个词了,它一般是对原文的字句进行进一步的解释。也就是说,注释其实不属于原文,它是额外增加的解释部分,用途是方便阅读者对原文理解。2. 程序注释那么原创 2021-09-24 22:15:49 · 1051 阅读 · 0 评论 -
零基础HTML教程(18)--图像
本文目录1. 前言2. 显示一张图片3. 图片的可替换文本4. 将图片放入文件夹5. 小结与拓展1. 前言图像标签是<img>,作用是在网页上显示图片。2. 显示一张图片图片没法用文字描述,很难把图片放到img标签的内容部分。但是图片一般是一个文件,我们可以通过源属性,将图片显示到img标签中。首先将图片文件1.jpg和我们的网页hello.html放到一个文件下,然后编写代码如下:<!DOCTYPE html><html><head>原创 2021-09-28 09:55:12 · 1907 阅读 · 0 评论 -
零基础HTML教程(19)--聊聊属性与内容
本文目录1. 前言2. 标签的内容3. 标签的属性4. 标签的格式5. 小结1. 前言都说了,HTML是超文本传输语言,之前讲述的内容还都在文本范围内,马上就要讲到一个超出文本的标签了——图像。但在讲述图像标签的使用之前,我们先来了解下内容和属性的区别。2. 标签的内容内容是比较好理解的,就是标签中间包裹的部分,例如<h1>我的博客</h1>,中间的我的博客就是h1标签的内容。内容是直接显示到网页上的东西,所以我的博客会在网页上直接显示。3. 标签的属性但是还有一种情原创 2021-09-28 09:24:03 · 861 阅读 · 2 评论 -
零基础HTML教程(20)–超级链接:老子就是王牌
本文目录1. 前言2. 跳转指定网址页面3. 跳转当前网站其他网页4. 在新窗口中打开网页5. 小结1. 前言超级链接是HTML中极其精彩的设计。网页之所以让人感觉功能无限,丰富多彩,就在于网页上的超级链接,当我们点击超级链接时,可以跳转到一个新的页面,查看该链接对应的内容。在一层一层的链接中,网站的内容得到极大的延展,用户也得以从互联网上获取海联的信息。本篇我们就来讲解下超级链接的使用。2. 跳转指定网址页面可以使用超级链接跳转指定网址的页面,例如下面的例子会跳转到百度:<a hre原创 2021-09-29 21:00:08 · 3158 阅读 · 0 评论 -
零基础HTML教程(21)--列表:我们有我们自己圈子
本文目录1. 列表的概念2. 无序列表3. 有序列表4. 小结1. 列表的概念一个元素其实就是一个,那么多个元素就可以组合为列表。既然叫列表,那么列表的元素一般是垂直排列的,所以才叫列表。2. 无序列表无序列表应用于列表的元素没有先后顺序的场景,例如我的爱好有:篮球、足球、乒乓球,这三者没啥先后顺序,则可以使用无序列表表示。无序列表的标签为<ul>,列表中的每个元素标签为<li>,所以上面的例子代码为: <span>我的爱好:</span>原创 2021-09-29 21:24:59 · 874 阅读 · 3 评论 -
零基础HTML教程(22)--表格:我的重要性毋庸置疑
本文目录1. 前言2. 表格标签3. 表格的行与列4. 页眉5. 页脚6. 小结1. 前言表格有多重要我就不需要赘述了吧,我们日常访问的网页处处都有表格,所以表格是非常非常重要的HTML元素。本篇我们就来简单介绍下表格的用法。2. 表格标签我们可以使用<table>标签来定义一个表格,然后使用border属性来设定表格边框的宽度,如下。注意此时表格里面还没有内容,所以网页也显示不出什么东西来。 <table border="1"> </table>原创 2021-10-08 15:50:41 · 1553 阅读 · 0 评论 -
零基础HTML教程(23)--表单
本文目录1. 前言2. 表单标签3. 表单输入标签3.1 文本框3.2 密码框3.3 单选框3.4 复选框3.5 按钮4. 小结1. 前言之前我们所讲的一些系列各种HTML标签,都是为了给用户展示一些东西。实际上HTML是可以让用户输入信息的,例如登录时输入用户名密码;购买东西时选择型号、颜色;发布博客时输入标题、内容。HTML通过表单及输入标签,来实现用户输入内容的收集。2. 表单标签表单标签,格式为<form>表单内容</form>,中间的表单内容部分就是用来让用户输原创 2021-10-08 20:35:44 · 2073 阅读 · 0 评论 -
零基础HTML教程(24)--表单输入元素
表单元素介绍原创 2022-03-18 11:09:10 · 3058 阅读 · 0 评论 -
零基础HTML教程(25)--其他表单元素
本文目录1. 背景2. 开发流程2.1 网站功能设计2.2 建立网站目录结构2.3 开发首页2.2 生平简介页2.3 经典诗词页2.4 苏轼图集页2.5 留言板3. 小结1. 背景通过前面22篇文章的学习,我们对HTML有了一个比较全面的了解。本篇,我们编写一个网站实例,来看看通过已经掌握的HTML知识,能开发出什么样子的网站。2. 开发流程2.1 网站功能设计我们打算开发一个介绍苏轼的网站,没错,就是那个鼎鼎有名的大文人苏轼,网站我们就起名为【苏轼网】。我们打算设计如下网页:首页:展示网原创 2021-10-09 15:23:28 · 1753 阅读 · 7 评论 -
零基础HTML教程(26)--表单元素标注
仔细观察,姓名、手机号、年龄其实都是表单元素的说明,如果我们给他们加上个标签,会有意想不到的好处。例如,视障人士专用浏览器,如果知道这几个文字是表单元素的说明,那么可以把这些文字阅读出来。注意:当鼠标单击“姓名”的时候,焦点会自动移动到第一个输入框之内,这就是标注的一个功能。name往往是给表单元素起名用的,主要是将表单提交给后端时,区分表单元素提交内容。好吧,其实HTML中有这样的元素,他就是——表单元素标注,也就是。但是还差点意思,就是标注跟表单元素没有明确的对应关系。用起来没啥问题,但是还不够完美。原创 2024-04-25 18:00:00 · 995 阅读 · 2 评论 -
零基础HTML教程(27)--表单元素属性
readonly属性将元素设置为只读,不能输入内容。跟disabled相比,readonly并不会让元素变为灰色。disabled属性表示禁用该元素,注意奇怪的是,只要写上这个属性(不论值如何),元素就会被禁用。上一篇我们讲了表单元素的两个属性id和name,其实表单元素还有其他几个常用属性,我们逐一介绍。checked应用于单选框、复选框、下拉菜单元素,表示某个选项被选中。maxlength属性值是一个数字,用来设置元素最多可以输入多少字符。禁用元素后,元素变为灰色,且不可输入内容。原创 2024-04-25 19:15:00 · 479 阅读 · 0 评论 -
零基础HTML教程(28)--meta标签常见用法
其实meta还挺好玩,它的意思是超越,元宇宙英文Metaverse,就是meta(超越)+universe(宇宙)的结合。上面代码的意思是:将网页的宽度(width)设置为设备宽度(device-width),并设置初始缩放比例为1.0。meta有时候并不影响网页的使用,但是用上他更好,特别是涉及比较特殊的使用场景(例如手机、平板)。这个主要是为了兼容移动端浏览器使用的设置。但是在网页中,它没这么神,只是用来给整个网页提供一些配置信息。还有一个比较常见的用法,就是设置网页的视点信息。原创 2024-04-25 19:30:00 · 357 阅读 · 0 评论 -
零基础HTML教程(29)--转义字符
哈哈,这时候多少有点束手无策了,此时就要用到转义字符。同志们有没有想过一个问题,在HTML中,大于号。但是如果咱真的就是想显示一个大于、小于号呢?结尾,中间的英文表示内容,例如lg就是小于。更多转义字符,搜索引擎查询即可。在HTML中会显示一个小于号。原创 2024-04-25 19:45:00 · 346 阅读 · 0 评论 -
零基础HTML教程(30)--迈入HTML5新时代
电脑的话,如果是特别老的浏览器,例如IE8,它对H5支持是比较差的,好在现在大家用IE的很少了,当前主流的Chrome、Edge、FireFox、360、搜狗、QQ浏览器等等,对H5的支持都没问题。这个我还是建议大家写上,但是看很多大神的代码,好像也有很多不写的,我多少也有点拿不准了,大家各凭喜好吧。所以从本篇开始,我们讲一下H5新增的内容,先来介绍下H5时代的特点吧。这两种写法,效果相同。之前讲的29篇HTML教程,内容基本都是H4时代就有的。随着时代的发展,H4多少有点不够用,所以H5来了。原创 2024-04-26 17:30:00 · 388 阅读 · 0 评论 -
零基础HTML教程(31)--HTML5多媒体
浏览器也是先尝试播放hello.mp4,然后尝试播放hello.ogg,如果都不行则显示文字。上述代码,浏览器如果支持ogg音频文件,则会播放hello.ogg。建议尽量多放几种格式的音频文件,因为不同浏览器对音频文件的支持不同。如果ogg不支持的话,就继续看是否支持mp3音频文件,支持则播放。在H5之前,我们要在网页上播放音频、视频,需要借助第三方插件。如果mp3也不支持,则会显示“您的浏览器不支持播放音频”。controls属性如果存在,则显示控制按钮,如播放键。loop属性如果存在,则循环播放。原创 2024-04-26 17:45:00 · 588 阅读 · 0 评论 -
零基础HTML教程(32)--HTML5语义化标签
我个人建议是,把这些语义化标签用到网页的主框架上,也就是说大结构上。例如内容区域就用main表示,main里面再分几个大区域的话用section,如果section里面再细分就可以用div了。例如header你既可以放网页的标题栏,也可以让它作为网页一个新闻模块的标题。但是需要注意的是,注释只能给程序员自己看,对于浏览器、搜索引擎而言,他们还是不知道你这个分组是干啥的。总结来说,不用语义化标签,网页也能正常显示,但是用了语义化标签,网页会更完美。这么说吧,那时候div就是网页的骨架,支撑着网页的主结构。原创 2024-05-11 20:00:00 · 515 阅读 · 1 评论 -
零基础HTML教程(33)--HTML5表单新功能
HTML5确实也这么做了,提供了更多细分种类的表单元素,但是不好意思,目前PC端浏览器支持并不算很好,倒是手机端支持的都挺棒的。可喜可贺的是,当前浏览器给range元素单独做了样式,可惜的是竟然看不到当前选中的值,这个还得需要后续学习JS等技术后再完善它的功能。效果如下,我们可以轻易的选择任意的颜色,而且选中值还会形象的显示到选择框中,当前浏览器对它的支持堪称完美。效果分别如下,支持的都很好,看来日期时间很重要,浏览器迅速推出支持,可喜可贺。效果如下,说实话还是第一个普通文本框,浏览器的支持还是没跟上。原创 2024-05-18 13:22:31 · 1175 阅读 · 0 评论 -
零基础HTML教程(34)--HTML综合实例
DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title > 生平简介 </ title > </ head > < body > <!-- 头部 --> < header > < h1 > 苏轼网 </ h1 > </ header > <!原创 2024-05-18 14:03:48 · 841 阅读 · 0 评论 -
零基础HTML教程(35)--网站的本地部署
这里首先要区分服务器、服务器软件这两个概念。服务器一般我们指的是性能比较强的电脑,这种电脑我们个人拿来用有点浪费,因为挺贵的,起步也得一两万一台。它是用来运行我们的网站的,可以供成千上万(甚至几十万、几百万)的用户同时访问。服务器软件,则是服务器上安装的各种软件,以我们网站部署所用软件为例,精准的说应该是web服务器软件,它的作用就是把网站传播出去。做个对比,广播大家都听过,广播的作用是把声音传播出去,那么web服务器软件的作用,就是把网站传播出去。原创 2024-05-20 18:30:00 · 1597 阅读 · 0 评论 -
零基础HTML教程(36)--网站的远程服务器部署
之前我所在的公司,由于存在很大比例的客户,他们的技术人员只会使用Windows,所以我们公司的服务器基本都是使用的Windows Server操作系统。存储这块真的是很多企业容易忽略的点,我见过很多客户的服务器,价格很贵,CPU和内存都强的夸张,但是运行网站慢吞吞,就是因为数据盘性能很差。这个地方关键点是带宽,根据我多年使用阿里云的经验,此处要想获得比较流畅的体验,最好选择4M及以上的带宽值。选择网络,直接使用默认就行,阿里云的网络其实是虚拟的,所以比我们一般通过一根网线接入网络要安全稳定的多。原创 2024-05-27 13:45:00 · 555 阅读 · 0 评论