HTML CSS JavaScript基础-优快云博客

转自 https://www.cnblogs.com/xiaodongge/p/6056633.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方法实现各种功能，比如：导航栏，轮播图片等。

　table标签

创建表格的四个元素：

table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

总结：

1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

2、表头，也就是th标签中的文本默认为粗体并且居中显示

　　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方法比较熟悉，因为如果你都不熟悉，那你怎么知道有哪些方法可以实现这个动作呢？