整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「前端」HTML之结构

天继续为大家分享前端的知识,如果对前端比较感兴趣的小伙伴,可以关注我,我会更大家继续分享更多与前端相关的内容,当然如果内容中又不当的或者文字错误的,欢迎大家在评论区留言,我会及时修改纠正。

1.初识HTML

  • HTML指的是超文本标记语言(Hyper Text Markup Language),是用来描述网页的一种语言。
  • HTML不是一种编程语言,而是一种标记语言(markup language),标记语言是一套标记标签(markup tag)。
  • HTML标签描述网页元素,比如图片标签、文字标签、链接标签等。
  • HTML标签有自己的语法规范,并且所有的HTML标签都是用尖括号(<>)包起来。

2.HTML骨架结构

HTML基本骨架语法如下所示:

HTML基本骨架结构

HTML骨架标签说明:

HTML骨架标签说明

下面通过对HTML骨架的基本认识,你也可以小试牛刀,打开记事本,新建一个带有HTML骨架标签的.txt文件。

在.txt中写入HTML骨架标签,保存,并将.txt的后缀名修改为.html,右键单击你写好的文件,然后选择你要显示的浏览器,本人习惯用谷歌的浏览器,这个根据个人的习惯来选择就好了。

示例代码如下:

我的第一个HTML页面

注意:HTML标签名、标签的属性名以及大部分属性值都统一用小写,不要问我为什么,这是人家W3C的规范,咱们按规范行事就好啦。

正确示范:

书写规范

错误示范:

错误的规范

3.HTML标签的分类

HTML标签:在HTML页面中,带有“<>”尖括号符号的元素被称为HTML标签元素,如上面的<html>、<head>、<body>,它们都是用尖括号包起来,而且这几个标签还是HTML的骨架结构标签,就好比人之所以能站立,就是因为有骨架支撑。

通常我们将其分为常规元素和空元素,以下是对两种类型的介绍。

常规元素(双标签)

语法:<标签名>内容</标签名>,如<body>我的网页内容</body>。

说明:

  • 该语法中"<标签名>"表示该标签的作用开始,一般称为"开始标签(start tag)","</标签名>"表示该标签的作用结束,一般称为"结束标签(end tag)"。
  • 和开始标签相比,结束标签只是在前面加了一个封闭符"/"。
  • 提示:HTML多数都是双标签。

空元素(单标签或自封闭标签)

语法:<标签名 /> ,比如 <br />

说明:

  • 空元素用单标签来表示。简单说,就是里边不需要包含内容,属于自封闭标签。
  • 提示:此类标签较少,只需要用到的时候记住就行,在开发过程中自己不断的积累。

4.HTML标签的关系

标签之间的关系主要是针对双标签,双标签之间的关系分为如下几种。

嵌套关系:

嵌套关系

并列关系:

并列关系

提示:在开发的过程中,如果标签之间是嵌套关系,那么子元素可以通过tab键进行缩进,让其结构和格式更加的清晰。

5.前端开发工具

之前我们是通过记事本来写html骨架结构,会发现这种情况针对几行代码,还是能消化的,但是碰上几千甚至几万以及更多,此时应该怎么办呢?这个时候就得用到我们的前端开发工具,通过前端开发工具,可以更快更高效的提高我们的开发效率,那我们常见的前端开发工具有如下几种:

常见的前端开发工具

说明:

  • Dreamweaver:学校用得多。
  • Sublime:推荐使用,轻量级,效率高,打开速度快,优点多,但是使用插件的时候,需要下载哦。
  • WebStorm:这个我没用过,但是有的人很喜欢,属于付费的。
  • Hbuilder:推荐使用,轻量级,免费,效率高,打开速度快,现在都是使用HbuilderX版本,这个是可以去官网下载到的,重点它免费、免费、免费,重要的事情说三遍!!!。
  • VS Code:这个是微软的,也属于开源免费的,功能很强大的,尤其是在JavaScript开发方面,也是本人推荐使用的。

提示:Hbuilder和VS Code谁更好?我只能说各有千秋,根据个人的习惯,我个人就比较喜欢Hbuilder,偶尔会用VS Code,如果你习惯用VS Code,继续用就行了。

以上开发工具的安装使用,在网络上都会有很多资料,可以动动小手指就能查到哦。

今天就分享到这儿吧,如果喜欢的记得点关注哦,也欢迎在留言区留言。

TML中常用的布局元素:<table>、<div>+CSS

<table>标签:

<table>指的是表格,用表格来搭建界面布局,即用表格的嵌套,来搭建界面布局。

<table>布局优势:

table优势:开发时间短(使用DW开发速度快);纯table各浏览器不会有兼容问题;内容可自适应;在搜索引擎排名能靠前;

但是 table如果布局变更,需要重新开发;如果table里有div ul 等,可能会出现浏览器兼容问题;加载速度慢;table嵌套的太多,运维是非常困难的。

<div>块级(block-level)标签:

DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。

<div>布局优势:

一.精简代码,减少重构难度。

网站使用DIV+CSS布局使代码很是精简,css文件可以在网站的任意一个页面进行调用,而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话,需手动改很多页面,而且看着那些表格也会感觉很乱也很浪费时间,但是使用css+div布局只需修改css文件中的一个代码即可。

二.网页访问速度

使用了DIV+CSS布局的网页与Table布局比较,精简了许多页面代码,那么其浏览访问速度自然得以提升,也从而提升了网站的用户体验度。

