必知HTML基础

提示：点击上方\”WEB网页设计自学平台\”↑ 可以订阅噢！

摘要 51RGB官方微信在学习CSS制作知识之前，我们必须需要认识的HTML什么基础知识。

一、必知HTML基础-CSS教程系列

  • 目录

  1. 搞清浏览器作用

  2. 搞清什么是HTML

  3. html作用

  4. html我们涉及哪些基础知识

  5. 常见html单词及单词功能作用有哪些

  6. html结构

  7. html与CSS关系

1、搞清浏览器作用

浏览器主要作用是浏览网页作用，在DIV+CSS制作开发时候仍然是浏览我们制作开发重构网页作用。浏览器可测试我们开发的CSS网页兼容性、网页效果、因开发疏忽导致错误等作用。

在CSS测试（CSS工具）里常用浏览器包括IE6、IE7、IE8、火狐（FF）、谷歌（chrome）、苹果Safari、Opera主流浏览器。至于傲游、360浏览器因为他们使用你系统自带的IE内核，所以不必考虑，只要支持你浏览器版本即支持类似这2款浏览器

需要兼容浏览器有哪些？http://www.51rgb.com/css-tool/t86.shtml

2、搞清什么是HTML

html是hypertext markup language的缩写，即超文本标记语言。可以这样理解，HTML文件是一定规则规律以html\\htm等命名后缀名的文本文件。

3、html作用

HTML作用，通过一定html自身语法结构（html结构），显示文字、图片、动画（flash）、视频或音频音乐。而CSS则是配合html实现漂亮的各式各样的页面内容。

4、html我们涉及哪些基础知识

Html扩展名、html源代码、DOCTYPE、html结构、head标签、charset

5、常见html单词及单词功能作用有哪些

a、B(strong)：加粗

b、P：换行实例：<p>我是第一段内容</p><p>我是第二段内容</p>

c、Br：提行实例：我是第一排<br />我是第二排内容

d、px：像素、长度宽度单位

实例：width:30px; 宽度30像素

e、ul、ol、li列表标签实例：

  1. <ul>

  2. <li>列表一</li>

  3. <li>列表二</li>

  4. <li>列表三</li>

  5. </ul>

  6. <ol>

  7. <li>列表一</li>

  8. <li>列表二</li>

  9. <li>列表三</li>

  10. </ol>

f、div与span：都是html标签

实例：<div>我占一行</div><span>我多长占多长位置</span>

两者区别：DIV占用1整排，而SPAN所占位置是内容多少占用多长长度

g、img：图片引用标签

<img src=\”/css-images/css-logo.gif\” />图片标签

h、dl dt dd：CSS的另类表格组合

实例：

<dl>

<dt>我是标题</dt>

<dd>列表一</dd>

<dd>列表二</dd>

</dl>

j、title：标题标签

实例：<title>标题</title>

特点，在一个网页内只能使用一次（只能出现一次）

6、html结构 – TOP

这里Html结构可用于每次新建制作网页模板使用。

旧html结构：

<!DOCTYPE html PUBLIC \”-//W3C//DTD XHTML 1.0 Transitional//EN\” \”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\”>

<html xmlns=\”http://www.w3.org/1999/xhtml\”>

<head>

<meta http-equiv=\”Content-Type\” content=\”text/html; charset=utf-8\” />

<title>DIVCSS5标题</title>

</head>

<body>

具体网页呈现内容

</body>

</html>

经过CSS教程网的DIVCSS5优化后的HTML结构（可用于每次新建HTML模板）：

<!DOCTYPE html>

<html>

<title>标题</title>

<meta name=\”keywords\” content=\”关键字\” />

<meta name=\”description\” content=\”网页描述\” />

<link href=\”这里CSS文件引入地址\” rel=\”stylesheet\” type=\”text/css\” />

内容www.divcss5.com提供

7、html与CSS关系 – TOP

搞清楚html与CSS关系很重要，也是认识CSS基础。html与CSS关系解释：HTML内放置显示网页要显示的具体内容（图片、文字、动画等）而CSS是控制HTML内这些具体内容的怎么显示、怎么排版、颜色、大小、宽度、高度、左右布局等显示样式。

以上7点是学习CSS的html基础，可能还不完善，但是在以后运用的时候DIVCSS5会给大家详细、本简单CSS教程分为15节，此节DIV CSS教程以文字内容为主，以后会穿插更多实例和图例、跟我做的内容希望对大家能有帮助。

Web前端：JavaScript最强总结，最全面的零基础入门教程

JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。

  • 简单、易学、易用；
  • 跨平台；IE、Navigator
  • 符合ECMA（欧洲计算机制造协会）标准，可移植；
  • 事件驱动式的脚本程序设计思想；
  • 动态、交互式的操作方式。
  • 交互式操作；
  • 表单验证；
  • 网页特效；
  • Web游戏
  • 服务器脚本开发等。

文本编辑器

Web浏览器

解释执行（由上而下）

JavaScript1.0——JavaScript1.4

JavaScript/IE3.0、JavaScript1.2/IE4.0；

微软允许用户自行设置对JavaScript处理模式。

JavaScript与Java的区别体现在：首先，它们是两个公司开发的不同的两个产品，Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。其次，JavaScript是基于对象的，而Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。第三，两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。第四，两种语言所采取的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。第五，代码格式不一样。Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。第六，嵌入方式不一样。在HTML文档中，两种编程语言的标识不同，JavaScript使用<script>…</script>来标识，而Java使用<applet> … </applet> 来标识。第七，静态绑定和动态绑定。Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检查，如不经编译则就无法实现对象引用的检查。JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查。

