HTML基本组成结构与标签

其实组成结构用一张图来简单了解下如下

目前一般网站的结构是会如此不是很清晰简单

先来说说header头部

这样是不是更加清楚了 导航栏是引导用户查看网站内容的快捷入口,打个比方例如你去超市买酱油,超市的头顶上会挂着分类区域例如,生活用品、服装、厨具等

然后你就会通过分类去找你要买的物品归类在哪,到那你就只用找你想要买的酱油就可以了。这样是不是容易理解点

那我们在继续来看看content内容部分顾名思义就是作者或者楼主展现文字结合图片等内容的一种体现具体如下:

这样就是内容的展现,如果要打比方就:大家都知道星巴克是品咖啡的地方这就是他的hearder但是具体喝哪中咖啡就要取决于内容content,你的走到前台看咖啡的种类及价格

要说hearder与content的区别我个人理解就是header是概览目录,虽然content也可以实现但更多content定位到具体某一个属性及地址

最后让我们来聊聊footer脚部也叫脚标

这就是上面列表个网站的联系方式以及监管等等,打个比方的话就和车牌照一样,即要有车管所的监管还要有你的联系方式。

介绍到此是不是对网页组成结构有大致印象

接下来说说html网页的标签

有个很简单的方式查看网页标签就是鼠标右键点击网页空白的地方看源代码

是不是可以看到很多代码用<>尖括号组成这就是标签</>有斜杠就叫标签的闭合也可以理解为<开始></结束>

来看看对应关系title一般情况是这样对应如下:  当然也有其它地方写title的用法这个暂时不考虑

在来看看内容部分的关系对应如下:

当然这里只做简要介绍,详细的后面在深入理解

我们在看标签<>内外关系也就是所谓的嵌套

<div>

  <h2>

  <ul>

    <li></li>

    <p></p>

  </ul>

  </h2>

</div>

标签这样一层套一层就是标签的嵌套,那么最外面的div就是董事长,h2就是总经理与他同级的还ul也是总经理,li和p就是部门主管,这样一个层级关系

打个比方你是A公司的董事长和B公司的董事长认识,这时候你要的一个文案需要他的一个部分下的人员上交上来给你看关于合作,那么B回到公司就要

把这件事通知下去就像这样 div>h2>ul>li或p 然后员工知道老板要文案就直接把文案给送过去就可以,我们爬虫BeautifulSoup也是按这个逻辑去抓取

想要的内容,就是通过标签层级去找内容。

这次就简单的介绍到这后续会持续跟新。  

HTML基本组成结构与标签的认识的更多相关文章

  1. HTML5 常用的结构化标签整理

    一.语义化结构化标签 结构化标签优点: 1.方便浏览器处理和识别,提升了网页的质量和语义. 2.减少了大量无意义的div标签,增强代码的可读性. 结构化标签:(header,nav,body,arti ...

  2. HTML5结构化标签

    一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介 ...

  3. HTML基本结构与标签总结整理篇

    HTML基本结构与标签总结整理篇 前言:这是笔者的学习总结与整理,如果有错误或疑问的地方,欢迎指正与讨论!另:此文会不定时更新~ 1.了解HTML 学习前端技术,必然涉及三个方面:html(结构).c ...

  4. Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...

  5. golang中的反射解析结构体标签tag

    package main import ( "fmt" "reflect" ) type resume struct { // 反射解析结构体标签tag Nam ...

  6. HTML的基本结构与标签的初步了解

    一.初步了解HTML HTML是一种超文本标签语言,浏览器则是用来"解释和执行"HTML源码的工具. HTML的基本结构 <!DOCTYPE html> <htm ...

  7. web理论知识--HTML结构及标签

    一.参考书籍: <Web 前端开发 HTML5+CSS3+jQuery+AJAX 从学到用完美实践> 备注:本书为工具书. 二.HTML5元素: 按功能划分:基础.格式.表单.框架.图像. ...

  8. 关于Go语言,自己定义结构体标签的一个妙用.

    在Go中首字母大写和小写,决定着这此变量能否被外部调用, 比如:在使用标准库的json编码自定一的结构的时候: <pre style="margin-top: 0px; margin- ...

  9. 网页结构——head标签内

    之前写网页都很标准的格式,最近一个项目出现了页面闪动等一系列问题[项目不是前后端分离], 所以这边有后台的功劳,有部分后台是不管你页面结构的,在他们操作的时候可能会在,你的head内meta前加内联c ...

随机推荐

  1. js作用域和变量提升

    Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of ...

  2. github生成静态博客

    github生成静态博客很简单. 1.确认你知道你github的用户名,我的叫做chenxing12 2.创建一个项目名字叫做:用户名.github.io 我的用户名叫做chenxing12,所以我创 ...

  3. “全能”选手—Django 1.10文档中文版Part2

    第一部分传送门 第三部分传送门 第四部分传送门 3.2 模型和数据库Models and databases 3.2.2 查询操作making queries 3.3.8 会话sessions 目录 ...

  4. 【原创】HDFS介绍

    一.            HDFS简介 1.    HDFS全称 Hadoop Distributed FileSystem,Hadoop分布式文件系统. Hadoop有一个抽象文件系统的概念,Ha ...

  5. WPF语音播放MediaPlayer

    private MediaPlayer player; public MainWindow() { InitializeComponent(); player = new MediaPlayer(); ...

  6. 【Win10开发】Toast通知

    Toast 通知是一种发送给用户的暂时消息,包含相关的.具有时效性的信息,并且提供对应用中相关内容的快速访问.它可显示你是在另一个应用中.在“开始”屏幕上.在锁屏上,还是在桌面上.Toast 应该被视 ...

  7. Collection框架

    Collection框架 集合框架(Collection Framework)泛指java.util包的若干个类和接口.如Collection,List,ArrayList,LinkedList,Ve ...

  8. Android源码编译make的错误处理

    android源码下载:官方下载 或参考android源码下载方式 Android编译版本: PLATFORM_VERSION=4.0.1(最新Android 4.0.1) OS 操作系统平台: Li ...

  9. MVC Razor语法

    Razor语法, 视图引擎 Razor(CSHTML) @ 可以编写一条C#语句@{} 可以编写一组C#语句,也有可能嵌着Html@: 将文字内容直接输出到页面上去@() 在一句中将一段C#代码包括起 ...

  10. [Architecture] 系统架构正交分解法

    [Architecture] 系统架构正交分解法 前言 随着企业成长,支持企业业务的软件,也会越来越庞大与复杂.当系统复杂到一定程度,开发人员会发现很多系统架构的设计细节,很难有条理.有组织的用一张大 ...