HTML思维导图

以下是HTML文档的结构示意图:

本文主要讲解HTML当中的一些html标签,css样式,javascript方法

html

  html的标签有各式各样的数不胜数,但是常用的并不多,总结下我目前最常用的html标签有:div标签,ul标签,a标签,span标签,img标签,button标签,input标签,select标签。在网页上这些标签的主要功能都是通过css样式以及js方法相结合才能实现的。

  div标签

  这是一个块状元素,也是我们最常用的,可以毫不夸张的说,任何网页都会用到它,它主要是搭配样式以及方法使用,你可以把它看成一个箱子,它主要的作用就是用来包住其他标签,限制其他标签。

  span标签

  这是一个行内元素,和div一样,它也是一个箱子,和div的不同的是,一般我们会拿span标签来包裹文本内容

  ul标签

  ul标签是列表标签的一种,列表标签包括有序列表ol,无序列表ul,自定义列表dl。不过常用的还是ul标签,我们比较少用到单纯用html书写的ul,一般我们都会结合css样式以及js方法实现各种功能,比如:导航栏,轮播图片等。

  a标签

  超链接标签,主要用于实现超链接功能

  img标签

  用于插入图片

  button标签

  按钮标签,在网页中多多少少都会出现一些按钮,这就要用到我们的button标签了,button标签一般比较多用于表单里面,但是也会有一些特殊的用法,比如按钮式下拉菜单。

  input标签

  表单标签的一种,主要用于输入文本框,和密码文本框,是表单中最常用到一种标签

  

  select标签

  下拉选项,主要是做二级联动和多级联动使用

CSS样式

  对于样式的理解,我是这样理解的,一个网页你想让它是什么样子的,那它的样子就是样式,也就是说,我们要通过css样式来美化我们的网页以及通过css样式结合js来实现我们想要的功能。

  样式对于html文档来说还是很重要的,就像我我们学习HTML一样,如果我们只学习了html标签,我们是很难做出一个网页来的,但是学习了css样式之后,我们可以通过css样式来制作静态的网页,虽然少了js,但是不影响我网页的制作。

  在这我不会像html标签一样,给你们列举一些常用的样式,我更多的是讲解如何知道自己要使用什么样式,即使样式代码忘记了,也可以通过百度查询。

  首先

  我们要清楚我们要做的这个html文档的整体结构,整个html文档是由多少个部分构成的。

  然后

  在我们了解了整体结构之后,我们开始理解没一部分它是要长什么样子的(也就是它的样式是什么),比如:宽高多少,是否要添加背景颜色或者背景图片,文字颜色是什么等等······

  最后

  我们在调试样式的时候,最好给对象加个边框,这样会比较方便我们调试外边距,内填充,以及整个的布局。

javascript方法

  在html中我最喜欢的就是js了,原因很简单,就是它的实现需要你运用你的逻辑思维,往往一个动作一个功能的实现都会让你绞尽脑汁才会想出来。当然我就不是喜欢自虐,只是在平时书写一些代码的时候,往往最浪费我时间的就是css样式的调试,因为我们现在才刚开始学不久,一些作业都是模拟一些网站,把这个网站模拟出来,所以在模拟的过程中总是因为样式的问题调试很久,不是说样式很难,只是自己感觉很繁琐,尤其最近一段时间让自己写传智播客的新网页,但是素材什么的都没有,有些图片甚至要自己抠,这就繁琐了。所以我还是更喜欢js简单明了快捷

  当然,js方法的逻辑思维还是有方法的,我一般使用的是逆向思维思考

  1) 一般我书写js的思路首先是先了解这个功能完成后会得到什么结果?

  2) 通过这个结果去考虑如何才能得到这个结果(这就是要思考有哪些方法可以实现这个方法),在这里我给实现这个结果的动作称为方法1,

  3)然后思考要如何才能实现方法1,实现方法1的动作称为方法2,

  ·················

  n)中间省略了很多,因为这是一个逆向思维的方法,知道了要实现的功能然后一级一级往上推,直到最后,这一功能的方法就被你推出来了,当然前提是要对js方法比较熟悉,因为如果你都不熟悉,那你怎么知道有哪些方法可以实现这个动作呢?

    

  

时间: 2024-10-08 13:21:39

HTML思维导图的相关文章

物联网世界常见传输方式简介(思维导图)

物联网世界常见的传输方式包括:移动网络(2G/3G/4G).wifi.蓝牙.ZigBee等传统的传输方式,以及基于NB-IOT.Lora等新兴的传输方式.以下思维导图供参考: 点击附件下载原图.