三.SEO优化

采用div-css布局的网站对于搜索引擎很是友好,因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题,而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

四.浏览器兼容性

若使用table布局网页,在使用不同浏览器情况下会发生错位,而div+css则不会,无论什么浏览器,网页都不会出现变形情况。


HTML中常用的3种布局方式:

1.流动式布局:是HTML网页默认的布局方式

特点:

1.块级元素都会在所处的包含元素内自上而下按顺序处置延伸分布,且默认状态下,块级元素占整个文档流,默认宽度为100%。

2.内联元素都会在所处的包含元素内从左到右水平分布显示,不占整个文档流。

常见的块级(block)元素有:<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol

常见的内内联(行内)元素有:<a>、<span>、<img>、<input>、<select>、<textarea>

2.浮动布局(float)

特点:

浮动布局依靠【 浮动属性 float:left/right/... 】来使标签脱离文档流,达到两个块级元素并排显示的效果。

float:left ; 浮动脱离当前文档流浮动。

同时可以依靠【展示属性display:inline/block/inline-block】来进行行内元素和块级元素的效果切换。从而达到灵活运用块级元素和行内元素布局的效果。

3.层模型布局又叫定位布局

特点:

当我们应拥div布局是,在第一层块界面上来做第二层块界面的开发时,就要用到我们所说的定位布局。

通过运用【定位属性position:absolute/relative/fixed】 来进行第二层界面的定位布局。

网页是静态的,网页上的定位

position:absolute ;绝对定位脱离文档流,不受浮动影响,就是相对于窗体(body)边界的margin定位。

position:relative; 相对定位不脱离文档流,相对于父级标签元素的位置定位。

position:fixed;固定位置,不会受任何因素影响。

滚动条移动前

滚动条移动后

优先层显示方法:【属性:z-index:0/1/2...】

特点: 数值越大,越优先显示。

注意:只有元素使用了position属性的,才具有z-index属性。


本文部分内容来自网络,如有侵权,请联系修改。

歌Chrome中的检查元素功能可以帮助你查看网页上特定元素的HTML源代码。在本教程中,我将向你展示如何使用此功能提取任何网页的整个HTML代码。

网站的HTML源代码是web浏览器用来呈现页面并根据页面上应用的HTML、CSS和JS代码和规则进行显示的代码。网站的源代码,即网站的结构,是公开的,而且必须公开,以便浏览器能够正确显示。

现代网络浏览器允许用户查看他们正在查看的网页的HTML源代码。此功能对网页设计者和开发人员的设计和开发工作特别有用。通过查看网站(或网页)的HTML源代码,你可以了解网站的结构、使用的HTML元素以及应用的CSS样式。这不仅是学习如何使用HTML和CSS进行设计和编码的好方法,也是测试自己的设计和检查结果页面上是否有错误的地方的好方法。

Web浏览器中页面的源代码通过Ctrl+U键盘快捷键或右键单击页面并选择“查看页面源代码”选项来显示。这显示了页面加载时的完整HTML代码,它捕获了页面的静态状态,即使页面具有动态功能,其内容也不会随着时间的推移而变化,服务器端或客户端也是如此。

要查看动态生成页面(即通过JS生成的页面)或具有动态变化内容的页面(即具有不断变化的新闻流的新闻网站或具有不断变化界面的社交网络)的HTML源代码,我们可以使用谷歌Chrome的检查功能,我将在下面详细演示。


使用Chrome检查查看和复制网页的完整HTML代码

使用检查功能查看网页源代码的美妙之处在于,你可以查看和获取在给定时间完全有效的HTML代码,这在具有变化和移动元素的页面上非常有用,这些元素会显示和消失。

在检查模式下,你可以对页面上任何HTML元素的内容、属性和样式进行编辑。不过,这些更改只对你可见,不会以任何方式对你正在查看的网站进行永久更改。

现在,让我们看看这是如何工作的。

1、启动Chrome浏览器,打开你选择的网页。

2、右键单击页面上的任何位置,然后从下拉菜单中选择“检查”。也可以使用Ctrl+Shift+I键盘快捷键。

这将打开浏览器窗口右侧或底部的“开发人员工具”部分,具体取决于你的屏幕大小和布局。

开发人员工具部分由一个顶部菜单和下面的两个并排窗口组成。在左侧,你将看到页面的HTML源代码,这些代码可以逐个元素折叠和展开。在右侧,你将看到在左侧选择的每个元素的样式、事件侦听器和属性。

你将看到所有当前有效的HTML代码,其中包含所有元素,如标题、段落、列表、链接、图像甚至注释。代码量将是最小的,它在基本的HTML网页上没有复杂性,因此它将更快地显示。然而,在高流量、动态的网站上,有很多元素和功能,HTML源代码将相当长和复杂,因此需要更长的时间才能完全显示。

3、转到本节顶部,找到<html>标记,该标记通常位于doctype(文档类型)声明(例如 <!doctype html>)之后。

4、找到<html>标记后,按Ctrl+C或右键单击它,然后选择复制>复制outerHTML以复制页面的所有html源代码。

5、然后,你可以根据需要将此代码粘贴到文本或HTML文件中,并对其进行进一步检查和编辑。

在检查模式中,你还将看到内联样式和对外部样式表的引用(如果有的话)。此外,如果你在Chrome中应用了任何自定义用户样式,它们也将附加到你复制的HTML代码的底部。