Web前端 HTML 基本结构标签

第一个HTML

每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。

标签名 定义 说明
HTML标签 页面中最大的标签,我们称为 根标签
文档头部 注意在head标签中我们必须要设置的标签是title
文档标题 让页面拥有一个属于自己的页面标题
文档的主体 元素包含文档所有内容,页面内容基本都是放到body里面

接下来我们创建一个记事本文件,编写代码,规范的代码编写是要有层级关系的,父子层级和兄弟层级,例如标签是标签的父标签,标签和是兄弟标签。

这样我们可以更加直观的观察我们写的代码。

Web前端 HTML 基本结构标签_第1张图片

写好后将txt文件格式改成html文件格式,然后打开 

 Web前端 HTML 基本结构标签_第2张图片

 由此可见,我们标签的内容显示在了我们网站的最上面,也就是网页标签</p> <p><body>标签的内容显示在了我们网页内容部分里</p> <p>以上的标签是html的基本标签,也是骨架标签,是每个网站必须要有的标签,需要牢记。</p> <p><strong><span style="color:#ed7976;">下面请我们的小猪佩奇来给我们演示一下,这些基础标签分别代表着网页的什么部分</span></strong></p> <p style="text-align:center;"><strong><span style="color:#ed7976;"><a href="http://img.e-com-net.com/image/info8/3a174277d77b4188baa06979b7c89e35.jpg" target="_blank"><img alt="Web前端 HTML 基本结构标签_第3张图片" src="http://img.e-com-net.com/image/info8/3a174277d77b4188baa06979b7c89e35.jpg" width="650" height="374" style="border:1px solid black;"></a></span></strong></p> <p>代码开头我们可以用<!DOCTYPE html>标签来声明使用的html版本(这个是文档类型声明标签,所以并不属于html里面的内容,要把这个标签写在第一行)</p> <p><html>标签,网页最大的标签,也就是根标签,所有标签都要写在这个标签里面 。</p> <p><head>标签,文档的头部,小猪佩奇的头(鼓风机),用于设定一些网页的属性</p> <p><title>标签,网页标题,放在<head>标签里,也是头部标签必须要有的标签</p> <p><body>标签,文档的主体,页面内容基本都是放到<body>标签里面。</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/68281a617deb4b6fb17d3768280740ee.jpg" target="_blank"><img alt="Web前端 HTML 基本结构标签_第4张图片" src="http://img.e-com-net.com/image/info8/68281a617deb4b6fb17d3768280740ee.jpg" width="650" height="207" style="border:1px solid black;"></a></p> <p> 用记事本文件编写有很多的不便利,代码都要自己一个个敲写,个人觉得新手刚学可以用用基础的记事本文件,可以加深印象,有基础后可以使用上面的工具,写网页的工具很多,但写代码都差不多,只要学会其中一种,其他的就都很容易上手。</p> <p>可以按照自己的爱好下载自己喜欢的编写代码的工具</p> <p>下面我们用VSCode演示一下编辑过程</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/206ca980d65d4e5b9bb379986464f018.jpg" target="_blank"><img alt="Web前端 HTML 基本结构标签_第5张图片" src="http://img.e-com-net.com/image/info8/206ca980d65d4e5b9bb379986464f018.jpg" width="650" height="490" style="border:1px solid black;"></a></p> <p></p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/ea51fe26f0bd42bd8864decec82b2515.jpg" target="_blank"><img alt="Web前端 HTML 基本结构标签_第6张图片" src="http://img.e-com-net.com/image/info8/ea51fe26f0bd42bd8864decec82b2515.jpg" width="650" height="539" style="border:1px solid black;"></a></p> <p><strong>VSCode的使用</strong><br> 1.双击打开软件。<br> 2.新建文件(Ctrl+N )。<br> 3.保存(Ctrl+S ),注意移动要保存为.html文件<br> 4.Ctrl +加号键, Ctrl +减号键可以放大缩小视图<br> 5.生成页面骨架结构。<br> 输入!按下Tab键。<br> 6.利用插件在浏览器中预览页面:单击鼠标右键,在弹出出口中点击"Open In Default Browser"。<br>  </p> <p>这个软件默认是英文,可以安装一个中文插件</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/21c4089ed44048bab7a7e3435fdc4aca.jpg" target="_blank"><img alt="Web前端 HTML 基本结构标签_第7张图片" src="http://img.e-com-net.com/image/info8/21c4089ed44048bab7a7e3435fdc4aca.jpg" width="529" height="299" style="border:1px solid black;"></a></p> <p> 推荐安装的插件</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/a25528836f7b4749a5742f48b724f5e9.jpg" target="_blank"><img alt="Web前端 HTML 基本结构标签_第8张图片" src="http://img.e-com-net.com/image/info8/a25528836f7b4749a5742f48b724f5e9.jpg" width="568" height="227" style="border:1px solid black;"></a></p> <p> <!--注释内容-->    这是一个注释标签,搜索引擎不会读取,就像Python的#号和""" """一样,起到注释代码的作用,可以方便起到维护和阅读的作用。</p> <pre><code class="language-html"><!DOCTYPE html> <!--告诉浏览器这个页面使用html5版本来显示页面的--> <html lang="en"> <!--lang="en"告诉浏览器或搜索引擎这是一个英文网站-->> <head> <meta charset="UTF-8"> <!--必须写的代码,采取UTF-8编码格式保存文字,如果不写容易导致网页乱码或显示错误。-->> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>这里可以写网页标签 这里可以书写页面显示内容

一级标题

段落标签

段落标签

Web前端 HTML 基本结构标签_第9张图片

这是一个段落标签

 网页文字内容若想分段,必须用到

分段标签,不能想word文档一样可以空格回车换行,浏览器会将多个空格视为一个空格,没有分段标签就不会换行,将所有内容挤在一起。

写网页时可以用若干个

内容

标签将文档分为若干个段落。


这是一个换行标签 (brack的缩写,意为打断、换行) 特殊标签,单身标签,只有一个

在HTML中网页内容通常从左到右排序,到了最右端才会自动换行,若想希望某段文本强制换行显示,则可使用强制换行标签
,代码在执行到
标签时,会立刻换行,不管右侧空间还有多少,直接换行。

注意:
是个单标签。

若果没有标题标签和分行标签的文章打开就会挤在一团,即使你在写的时候已经分好行了也不行 

Web前端 HTML 基本结构标签_第10张图片

 Web前端 HTML 基本结构标签_第11张图片

 写好标题标签和分段标签的代码:

Web前端 HTML 基本结构标签_第12张图片

 Web前端 HTML 基本结构标签_第13张图片

 

你可能感兴趣的:(HTML,web,前端,HTML,html基础,笔记)