云端源想云端源想it培训，帮你轻松拿offer”
嗨~大家好，我是学长
今天的你过得还好吗？
- 2023.03.03 -
一、HTML是什么？
HTML ，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是用来描述网页的一种语言， 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
二、尝试创建一个HTML文件并运行
第一步， 很简单，鼠标右击就可新建一个文本文档，
然后我们将文件类型修改为.html文件。
第二步, 打开文档开始写代码。
第三步, 使用浏览器打开就运行成功了
前端代码的运行环境就是浏览器, 前端中浏览器就相当于Java中JVM这样的角色, 浏览器可以解析html, css, js等代码中的内容, 根据代码去构造前端页面。
在浏览器中按F12会出现一个控制台, 这个就是用来查看web页面的控制台, 可以用来查看网页中的源码与运行时的输出结果, 调试你写的前端代码。
先点击下面图中所指的按钮再指向浏览器的某一页面元素, 就能自动跳到该处的源码部分。
怎么样，是不是觉得很简单，那么，你学“废”了吗？是眼睛会了还是跟着动手尝试一下呢，小编相信大家都是动手操作了一番的。
三、HTML的基本结构
html的代码结构有如下特点:
1.html代码是通过标签来组织的, 形如用尖括号组织成对出现的这个东西就是 “标签(tag)”, 也可以叫做 “元素(element)”。
2. 一个标签通常是成对出现的, 比如是开始标签, 结束标签, 中间放的是标签的内容； 少数标签是可以只有一个开始标签的, 即单标签。
3.标签是可以嵌套的, 一个标签的内容可以是其他一个或者多个标签, 此时这些标签就构成了一个 “树形结构”, 标签具有后代关系或者兄弟关系。
4.可以在开始标签中给标签赋予属性(Attribute), 属性可以有一个或者多个。
四、HTML的基本标签
1.HTML标签
整个网页是从这里开始的，然后到结束。
2.head标签
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
定义网页的标题</li><li data-track="358"><meta> 定义网页的基本信息（供搜索引擎）</li><li data-track="359"><style> 定义CSS样式</li><li data-track="360"><link> 链接外部CSS文件或脚本文件</li><li data-track="361"><script> 定义脚本语言</li><li data-track="362"><base> 定义页面所有链接的基础定位（用得很少）</li><li data-track="363"><head>的内部标签也非常重要，在前期大家只需要感性认知就可以。</li></ul><p data-track="364" class="syl-page-br" style><br></p><p data-track="365"><strong>3.body标签</strong></p><p data-track="366">body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。</p><p data-track="367" class="syl-page-br" style><br></p><p data-track="368"><strong>(1)段落与文字</strong></p><ul><li data-track="369"><h1><h1>~<h6><h6> 标题（header）</li><li data-track="370"><p> 段落（paragraph）</li><li data-track="371"><br> 换行（break）</li><li data-track="372"><hr> 水平线（horizontal rule）</li><li data-track="373"><div> 分割 [块元素]（divsion）</li><li data-track="374"><span> 区域[行内元素]（span）</li></ul><p data-track="375"><strong>块元素：<h1>~<h6>,p,hr,div</strong></p><p data-track="376">特点：</p><ul><li data-track="377">独占一行，排斥其他元素与其同一行，包括块元素与行内元素。</li><li data-track="378">块元素内部可以容纳其他块元素或行元素。</li></ul><p data-track="379"><strong>行内元素：<strong>,<em>,<span></strong></p><p data-track="380">特点：</p><ul><li data-track="381">可以与其他行内元素同一行。</li><li data-track="382">行内内部可以容纳其他行内元素，但不可以容纳块元素。</li></ul><p data-track="383"><strong>标签分类：</strong></p><ul><li data-track="384">一般标签：有开始符号和结束符号（有始有终） <body><body></li><li data-track="385">自闭合标签：只有开始符号没有结束符号<br/></li></ul><p data-track="386" class="syl-page-br" style><br></p><p data-track="387"><strong>(2)文本格式化标签</strong></p><ul><li data-track="388"><strong>加粗</strong></li><li data-track="389"><strong> 字体加粗</li><li data-track="390"><b></b>加粗</li><li data-track="391"><i></i>斜体</li><li data-track="392"><u></u> 下划线</li><li data-track="393"><sup></sup>上标</li><li data-track="394"><sub></sub>下标</li><li data-track="395"><del></del> 删除线</li><li data-track="396"><font></font> 规定字体属性</li><li data-track="397"><pre></pre>代码样式原样输出</li><li data-track="398">cite 引用</li></ul><p data-track="399" class="syl-page-br" style><br></p><p data-track="400"><strong>(3)图片、音频、视频标签</strong></p><p data-track="401"><strong>img:定义图片</strong></p><ul><li data-track="402">src:规定显示图像的URL（统一资源定位符)</li><li data-track="403">height:定义图像的高度</li><li data-track="404">width:定义图像的宽度</li><li data-track="405">audio:定义音频。支持的音频格式:MP3、WAV、OGG</li></ul><p data-track="406"><strong>src:规定音频的URL</strong></p><ul><li data-track="407">controls:显示摇放控件</li></ul><p data-track="408"><strong>video:定义视频。</strong>支持的音频格式:MP4、WAV、OGG</p><ul><li data-track="409">src:规定视频的URL</li><li data-track="410">controls:显示播放控件</li></ul><p data-track="411"><strong>资源路径：</strong></p><ul><li data-track="412">绝对路径：完整路径</li><li data-track="413">相对路径（更常用）：相对位置关系</li></ul><p data-track="414"><strong>尺寸单位：</strong></p><ul><li data-track="415">px：像素</li><li data-track="416">百分比：占整个body的比例</li></ul><p data-track="417" class="syl-page-br" style><br></p><p class="pgc-h-arrow-right" data-track="418"><strong>(4)超链接标签</strong></p><p data-track="419">< a> ：定义超链接，用于连接到另一个资源</p><p data-track="420">1)href：指定访问资源的URL</p><p data-track="421">2)target:指定打开资源的方式</p><ul><li data-track="422">_self：默认值，在当前页面打开</li><li data-track="423">_blank：在空白页面打开</li></ul><p data-track="424">通常在页面内部跳转使用_self，跳转到外部资源用_blank</p><p class="pgc-h-arrow-right" data-track="425"><strong>(5)列表标签</strong></p><p data-track="426">< ol>：有序列表（标注123…）</p><ul><li data-track="427">序号可以使用type属性设置</li></ul><p data-track="428">< ul>：无序列表（用圆点标识）<br>< li>：定义列表项</p><p data-track="429">今天的分享就到这里了，想学习更多前端知识，记得常来看我！</p><p data-track="431" class="syl-page-br syl-page-br-hide" style><br></p><p style="text-align: center;" data-track="432"><strong>我们下期再见！</strong></p><p data-track="433" class="syl-page-br" style><br></p><p style="text-align: center;" data-track="434"><span style="letter-spacing: 1.5px;">END</span></p><p style="text-align: center;" data-track="436"><span style="letter-spacing: 1.5px;"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">文案编辑|云端学长</span></span></p><p style="text-align: center;" data-track="437"><span style="letter-spacing: 1.5px;"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">文案配图|云端学长</span></span></p><p style="text-align: center;" data-track="438"><span style="letter-spacing: 1.5px;"><span style="color: #000000; --tt-darkmode-color: #A3A3A3;">内容由：云端源想分享</span></span></p><p style="text-align:left" data-track="441" class="syl-page-br syl-page-br-hide"><br></p> <div class="info-share-box clearfix"> <div class="fl"> <p class="tags"><strong>Tags：</strong><a href="http://www.nixiaole.com/tags-156.html" title="查看更多有关于“超链接的html代码”的内容" rel="tag" target="_blank">超链接的html代码</a></p> </div> <div class="fr"> <div class="info-share"> <div class="social-share" data-initialized="true"> <a href="#" class="social-share-icon iconfont icon-weibo"></a> <a href="#" class="social-share-icon iconfont icon-qq"></a> <a href="#" class="social-share-icon iconfont icon-wechat"></a> <a href="#" class="social-share-icon iconfont icon-qzone"></a> </div> </div> <script src="http://www.nixiaole.com/zb_users/theme/txcms2/script/social-share.min.js"></script> </div> </div> </div> <div class="sx mb15"> <ul> <li class="fl">上一篇： <a href="http://www.nixiaole.com/post/3866.html" title="计算机应用层全协议梳理（计算机网络应用层协议心得体会）">计算机应用层全协议梳理（计算机网络应用层协议心得体会）</a> </li> <li class="fr ziyou">下一篇： <a href="http://www.nixiaole.com/post/3868.html" title="「前端」HTML之认识网页（网站的html）">「前端」HTML之认识网页（网站的html）</a> </li> <div class="clear"></div> </ul> </div> <div class="xg"> <h2 class="ybbt">猜你喜欢</h2> <ul> <li><span class="">2025-01-29</span><i class="fa fa-caret-right"></i> <a href="http://www.nixiaole.com/post/3871.html" title="HTML+JS实现图片下载到本地（js 图片另存为）">HTML+JS实现图片下载到本地（js 图片另存为）</a></li> <li><span class="">2025-01-29</span><i class="fa fa-caret-right"></i> <a href="http://www.nixiaole.com/post/3870.html" title="JAVAEE前奏-今天带大家认识HTML!高手勿进。">JAVAEE前奏-今天带大家认识HTML!高手勿进。</a></li> <li><span class="">2025-01-29</span><i class="fa fa-caret-right"></i> <a href="http://www.nixiaole.com/post/3869.html" title="前端基础入门(HTML)（前端零基础入门）">前端基础入门(HTML)（前端零基础入门）</a></li> <li><span class="">2025-01-29</span><i class="fa fa-caret-right"></i> <a href="http://www.nixiaole.com/post/3868.html" title="「前端」HTML之认识网页（网站的html）">「前端」HTML之认识网页（网站的html）</a></li> <li><span class="">2025-01-29</span><i class="fa fa-caret-right"></i> <a href="http://www.nixiaole.com/post/3866.html" title="计算机应用层全协议梳理（计算机网络应用层协议心得体会）">计算机应用层全协议梳理（计算机网络应用层协议心得体会）</a></li> <li><span class="">2025-01-29</span><i class="fa fa-caret-right"></i> <a href="http://www.nixiaole.com/post/3865.html" title="亚马逊差评怎么删?（亚马逊删评原因及应对方法）">亚马逊差评怎么删?（亚马逊删评原因及应对方法）</a></li> <li><span class="">2025-01-29</span><i class="fa fa-caret-right"></i> <a href="http://www.nixiaole.com/post/3864.html" title="HTML学习笔记:各种常用标签（一些常用的html标签）">HTML学习笔记:各种常用标签（一些常用的html标签）</a></li> <li><span class="">2025-01-29</span><i class="fa fa-caret-right"></i> <a href="http://www.nixiaole.com/post/3863.html" title="怎么做网页链接 （怎么做网页链接文章）">怎么做网页链接 （怎么做网页链接文章）</a></li> <li><span class="">2025-01-29</span><i class="fa fa-caret-right"></i> <a href="http://www.nixiaole.com/post/3862.html" title="【干货】一文详解html和css，前端开发需要哪些技术?">【干货】一文详解html和css，前端开发需要哪些技术?</a></li> <li><span class="">2025-01-29</span><i class="fa fa-caret-right"></i> <a href="http://www.nixiaole.com/post/3861.html" title="HTML、CSS、JavaScript及相互关系">HTML、CSS、JavaScript及相互关系</a></li> </ul> </div> </div> </div> <div class="right fr sjwu"> <dl class="wupd"> <div class="notice"> <div class="tab-hd"> <ul class="tab-nav"> <li class="on"><a href="javascript:;">最新文章</a></li> <li><a href="javascript:;">热门文章</a></li> <li><a href="javascript:;" class="wux">推荐文章</a></li> </ul> </div> <div class="tab-bd"> <div class="tab-pal" style="display:block"> <ul> <li><span class="fr zuo10">04-29</span><a href="http://www.nixiaole.com/post/5585.html" title="php开发者composer使用看这一篇就够了" target="_blank">php开发者composer使用看这一篇就够了</a></li> <li><span class="fr zuo10">04-29</span><a href="http://www.nixiaole.com/post/5584.html" title="引用和变量声明在不同语言中的实作" target="_blank">引用和变量声明在不同语言中的实作</a></li> <li><span class="fr zuo10">04-29</span><a href="http://www.nixiaole.com/post/5583.html" title="PHP 没你想的那么差" target="_blank">PHP 没你想的那么差</a></li> <li><span class="fr zuo10">04-29</span><a href="http://www.nixiaole.com/post/5582.html" title="Ubuntu linux 上的 Nginx 和 Php 安装" target="_blank">Ubuntu linux 上的 Nginx 和 Php 安装</a></li> <li><span class="fr zuo10">04-29</span><a href="http://www.nixiaole.com/post/5581.html" title="CentOS下通过yum搭建lnmp(单版本PHP)" target="_blank">CentOS下通过yum搭建lnmp(单版本PHP)</a></li> <li><span class="fr zuo10">04-29</span><a href="http://www.nixiaole.com/post/5580.html" title="为什么 PHP8 是个高性能版本" target="_blank">为什么 PHP8 是个高性能版本</a></li> <li><span class="fr zuo10">04-29</span><a href="http://www.nixiaole.com/post/5579.html" title="PHP8函数包含文件-PHP8知识详解" target="_blank">PHP8函数包含文件-PHP8知识详解</a></li> <li><span class="fr zuo10">04-29</span><a href="http://www.nixiaole.com/post/5578.html" title="使用无参数函数进行命令执行" target="_blank">使用无参数函数进行命令执行</a></li> </ul> </div> <div class="tab-pal"> <ul> <li><span class="fr zuo10">165℃</span><a href="http://www.nixiaole.com/post/3109.html" title="卡贴机移动联通卡激活教程" target="_blank">卡贴机移动联通卡激活教程</a></li> <li><span class="fr zuo10">148℃</span><a href="http://www.nixiaole.com/post/3116.html" title="iPhone Xs Max 升级iOS16.1的优缺点，看完再决定是否升级" target="_blank">iPhone Xs Max 升级iOS16.1的优缺点，看完再决定是否升级</a></li> <li><span class="fr zuo10">140℃</span><a href="http://www.nixiaole.com/post/3780.html" title="wps文字:文档中的图片设置居中对齐后为什么还是无法居中?" target="_blank">wps文字:文档中的图片设置居中对齐后为什么还是无法居中?</a></li> <li><span class="fr zuo10">128℃</span><a href="http://www.nixiaole.com/post/3099.html" title="视频解析需要这几个网站 视频解析网站是什么" target="_blank">视频解析需要这几个网站 视频解析网站是什么</a></li> <li><span class="fr zuo10">114℃</span><a href="http://www.nixiaole.com/post/2343.html" title="街舞3肖杰个人资料 老婆汪莹珠也太美了儿子竟然这么大" target="_blank">街舞3肖杰个人资料 老婆汪莹珠也太美了儿子竟然这么大</a></li> <li><span class="fr zuo10">112℃</span><a href="http://www.nixiaole.com/post/1483.html" title="Android常用布局总结之(LinearLayout、GridLayout等4种)" target="_blank">Android常用布局总结之(LinearLayout、GridLayout等4种)</a></li> <li><span class="fr zuo10">104℃</span><a href="http://www.nixiaole.com/post/1245.html" title="纯干货真诚无套路——一份高品质皮衣选购指南" target="_blank">纯干货真诚无套路——一份高品质皮衣选购指南</a></li> <li><span class="fr zuo10">97℃</span><a href="http://www.nixiaole.com/post/3102.html" title="VIVox6手机看电视黑屏了肿么调 vivo手机看视频黑屏怎么回事" target="_blank">VIVox6手机看电视黑屏了肿么调 vivo手机看视频黑屏怎么回事</a></li> </ul> </div> <div class="tab-pal"> <ul> </ul> </div> </div> </div> </dl> <dl class="function" id="divPrevious"> <dt class="function_t">最近发表</dt><dd class="function_c"> <ul><li><a title="php开发者composer使用看这一篇就够了" href="http://www.nixiaole.com/post/5585.html">php开发者composer使用看这一篇就够了</a></li> <li><a title="引用和变量声明在不同语言中的实作" href="http://www.nixiaole.com/post/5584.html">引用和变量声明在不同语言中的实作</a></li> <li><a title="PHP 没你想的那么差" href="http://www.nixiaole.com/post/5583.html">PHP 没你想的那么差</a></li> <li><a title="Ubuntu linux 上的 Nginx 和 Php 安装" href="http://www.nixiaole.com/post/5582.html">Ubuntu linux 上的 Nginx 和 Php 安装</a></li> <li><a title="CentOS下通过yum搭建lnmp(单版本PHP)" href="http://www.nixiaole.com/post/5581.html">CentOS下通过yum搭建lnmp(单版本PHP)</a></li> <li><a title="为什么 PHP8 是个高性能版本" href="http://www.nixiaole.com/post/5580.html">为什么 PHP8 是个高性能版本</a></li> <li><a title="PHP8函数包含文件-PHP8知识详解" href="http://www.nixiaole.com/post/5579.html">PHP8函数包含文件-PHP8知识详解</a></li> <li><a title="使用无参数函数进行命令执行" href="http://www.nixiaole.com/post/5578.html">使用无参数函数进行命令执行</a></li> <li><a title="PHP内存池分析" href="http://www.nixiaole.com/post/5577.html">PHP内存池分析</a></li> <li><a title="PHP XXE 注入漏洞允许攻击者访问配置文件和私钥" href="http://www.nixiaole.com/post/5576.html">PHP XXE 注入漏洞允许攻击者访问配置文件和私钥</a></li> </ul> </dd> </dl> <dl class="function" id="divTags"> <dt class="function_t">标签列表</dt><dd class="function_c"> <ul><li><a title="xml" href="http://www.nixiaole.com/tags-1.html">xml<span class="tag-count"> (46)</span></a></li> <li><a title="css animation" href="http://www.nixiaole.com/tags-2.html">css animation<span class="tag-count"> (57)</span></a></li> <li><a title="array_slice" href="http://www.nixiaole.com/tags-7.html">array_slice<span class="tag-count"> (60)</span></a></li> <li><a title="htmlspecialchars" href="http://www.nixiaole.com/tags-10.html">htmlspecialchars<span class="tag-count"> (54)</span></a></li> <li><a title="position: absolute" href="http://www.nixiaole.com/tags-12.html">position: absolute<span class="tag-count"> (54)</span></a></li> <li><a title="datediff函数" href="http://www.nixiaole.com/tags-13.html">datediff函数<span class="tag-count"> (47)</span></a></li> <li><a title="array_pop" href="http://www.nixiaole.com/tags-18.html">array_pop<span class="tag-count"> (49)</span></a></li> <li><a title="jsmap" href="http://www.nixiaole.com/tags-19.html">jsmap<span class="tag-count"> (52)</span></a></li> <li><a title="toggleclass" href="http://www.nixiaole.com/tags-21.html">toggleclass<span class="tag-count"> (43)</span></a></li> <li><a title="console.time" href="http://www.nixiaole.com/tags-23.html">console.time<span class="tag-count"> (63)</span></a></li> <li><a title=".sql" href="http://www.nixiaole.com/tags-27.html">.sql<span class="tag-count"> (41)</span></a></li> <li><a title="ahref" href="http://www.nixiaole.com/tags-28.html">ahref<span class="tag-count"> (40)</span></a></li> <li><a title="js json.parse" href="http://www.nixiaole.com/tags-32.html">js json.parse<span class="tag-count"> (59)</span></a></li> <li><a title="html复选框" href="http://www.nixiaole.com/tags-33.html">html复选框<span class="tag-count"> (60)</span></a></li> <li><a title="css 透明" href="http://www.nixiaole.com/tags-34.html">css 透明<span class="tag-count"> (44)</span></a></li> <li><a title="css 颜色" href="http://www.nixiaole.com/tags-37.html">css 颜色<span class="tag-count"> (47)</span></a></li> <li><a title="php replace" href="http://www.nixiaole.com/tags-38.html">php replace<span class="tag-count"> (41)</span></a></li> <li><a title="css nth-child" href="http://www.nixiaole.com/tags-39.html">css nth-child<span class="tag-count"> (48)</span></a></li> <li><a title="min-height" href="http://www.nixiaole.com/tags-44.html">min-height<span class="tag-count"> (40)</span></a></li> <li><a title="xml schema" href="http://www.nixiaole.com/tags-46.html">xml schema<span class="tag-count"> (44)</span></a></li> <li><a title="css 最后一个元素" href="http://www.nixiaole.com/tags-47.html">css 最后一个元素<span class="tag-count"> (46)</span></a></li> <li><a title="location.origin" href="http://www.nixiaole.com/tags-51.html">location.origin<span class="tag-count"> (44)</span></a></li> <li><a title="table border" href="http://www.nixiaole.com/tags-54.html">table border<span class="tag-count"> (49)</span></a></li> <li><a title="html tr" href="http://www.nixiaole.com/tags-56.html">html tr<span class="tag-count"> (40)</span></a></li> <li><a title="video controls" href="http://www.nixiaole.com/tags-64.html">video controls<span class="tag-count"> (49)</span></a></li> </ul> </dd> </dl> </div> <div class="clear"></div> </div> <div class="footer"> <div class="zh"> </div> </div> <div class="fixed-right"> <a href="javascript:;" class="gotop bgb" title="回到顶部"><i class="fa fa-chevron-up"></i></a> </div> <script src="http://www.nixiaole.com/zb_users/theme/txcms2/script/txcstx.min.js?v=2024-09-18"></script> </body> </html><!--158.52 ms , 13 queries , 3305kb memory , 0 error-->