HTML+CSS基础(HTML篇)

引言

在日常开发Android中，很多时候会遇到和WebView打交道，对CSS HTML JS不是很清楚的话是完不成一些功能的，本篇开始学习HTML，文章的主要内容是总结了慕课网中，HTML+CSS基础课程中笔记的总结。

1、了解HTML、CSS、JavaScript

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

认识html文件基本结构

这一节中我们来学习html文件的结构：一个HTML文件是有自己固定的结构的。

    ...
    ...

代码讲解：

1. 称为根标签，所有的网页标签都在中。
2. 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有

   标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
   例如：

   1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。

   菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。

   2.5 标签，短文本引用

   想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么标签是你所需要的。
   语法：
   引用文本
   如下面例子：

   最初知道庄子，是从一首诗
   庄生晓梦迷蝴蝶。望帝春心托杜鹃.
   开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。
   后来才明白这个典故出自是庄子的《逍遥游》，
   《逍遥游》代表了庄子思想的最高境界，
   是对世俗社会的功名利禄及自己的舍弃。
   

   讲解：

   1. 在上面的例子中，“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌，出自晚唐诗人李商隐的《锦瑟》 。因为不是作者自己的文字，所以需要使用实现引用。
   2. 注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

   2.6

   标签，长文本引用

   的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。
   等等，上一节标签不是也是对文本的引用吗？不要忘记标签是对简短文本的引用，比如说引用一句话就用到标签。
   如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用

   。

   语法:
   

   引用文本

   2.7 使用
标签分行显示文本

   与以前我们学过的标签不一样，
标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有
、

   ---

   和。
   在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入
。
   语法：
   xhtml1.0写法：
   

   html4.01写法：
   


   2.8为你的网页中添加一些空格

   在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入。 注意，后面一定要有分号才行。

   2.9认识

   ---

   标签，添加水平横线

   在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。

   

   语法：

   html4.01版本

   ---

   
   xhtml1.0版本

   ---

   注意：

   1. ---

      标签和
      标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

   2. ---

      标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
   3. 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。

   2.10

   标签，为网页加入地址信息

   一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以

   标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。

   语法：
   

   联系地址信息

   2.11 想加入一行代码吗？使用标签

   在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用标签了，如下面例子：