如果想要更高效、更系统地学会javascript，最好采用边学边练的学习模式。

今天分享的这套JavaScript学习教程，讲解了前端开发中的核心技术JavaScript，俗称JS

内容涵盖：JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点，该视频可以开启你的WEB前端之路。

1. .JavaScript教程-JavaScript概述

2. .JavaScript教程-HTML嵌入JavaScript代码的第一种方式1

3. .JavaScript教程-HTML嵌入JavaScript代码的第一种方式2

4. .JavaScript教程-HTML嵌入JavaScript代码的第二种方式

5. .JavaScript教程-HTML嵌入JavaScript代码的第三种方式

6. JavaScript教程-JS的标识符

7. .JavaScript教程-JS的变量1

8. .JavaScript教程-JS的变量2

9. JavaScript教程-JS的函数初步1

10. .JavaScript教程-JS的函数初步2

11. .JavaScript教程-全局变量和局部变量

12. .JavaScript教程-JS的数据类型

13. .JavaScript教程-Undefined数据类型

14. .JavaScript教程-Number数据类型

15. .JavaScript教程-Boolean数据类型

16. .JavaScript教程-回顾数据类型

17. .JavaScript教程-String数据类型

18. .JavaScript教程-Object数据类型

19. JavaScript教程-Object数据类型2

20. .JavaScript教程-Object数据类型3

21. .JavaScript教程-null undefined NaN的区别以及等同和全等运算符

22. .JavaScript教程-JS的常用事件

23. .JavaScript教程-回调函数的概念

24. .JavaScript教程-注册事件的两种方式

25. JavaScript教程-JS代码的执行顺序

26. .JavaScript教程-JS代码的执行顺序2

27. JavaScript教程-捕捉回车键

28. .JavaScript教程-捕捉回车键2

29. .JavaScript教程-void运算符

30. .JavaScript教程-JS的控制语句

31. JavaScript教程-设置和获取文本框的value

32. JavaScript教程-innerHTML和innerText属性

33. .JavaScript教程-正则表达式

34. .JavaScript教程-邮箱地址的正则表达式

35. JavaScript教程-扩展字符串的trim函数

36. .JavaScript教程-回顾JS

37. JavaScript教程-表单验证

38. JavaScript教程-表单验证2

39. JavaScript教程-表单验证3

40. .JavaScript教程-表单验证4

41. .JavaScript教程-复选框的全选和取消全选

42. .JavaScript教程-获取下拉列表选中项的value

43. .JavaScript教程-周期函数setInterval

44. .JavaScript教程-内置支持类Array

45. .JavaScript教程-BOM编程window的open和close

46. .JavaScript教程-BOM编程弹出确认框

47. .JavaScript教程-（补录）-将当前窗口设置为顶级窗口

48. .JavaScript教程-BOM编程history和location对象

49. .JavaScript教程-JSON在开发中的使用

50. .JavaScript教程-JSON在开发中的使用2

51. JavaScript教程-JSON在开发中的使用3

52. .JavaScript教程-JSON在开发中的使用4

53. JavaScript教程-JSON在开发中的使用5

大数据开发基础之HTML基础知识

今天为大家带来的是大数据开发基础的HTML基础了解，HTML是英文Hyper Text Markup Language的首字母缩写，又被称为超文标记语言，是一种标记语言。大家平日里浏览的各个网站，就需要HTML技术，想要拥有好看美观的网站，就不得不需要HTML的帮助。（HTML有多个版本，目前已发展到HTML5)

1. HTML基础知识

HTML是一种标记语言，但这种语言是比较特殊的叫做超文标记语言，超文本的意思就是不止是文本，还可以包含图片，链接，音乐，甚至程序等非文字元素。

标准的超文本标记语言文件都具有一个基本的整体结构，它的组成结构包括头（Head）和主体（Body），其中“头”部用于提供关于网页的信息，“主体”部分用于提供网页的具体内容。

标记符<html>,说明该文件是使用超文本标记语言来描述的,是该文件的开头，相对的，有头就有尾，</html>,就表示该文件的结尾，它们两个是超文本标记语言文件的开始标记和结尾标记。当我们看到某个文件有这两个标记符就可以判定该文件是由超文本标记语言描述的。不仅如此，“头部”和“主体”也有头尾之分,<Head>为头部开始，</Head>为结束；<Body>为开头</Body>为结束,另外HTML 标签通常是成对出现的

<html>

<head>

<title>name</title>

</head>

<body>

<p>my name is linlin</p>

</body>

</html>

这样一个简单的网页源码的结构就出来了。

注意：写完代码记得将格式保存为.html（推荐使用）、.htm、.xhtml

2. HTML特点

(1)简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

(2)可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标示符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

(3)通用性：虽然个人计算机大行其道，但使用MAC等其他机器的人也不占少数，超级文本标记语言可以在广泛的平台上使用，这也是万维网（WWW）盛行的另一个原因。

(4)平台无关性：另外，HTML是网络的通用语言，简单、通用。它的存在使得网页制作人能够建立文本与图片及其他复杂的页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

3. 常用元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。这里就给大家简单介绍一些常用的元素。

<head> 定义了文档的信息

<title> 定义了文档的标题

<base> 定义了页面链接标签的默认链接地址

<link> 定义了一个文档和外部资源之间的关系

<meta> 定义了HTML文档中的元数据

<script> 定义了客户端的脚本文件

<style> 定义了HTML文档的样式文件

如前文所说HTML是能够帮助你提高网页上限的语言，对于网页的制作，不能仅仅是制作出，还要制作的方便，美观。这样，大家在浏览网页时才会感到舒服，自己也会颇有成就感。希望大家能有所收获。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科