龙空技术网

初识前端

青笙挽摘星 31

前言:

目前咱们对“html文档的基本结构包括”大致比较着重,你们都需要分析一些“html文档的基本结构包括”的相关文章。那么小编同时在网上搜集了一些有关“html文档的基本结构包括””的相关知识,希望你们能喜欢,我们一起来学习一下吧!

什么是前端开发

前端就是在网站或者是APP上提供给我们浏览看到的网页。

网页是由文字、图片、音频、视频等元素组成。而这些组成是需要使用前端代码开发实现,包括基本的HTML+css+JavaScript等等技术。

在一个网页中,HTML负责元素定义实现网页骨架,CSS为网页骨架添加样式,使其多姿多彩,再通过JavaScript控制网页实现动态以及动作交互。

WEB前端三个标准

结构标准:HTML

表现标准:CSS

行为标准:JavaScript

主流浏览器:拥有自己开发的内核

IE浏览器、

edge浏览器:Windows10默认浏览器、

谷歌浏览器、

火狐浏览器、

Safari浏览器:Mac电脑默认浏览器、

Opera浏览器。

前端发展及就业

网页万战开发、后台管理系统、网页游戏开发、移动端页面开发、微信小程序、公众号、订阅号、微信小游戏、App混合式开发。

HTML

HTML是一个超文本标记语言。使用html标签来描述网页。

标签语法:

对标签:<标签名></标签名>

单标签:<标签名>

新建一个html网页

第一步:打开vscode软件后,选择文件——新建文件,或者快捷键Ctrl+N新建文件。就会出现以下页面。

第二步:我们需要使用快捷键Ctrl+S存储文件,文件名默认出现的是 .txt后缀名,我们需要将其重命名为index.html文件。点击保存。

第三步:在html文档中输入“!”,然后再按一下tab键或者回车键,就会自动出现html文档的标准结构代码。这样我们就新建了一个html文件。

运行文件时,只要在文档空白地方右键选择“open in Default Browser”就会在默认浏览器中运行显示该文件。F5刷新。

Html代码结构解析:

<!DOCTYPE html>:声明文档类型,告诉浏览器这个文档是html5类型。

<html></html>:根标签。整个文档的父标签。

<head></head>:头部标签,关于页面的一些信息:页面的编码等。包含有<meta>和<title></title>标签。将来网页的样式css和js代码也在该标签中编辑。

<meta charset=”UTF-8”>:表示网页的编码格式为UTF-8。UTF-8是最常用的字符集编码方式,了解即可。

<title></title>:描述文档标题。在浏览器窗口上显示的网页标题名称。

<body></body>:网页主体标签。在浏览器网页中可见的内容都在这个标签。初级入门阶段的内容都在这个标签中编辑。

<!-- -->:注释符,作用是对代码进行解释说明。快捷键“Ctrl+/”。

Html标签之间的关系:

嵌套关系:一个标签包含另一个标签。【父元素和子元素】

如:<html></html>包含<head></head>,那么html标签就是head标签的父元素,head标签就是html标签的子元素。

并列关系:处于同一个标签中。但并不是嵌套关系。

如:<head></head>和<body></body>就是并列关系,他们同属于html标签的子元素,且head标签和body标签不是嵌套关系。

HTML常用标签

标题标签:<h1></h1>~<h6></h6>。一个标题标签在浏览器中单独一行显示。不与其他元素共用一行。

段落标签:<p></p>。该标签也是独占一行,当段落中文字字数超过浏览器显示宽度时会自动换行。

图片标签:<img src=””>。src也是img标签的必备标签属性,指定获取图片的路径。一行同样可以容纳多个img标签。

图片标签的标签属性:多个标签属性之间用空格分隔。

Src属性:设置图片路径。

图片路径分为相对路径和绝对路径两种。

相对路径是以当前引用图片的html文档所在文件夹出发寻找图片位置。

“./”:表示从当前文件出发寻找当前文件夹里面的资源。

“/”:表示下一级路径。

“../”上一级路径。

绝对路径:从电脑盘符出发,一直写到图片所在位置。

提示:如果更换电脑后,新电脑上没有储存图片,或储存位置不同,那么这个绝对路径就找不到图片,无法正常显示。

Title属性:在浏览器中当鼠标悬停在图片上时提示文本。

Alt属性:当图片无法显示时的替代说明文本。

Width:控制图片在浏览器中显示的宽度。

Height:控制图片在浏览器中显示的高度。

注意:当图片的宽和高只需要设置一个即可。如果同时设置可能会导致图片失真。

超链接标签:<a href=””></a>。href是超链接标签的必备属性,用于存放跳转页面的网址或路径。一行可以容纳多个a标签。

超链接标签的标签属性:

href属性:设置跳转的网页网址或本地网页的存储位置。

href=“外部网址”;

href=“本地网页的存储路径”;

href=“#”:空链接,无跳转。

target属性:跳转页面的打开方式。

Target=”_blank”:在新的窗口打开页面。

Target=”self”:默认在覆盖当前页面跳转。

盒子标签:<div></div>。没有语义,作用是用来进行界面布局,是最大的一个盒子。

HTML格式化标签:

突出标签:<span></span>。同样是没有语义的标签。全部标签中只有div标签和span标签两个没有语义。一行可以容纳多个。

换行标签:<br>。只有一个开始标签没有结束标签的单标签。并且还是一个没有语义的标签,常与其他标签配合使用,手动换行。

水平线标签:<hr>。划分区域的标签。

加粗标签:<strong></strong>

倾斜标签:<em></em>

删除线标签:<del></del>

下划线标签:<ins></ins>。

代码示例:

<!-- 标题标签 -->    <h1>h1标题标签</h1>    <h2>h2标题标签</h2>    <h3>h3标题标签</h3>    <h4>h4标题标签</h4>    <h5>h5标题标签</h5>    <h6>h6标题标签</h6>    <!-- 段落标签 -->    <p>这是一个段落标签。</p>		<!-- 图片标签 -->    <p>图片标签默认状态:</p>    <img src="./images/QDkf.jpg" alt="">    <p >图片标签设置属性后:</p>    <img src="./images/QDkf.jpg" alt="alt属性" title="title属性" width="150px" height="150px" border="2px">    <br>    <!-- 超链接标签 -->    <a href=";>跳转到百度</a>    <a href="./images/QDkf.jpg">跳转图片</a>    <a href="#">空链接</a>    <p>我是<strong>strong标签</strong>:可以使得文字字体加粗;<br>        我是<em>em标签</em>:可以使得文字字体倾斜;<br>        我是<del>del标签</del>:可以使得文字字体添加删除线;<br>        我是<ins>ins标签</ins>:可以使得文字字体添加下划线。    </p>

运行界面:

以上就是今天的学习内容,明天继续!拜拜!

标签: #html文档的基本结构包括

上一篇HTML网页编程之图片映射

下一篇没有了