Node 即学即用 笔记 思维导图

Node即学即用 REPL(Read-Evaluate-Print-Loop) console.log .clear .help .exit require('http') createServer 聊天服务器 tcp服务器 require('net') on connection on data on end on error telnet express app.get app.post -app.js -public -views ----partials EJS模板语言 测试 requi

思维导图分析http之前端组成

思维导图分析http前端组成 全文总览 本文分为三个部分:前端组成,http协议,http服务器应用程序.http的应用按照我自己的理解分为前端应用以及后端应用,所以我分别写了前端组成以及http服务器应用程序两章,中间穿插了一章http协议,主要介绍了http协议. 2.前端组成 这里的前端主要指web前端,即网页前端.前端部分分为三个部分:html,css,js.html负责网页页面的结构布局以及静态内容的排版:css称为层级样式表,主要有页面布局,添加样式,美化页面的功能:js是脚本编程语

关于一个简易的实时内存监控系统的思维导图

非常感谢爱蘑菇的狗的文章(原文引用:http://www.cnblogs.com/shengxinjing/p/python.html),建议可以先从头跟着这一篇文章做一遍.在这个基础上,还可以做出其他的一些扩展哈,比如说CPU.进程等等.以下是我做完这个小项目之后写的思维导图.

机器学习算法思维导图总结篇

学习机器学习零零散散将近1年之久,期间也想做各种方式的总结.笔记,但因总总原因没能写出一个系列,加上当时理解尚浅.主次分不清,所以写笔记也就作罢.自己在草稿纸上推导,也是写完就扔.一路曲曲折折,踩了很多的坑,但总算有些许收获.面临毕业找工作,对机器学习也挺感兴趣,要找这方面的工作,所以,做此总结.一来记录自己的学习所得,二来为了找工作的面试复习一下.网上机器学习方面的文章很多,"浩如烟海",一点不为过,好多讲的都很详细,当然我在其中也学到了很多很多这方面的知识.但,总觉得缺点什么? 所

My way to Python - Day05 - 面向对象-思维导图

My way to Python - Day05 - 面向对象 思维导图

用思维导图建立知识的链接和结构

如果只用一种方式了解某样事物,你就不会真正了解它.了解事物真正含义的秘密取决于如何将其与我们所了解的事物相联系.通过联系,你可将想法内化于心,从各种角度看问题,直到找到适合自己的方法.这才是思考的真谛! ——马文·明斯 不要担心你以前没有接触过相关的专业知识,学习起来会很吃力! 其实,学习,是一个将新知识与已经掌握的知识相链接的过程. 思维导图和曼陀罗思维法是最好的帮助我们建立知识链接的工具. \ 思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维

教你如何学习思维导图

我们学习思维导图,是否成效,有进步其实决定因素很多,而我们能做的就是在大家起步都一样的时候,比他人多掌握一份思维导图技巧,我们在思维导图的路上也就能够走得更远一些. 第一 态度.这是学习和掌握思维导图的根本,它决定了我们对思维导图掌握的程度.很多时候,是我们的决心和信心决定了我们未来成就的高度. 第二 速度.我们练习和应用的速度,即我们的执行力如何,学了不用就是油费 .在我们的 生活中有多少梦想和计划是由于我们缺乏执行力而成为泡影 .所以,计划很重要,行动更重要. 第三 力度.力度决定了我们可以

PM Boook项目管理思维导图梳理

采用思维导图的形式来展示项目管理的五大过程组.十大知识领域,能更好的展示框架结构,便于理解.分析. 下图为思维导图化制的项目管理要素:灰色为启动过程组.白色为规划过程组.紫色为执行过程组.蓝色为监控过程组.绿色为收尾过程组. PM Book(第五版),项目管理框架结构更清晰,把干系人管理单独作为一个章节,其他章节梳理的更清晰,推荐参考第五版.

第七周项目三——第八,九章思维导图

有时候学知识,就容易遗忘,不清楚知识的主次与大方向.在高中的时候总结语文诗歌的类型和文章结构的时候经常用,然后就没有怎么用过. 现在知识学得很多很杂,再加上我的记忆力也不是特别的号,现在开始就用思维导图,来帮助我梳理知识点,学得更好! 这就是我的思维导图,清晰明了! 心得体会:记得下次用软件写!!继续加油,最近的时间安排的不好,下次注意,合理安排时间咯!!