var i=i+300;
注意：在文章中一般如果要插入多行代码时不能使用标签了。

   语法：
   代码语言
   注：如果是多行代码，可以使用

   标签。
    
    
   2.11使用
   标签为你的网页加入大段代码
    
    
   语法：
    
   语言代码段
    
    标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
    如下代码：
    
    var message="欢迎"; for(var i=1;i<=10;i++) { alert(message); }
    在浏览器中的显示结果为：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    在上面的例子中可以看到代码中的空格，换行符都保留下来。如果用以前的方法，回车需要输入 
    
   签，空格需要输入 
     ; 
    
    
    
   注意：
    
   标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是
   标签的一个常见应用就是用来展示计算机的源代码。
    
    
    
    
    
    
    
   2.12 使用ul，添加新闻信息列表
    
    
   语法：
    
    
    
     
   [信息]
    
     
   [信息]
    
   ....
   
    
    
   举例：
    
    
    
     
   [精彩少年]
    
     
   [美丽突然出现]
     
   [触动心灵的旋律]
   
    
    
   ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示：
    
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
   2.13 使用ol，添加图书销售排行榜 (ordered list)
    
    
   如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用
   标签来制作有序列表来展示。
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    
   语法：
    
    
   
      
   [信息]
      
   [信息]
    
   ......
   
    
    
   举例：
    下面是一个热点课程下载排行榜：
    
    
    
   前端开发面试心法 
    
   [零基础学习html]
    
   JavaScript全攻略
   
   
    
    
   在网页中显示的默认样式一般为：每项
   
    前都自带一个序号，序号默认从1开始，如下图所示：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    
   2.14 认识div在排版中的作用
    
    
   在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个
   
    标签中，这个
   标签的作用就相当于一个容器。
    语法：
    
   …
    
    
   确定逻辑部分：
    什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用
   
    标签作为容器。
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    给div命名，使逻辑更加清晰 
    
    
    
   语法：
    
   …
    
    
   为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id
    属性来为
   
    提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
    如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    
   2.15 table标签，认识网页上的表格
    
    
   有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    想在网页上展示上述表格效果可以使用以下代码： 
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    创建表格的四个元素： 
    
    table、tbody、tr、th、td 
    
    1、…：整个表格以
    标记开始、 
    
    标记结束。 
    
    2、…：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。） 
    
    3、…：表格的一行，所以有几对tr 表格就有几行。 
    
    4、…：表格的一个单元格，一行中包含几对... 
    
    ，说明一行中就有几列。 
    
    tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。 
    
    td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。 
    
    5、…：表格的头部的一个单元格， 
    表格表头。 
    
    6、表格中列的个数，取决于一行中数据单元格的个数。 
    
    
    
   上述代码在浏览器中显示的默认的样式为：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    总结： 
    
    1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的 
    
    2、表头，也就是th标签中的文本默认为 
    粗体并且 
    居中显示 
    
    
    
   2.16 用css样式，为表格加入边框
    
    
   Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。
    在右侧代码编辑器中添加如下代码：
    
    
   
    
    
   上述代码是用 css 样式代码（后面章节会详细讲解），为th
    ，t单元格添加粗细为一个像素的黑色边框。
    结果窗口显示出结果样式：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    
   2.17 caption标签，为表格添加标题和摘要
    表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    摘要 
    
    摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 
    
    
    语法：
   标题
    用以描述表格内容，标题的显示位置：表格上方。 
    
   语法：
    … …
    
    
   ****标题文本
    
    
   …
    
   …
    
    
    
    
   2.18 使用标签，链接到另一个页面
    
    
   href：Hypertext Reference的缩写。意思是超文本引用。
    使用标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
    
    
   语法：
    链接显示的文本
    例如：
    click here!
    上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。
    
    
   title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如右侧案例代码（8-12行）。
    
    
   注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000}),后面会详细讲解。
    
    
   在新建浏览器窗口中打开链接
    标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
    
    
   如下代码：
    click here!
    target之前一定要加空格！
    扩展：
    _blank -- 在新窗口中打开链接
    _parent -- 在父窗体中打开链接
    _self -- 在当前窗体打开链接,此为默认值
    _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
    
    
   2.19 使用mailto在网页中链接Email地址
    
    
   标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto
    做许多其它事情。下面一一进行讲解，请看详细图示：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    注意：如果mailto后面同时有多个参数的话，第一个参数必须以“? 
    
    ”开头，后面的参数每一个都以“& 
    
    ”分隔。 
    
    下面是一个完整的实例: 
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    在浏览器中显示的结果： 
    
    发送 
    
    点击链接会打开电子邮件应用，并自动填写收件人等设置好的信息，如下图： 
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    举个栗子： 
    
    1、发送人邮箱地址： [email protected]。 
    
    2、邮件主题：观了不起的盖茨比有感。 
    
    3、邮件内容：你好，对此评论有些想法。 
    
    
    
   
   对此影评有何感想，发送邮件给我
    
    
   2.20 认识标签，为网页插入图片
    
    
   在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用标签来插入图片。
    语法：
    
    
    
    
     
     
    
    
    
    
    
    
   举例：
    
    
    
   讲解：
    
    
    
     
   src：标识图像的位置；
    
     
   alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
    
     
   title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
    
     
   图像可以是GIF，PNG，JPEG格式的图像文件。
    
    
    
    
   3 与浏览者交互，表单标签
    
    
   3.1使用表单标签，与用户交互
    
    
   网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
    
    
   语法：
    
   
    讲解：
    1. ：标签是成对出现的，以开始，以
   结束。
    2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
    3.method ： 数据传送的方式（get/post）。
    
    
   
           用户名:
           
           密码:
           
   
    
    
   注意:
    1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 
    标签之间（否则用户输入的信息可提交不到服务器上哦！）。
    2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki，里面有详细介绍。
    扩展：
    hidden 定义隐藏输入字段
    image 定义图像作为提交按钮
    number 定义带有 spinner 控件的数字字段
    password 定义密码字段。字段中的字符会被遮蔽
    radio 定义单选按钮
    range 定义带有 slider 控件的数字字段
    reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值
    search 定义用于搜索的文本字段
    submit 定义提交按钮。提交按钮向服务器发送数据
    text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符
    url 定义用于 URL 的文本字段
    
    
   文本输入框、密码输入框
    当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
    语法：
    
    
    1、type：
    当type="text"时，输入框为文本输入框
    当type="password"时, 输入框为密码输入框
    2、name：
    为文本框命名，以备后台程序ASP 、PHP使用。
    3、value：
    为文本输入框设置默认值。(一般起到提示作用)
    举例：
    
    
    
     姓名：  
   
     密码： 
   
    
    
   在浏览器中显示的结果：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    3.2 文本域，支持多行文本输入 
    
    
    
    
    
   当用户需要在表单中输入大段文字时，需要用到文本输入域。
    语法：
    
    
   文本
   
    
    
   1 </code>标签是成对出现的，以<code><textarea></code>开始，以<code>结束。
    2、cols ：
    多行输入域的列数。
    3、rows ：
    多行输入域的行数。
    4、在标签之间可以输入默认值。
    
    
   举例：
    
    
   
   
   联系我们
   在这里输入内容...
   
   
    
    
   在浏览器中显示结果：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    
   3.3 使用单选框、复选框，让用户选择
    
    
   在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
    语法：
    
    1、type:
    当 type="radio" 时，控件为单选框
    当 type="checkbox" 时，控件为复选框
    2、value：提交数据到服务器的值（后台程序PHP使用）
    3、name：为控件命名，以备后台程序 ASP、PHP 使用
    注意：为单选框的时候，name一定要名字相同才行
    4、checked：当设置 checked="checked" 时，该选项被默认选中
    如下面代码：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    在浏览器中显示的结果： 
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    注意 
    :同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。 
    
    
    
   3.4 使用下拉列表框，节省空间
    
    
   下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    讲解： 
    
    
    1、value： 
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    2、 
    selected="selected"： 
    
    设置 
    selected="selected"属性，则该选项就被默认选中。 
    
    在浏览器中显示的结果： 
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    
   3.5 使用下拉列表框进行多选
    
    
   下拉列表也可以进行多选操作，在标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。如下代码：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    在浏览器中显示的结果： 
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    
   3.6 使用提交按钮，提交数据
    
    
   在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。
    
    
   语法：
    
    type：只有当type值设置为submit时，按钮才有提交作用
    value：按钮上显示的文字
    举例：
    
    
    
    
     
    
      
    
        
      
    
     
    
      
      
    
    
    
    
    在浏览器中显示的结果： 
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    
    
   3.7 使用重置按钮，重置表单信息
    
    
   当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
    语法：
    
    type：只有当type值设置为reset时，按钮才有重置作用
    value：按钮上显示的文字
    举例：
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    在浏览器中显示的结果： 
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    输入账号 
    
    
    
    
     
    
      
    
        
      
    
     
    
     
    
    
    
    
    单击重置按钮 
    
    
    
   3.8 form表单中的label标签
    
    
   label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
    语法：
    
    注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
    例子：
    
    
   
     男
     
     
   
     女
     
     输入你的邮箱地址
     
   
    
    
   最后
    
    
   至此HTML基础部分就已经完毕了，接下来分析CSS层叠样式表 (Cascading Style Sheets)