HTML 零基础入门：从概念到常用标签详解，前端入门超详细版

一、HTML介绍HTML全称超文本标记语言HyperText Markup Language是搭建网页的基础骨架语言也是前端开发最入门、最核心的语言。它不属于编程语言没有逻辑运算、没有变量只是一套标记标签用来给网页内容划分结构告诉浏览器哪里是标题、段落、图片、按钮、链接等内容。二、工具介绍学习一门语言就要有好用的工具VScode就是我们现阶段最好用的工具先来介绍一下它的简单使用吧常用快捷键1、生成页面骨架结构输入!英文版再按下Tab即可后面的标签介绍中有对骨架结构的介绍2、保存文件CtrlS注意这个很重要每写完一次想看效果就要进行一次保存否则无法在浏览器看到效果3、放大和缩小整个编辑页面Ctrl /-Ctrl加上键就会放大加上-键就会缩小4、添加多个光标CtrlAlt下箭头上箭头就会从这样变成这样5、选择多个相同的单词CtrlD先双击选定一个单词按下ctrlD 可以往下依次选择相同单词可以同时进行修改6、快速定位到某一行CtrlG上方就会出现输入行号即可好用的插件1、英文转中文插件Chinese现在我们的VSCode编辑页面的功能显示都是英文不太好看一个插件即可解决2、一键在浏览器中打开当前文件插件open in browser操作方式右键点击当前文件 →Open In Default Browser在默认浏览器打开该文件/Open In Other Browser在其他浏览器打开该文件但是这个需要在更改代码之后点击网页左上角的才能刷新看效果的所以有了下面这个插件3、实时刷新插件Live Server操作方式右键点击当前文件 →Open with Live Server只要你保存在网页端就能看到更改后的效果以上插件可在VSCode的左边栏的的搜索及下载三、标签特点1、标签都是包括在尖括号里的。2、基本都是成对存在的开始和结束结束标签要在最前面加一个/比如html/html。3、也有单标签比如br /。4、标签关系只是一种使用时候的关系不是标签必须要这样写1包含关系像父子关系如head和tltle的关系head title/title /head2并列关系如title和body关系head title/title body/body /head四、常用标签介绍1、骨架结构介绍!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body /body /html!DOCTYPE是文档类型声明作用就是告诉浏览器使用哪种 HTML 版本来显示网页不是标签。lang 是用来定义当前文档显示的语言。en 定义语言为英文zh-CN 定义语言为中文。title/title中是用来写网页的标题的可以更改。egtitleHTML学习/title网页标题效果2、HTML常用基本结构标签3、标题标签h1/h1到h6/h6文字会加粗加大大小依次递减。body h1我是一级标题/h1 h2我是二级标题/h2 h3我是三级标题/h3 h4我是四级标题/h4 h5我是五级标题/h5 h6我是六级标题/h6 /body效果4、段落标签p/p一段一对。文本在一个段落中会根据浏览器窗口的大小自动换行段落和段落之间会有空隙。body p你好呀亲爱的朋友/p P别怕那些看似翻不过的高山每一步跋涉都是在雕刻你向上的痕迹。/P /body效果5、换行标签br / 是个单标签。只是简单地开始新的一行不会跟前面的内容有行间距跟段落不一样段落之间会插入一些垂直的间距。body p你好呀br /亲爱的朋友/p p前路浩浩荡荡万事尽可期待/p /body效果6、文本格式化标签为文字设置粗体、斜体等文字效果。body 我是strong加粗/strong的文字 我是em倾斜/em的文字 我是del删除线/del的文字 我是ins下划线/ins的文字 /body效果7、div和span标签div/div和span/span是盒子用来装内容。div是division的缩写表示分割、分区独占一行。span表示跨度好多个在一行。body div我是div标签我一个人独占一行/div span百度/span span新浪/span span搜狐/span /body效果8、图像标签及其路径1图像标签img src图片的地址 alt /src必须写属性及其说明注意1 写在img src /里面img的后面2 属性之间不分先后顺序标签名和属性属性于属性之间均以空格分开3 格式类似于键值对形式即属性属性值2地址路径的写法1 相对路径以引用文件所在位置为参考基础而建立出的目录路径。简单来说就是图片相对于 HTML 页面的位置。种类同一级路径下一级路径上一级路径2绝对路径是指目录下的绝对位置直接到达目标位置通常是从盘符开始的路径。例如D:\web\img\logo.jpg 或完整的网络地址 http://www.xxx.com/imges/logo.jpg注意绝对路径是\9、超链接标签a href跳转目标 target目标窗口的弹出方式文本或图像/a两个属性的作用href中url地址即链接地址类别1外部链接例如a hrefhttp://www.baidu.com百度/a 。2内部链接网站内部页面之间的相互链接直接链接内部页面名称即可例如 a hrefindex首页/a路径与上面img的路径类别相同。3空链接如果当时没有确定链接目标时a href#首页/a。4下载链接如果href里面地址是一个文件或者压缩包会下载这个文件。5网页元素链接在网页中的各种网页元素如文本、图像、表格、音频、视频等都可以添加超链接。body h41、链接外部网站/h4 a hrefhttps://www.baidu.com target_blank百度/a h42、内部链接/h4 a hrefindex.html target_blank首页/a h43、空链接/h4 a href# target_blank公司地址/a h44、下载链接/h4 a href2.1.zip target_blank下载文件/a h45、网页元素的链接/h4 a hrefhttp://www.baidu.comimg srcimages/3.1.jpg //a /body6锚点链接点击链接可以快速定位到页面中某个位置在链接文本的href属性中设置属性值为#名字的形式如a href#two第二/a找到目标位置标签里面添加一个id属性 刚才的名字如h4 idtwo第二的标题/h4类似于点击目录则跳转到目录对应的位置a href#one第一集/a pa href#two第二集/a/p a href#three第三集/a pa href#four第四集/a/p a href#five第五集/a pa href#six第六集/a/p h3 idone第一集介绍/h3 p第一集讲述了期中考试后的晚自习教室里只剩笔尖划过纸张的声响林星在翻找课本时意外触碰到桌底暗格。指尖触到冰凉金属的瞬间教室灯光骤然熄灭她握着的老旧怀表指针开始疯狂倒转表盘上刻着的 “星落学院” 校徽在黑暗中泛着幽幽微光。/p h3 idtwo第二集介绍/h3 p第二集讲述了循着怀表的指引林星推开了教学楼后常年上锁的旧图书馆大门。布满灰尘的书架间一本烫金封面的《星象笔记》自动翻开扉页上写着她的名字而笔记里的预言正和她最近反复做的梦境一一对应。管理员老人看见怀表的瞬间眼神里写满了震惊与不安。 /p h3 idthree第三集介绍/h3 p第三集讲述了趁着深夜林星带着怀表潜入图书馆。在顶层的占星室里她启动了笔记中的法阵怀表指针开始稳定转动窗外的星空竟随着表盘变化。当指针指向十二点玻璃穹顶映出她的倒影 —— 那是一百年前与她容貌完全相同的星象师正对着星空喃喃低语。/p h3 idfour第四集介绍/h3 p第四集讲述了正当林星沉浸在震惊中时广播里传来校长的紧急通知“旧图书馆将在三日内拆除请所有人员撤离。” 同时她收到一条匿名短信“交出怀表否则会被永远困在时间里。” 然而笔记里关于 “星象师的宿命” 的记载让她无法停下探寻真相的脚步。/p h3 idfive第五集介绍/h3 p第五集讲述了随着调查深入林星终于揭开真相一百年前的星象师正是她的前世因预言学院将遭遇危机而被封印记忆怀表是打破时间循环的钥匙。如今当年被预言的危机即将重现而她是唯一能阻止这一切的人。在天文社社长的帮助下她找到了启动最终法阵的星盘。/p h3 idsix第六集介绍/h3 p第六集讲述了在旧图书馆拆除的前一晚林星启动了最终法阵。怀表指针停止转动星空恢复正常消失的百年预言被彻底改写。危机解除后她没有选择改变过去而是将怀表放回了桌底暗格。毕业那天她再次推开旧图书馆的门阳光透过玻璃穹顶洒下这里成了她永远的秘密。/p /body10、注释和特殊字符1注释以!--开头以--结束快捷键ctrl/eg2特殊字符重点记住空格、大于号、小于号这三个其余的使用很少如果需要回头查阅即可。11、表格标签1表格标签基本语法table tr td单元格内的文字/td ... /tr ... /tabletable/table是用于定义表格的标签。tr/tr标签用于定义表格中的行必须嵌套在table/table标签中。td/td用于定义表格中的单元格必须嵌套在tr/tr标签中。字母td指表格数据table data即数据单元格的内容。2表头单元格标签一般表头单元格位于表格的第一行或第一列表头单元格里面的文本内容加粗居中显示。th标签自带默认样式文本加粗且居中用于定义表格的表头单元格。它必须嵌套在tr标签中用法和td类似但语义和样式更适合做表头。3表格属性注意这些属性要写的表格标签table里面去 table align”” border”” cellpadding”” cellspacing”” width””cellpadding字与小单元格边框之间的距离cellspacing两个小单元格之间的距离body table aligncenter border1 cellpadding12 cellspacing0 width400 tr th植物名称/th td玫瑰/td /tr tr th科属/th td蔷薇科/td /tr tr th生长习性/th td喜阳光耐寒/td /tr /table /body效果4表格结构标签thead/thead用于定义表格的头部。thead内部必须拥有tr标签一般位于表格的第一行。tbody/tbody用于定义表格的主体主要用于放置数据本体。以上标签都必须嵌套在 table/table 标签中。body table aligncenter border1 cellpadding2 cellspacing0 thead tr th排名/th th关键词/th th趋势/th th今日搜索/th th最近七日/th th相关链接/th /tr /thead tbody tr td1/td td鬼吹灯/td tdimg srcimages/down.jpg //td td345/td td123/td tda hrefhttps://tieba.baidu.com/index.html target_blank贴吧/a a href# target_blank图片/a a hrefhttps://baike.baidu.com/ target_blank百科/a /td /tr tr td2/td td盗墓笔记/td tdimg srcimages/down.jpg //td td124/td td657432/td tda hrefhttps://tieba.baidu.com/index.html target_blank贴吧/a a href# target_blank图片/a a hrefhttps://baike.baidu.com/ target_blank百科/a /td /tr /tbody /table /body效果5合并单元格合并单元格方式跨行合并rowspan合并单元格的个数跨列合并colspan合并单元格的个数步骤1 先确定是跨行还是跨列合并。2 找到目标单元格写上合并方式 合并的单元格数量。比如td colspan2/td。3 删除多余的单元格。body table border1 width300 tr td数据1/td td数据2/td /tr tr td rowspan2跨行合并/td td数据3/td /tr tr !-- 被合并的单元格要删掉所以这里只有1个td -- td数据4/td /tr /table /body效果12、列表标签1无序列表ul标签表示 HTML 页面中的无序列表一般以项目符号呈现列表项列表项使用li标签定义。基本语法ul li列表项1/li li列表项2/li li列表项3/li ... /ul列表项之间没有顺序级别之分彼此是并列关系。ul中只能直接嵌套li标签直接在ul内输入其他标签或文字是不规范的写法。li与/li之间相当于一个容器可以容纳文本、图片、链接等所有 HTML 元素。body h4你喜欢吃什么水果/h4 ul li西瓜/li li草莓/li li橙子/li li我喜欢很多水果br /苹果蓝莓樱桃荔枝芒果/li /ul /body效果2有序列表有序列表是带有排列顺序的列表列表项会按一定顺序排列。ol标签用于定义有序列表默认以数字显示序号。li标签用于定义列表项。基本语法ol li列表项1/li li列表项2/li li列表项3/li ... /olol中只能直接嵌套li标签直接在ol内输入其他标签或文字是不被允许的。li与/li之间相当于一个容器可以容纳文本、图片、链接等所有 HTML 元素。body h3今日热点/h3 ol li今天是个好天气/li li今天是阴天/li li诸事顺意br /平安喜乐/li /ol /body效果3自定义列表在 HTML 中dl标签用于定义描述列表定义列表需要与dt定义项目 / 名词和dd描述项目的内容配合使用。基本语法dl dt名词1/dt dd名词1解释1/dd dd名词1解释2/dd /dldl标签内部只能包含dt和dd两种标签不能直接放其他标签或文字。dt和dd的数量没有限制常见用法是一个dt对应多个dd用来对同一个名词进行多维度解释。body dl dt关注我们/dt dd新浪微博/dd dd官方微信/dd dd联系我们/dd /dl /body效果13、表单标签组成部件一个完整的表单由表单域表单控件提示信息组成如表单域表单域是包含表单元素的区域由form标签定义作用是收集和传递用户信息并将范围内的表单数据提交给服务器。基本语法form actionurl地址 method提交方式 name表单域名称 各种表单元素控件 /form常用属性详解提交方式后面深入学习会遇到不用纠结这些属性可写可不写之后我们学习的所有的表单控件如输入框、按钮、单选框等都必须放在form标签内部否则数据无法被收集和提交。表单控件1input表单元素标签input是 HTML 表单中用于收集用户信息的核心标签是单标签其核心属性是type不同的type值会决定控件的具体类型。基本语法input type属性值 /type常用属性值种类除type外input还有很多其他属性注意当type属性为radio选项有相同的名字(name)才可以实现多选一value是初始状态可以显示在input框里的字Checked默认打开时就是被选中的单选框和复选框可以设置写入checked”checked”同一组的单选按钮radio和复选框checkbox必须设置相同的name值这样后台才能将它们识别为同一组选项name是返回服务器的值表示该框的名字body form actionxx.php methodget !-- text:文本框 用户可以在里面输入任何文字 -- p用户名称input typetext value请输入用户名 nameusername maxlength6/p !-- password:密码框 用户看不见输入的密码 -- p密码input typepassword namepsd/p !-- radio: 单选按钮 可以实现多选一 -- !-- name: 是表单元素名字 这里性别单选按钮必须有相同的名字才能实现多选 -- !-- checked: 单选框和多选框可以设置打开页面时默认选上了 -- P性别: input typeradio namesex value女 checkedchecked女 input typeradio namesex value男男/P !-- checkbox: 复选框 可以实现多选多 -- p爱好: input typecheckbox namehobby value睡觉睡觉 input typecheckbox namehobby value看手机看手机 input typecheckbox namehobby value吃饭吃饭/p P上传头像input typefile/P Pinput typesubmit value 注册 /P pinput typereset value 重新填写 /p pinput typebutton value获取短信验证码/p /form /body效果2label标签label标签用于为表单元素定义标注通过绑定表单元素来提升用户体验点击label内的文本时浏览器会自动将焦点 / 选择状态关联到对应的表单元素上。绑定方式通过for属性与表单元素的id属性建立关联。label的for属性值必须与目标表单元素的id属性值完全一致。label forsex男/label input typeradio namesex idsex /点击男即可选中radio框扩大表单元素的点击范围尤其适合单选按钮、复选框等控件。3select下拉标签在页面中如果有多个选项让用户选择并且想要节约页面空间时我们可以使用select标签控件定义下拉列表。基本语法select option选项1/option option选项2/option option选项3/option ... /select规则select标签中至少要包含一对option标签。在option标签中添加selectedselected属性时当前选项即为默认选中项。body form 籍贯 select option上海/option option北京/option option南京/option option山西/option option selectedselected云南/option option天津/option /select /form /body效果4textarea文本域元素相当于特大号文本框当用户需要输入内容较多的文本时无法使用单行文本框此时可以使用textarea标签支持输入大量文字常见于留言板、评论区等场景。基本语法textarea rows3 cols20 文本内容 /textarea规则通过textarea标签可以创建多行文本输入框。cols属性定义每行字符数rows属性定义显示的行数在实际开发中通常使用 CSS 来控制其大小而非直接使用这两个属性。body form 留言板 textarea row2 cols20欢迎你的留言/textarea /form /body效果14、水平线标签hr一个单标签body 创建水平线 hr /body效果五、总结上面就是一些常用的HTML标签需要我们学会记住并灵活运用下面是总结的一个HTML思维导图也是很详细还补充了一些不常用的标签和一些应用可以用于学习和复习通过网盘分享的文件HTML思维导图链接: https://pan.baidu.com/s/1nWUefJkYWELr-lwQgDGpaw?pwdiq8t 提取码: iq8t以上是本人学习并总结的一些知识点如果能帮助大家是我的荣幸欢迎大家指出错误、补充遗漏一起交流进步。