HTML新手小白快速入门分享

　　学习目标：了解HTML并搭建简单的基础静态网页

 

　　学习

 

　　一、什么是HTML：HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

 

　　超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

 

　　二、HTML由哪些部分组成：html>…/html>、head> … /head>及body>… /body>。

 

　　学习时间：

 

　　1、 周一至周五晚上 9 点—晚上5点

 

　　2、 周六上午 10点-上午 12 点

 

　　3、 周日下午 4点-下午 5点

 

　　学习产出：

 

　　1、CSDN原创博客一篇

 

　　2、学习笔记8张

 

　　主要学习内容如下：

 

　　HTML常用的文本标签有

 

　　h>（主题标签，默认加粗效果，范围1-6，从大到小，超过了则标签失效）

 

　　p>段落标签（块级元素，独占一行）

 

　　hr>分割线标签（单标签）

 

　　pre>预格式化标签（所有的文字都会进行原样输出）

 

　　rudy>及rt> 上方注释标签（中间用空格隔开，注音和文字意义对应）

 

　　rudy> 写中文

 

　　rt> 写注音

 

　　sup>上方后缀标签 sub>下方后缀标签

 

　　b>字体加粗 i>字体倾斜 u>下划线 s>删除标签

 

　　实体标签：

 

　　a>（超链接标签）两种用法：1、普通链接：使用属性href进行跳转 2、锚链接：给要跳转的位置添加一个id，在当前的a标签里面的href属性里面通过#id名进行跳转

 

　　两个属性：1、href 链接地址 2、target 跳转方式（默认是’_self’ 若是‘_blank’就跳转到一个新页面）

 

　　img>图片标签 img 元素向网页中嵌入一幅图像。

 

　　请注意，从技术上讲，img> 标签并不会在网页中插入图像，而是从网页上链接图像。img> 标签创建的是被引用图像的占位空间。

 

　　img> 标签有两个必需的属性：src 属性（图片的地址） 和 alt 属性（图片加载失败之后显示的文字）。

 

　　其他还有width属性（图片宽）和height属性（图片高）等属性。

 

　　font>（文字标签）*注：该标签已被css样式表取代，现不常用。

 

　　该标签 规定文本的字体、字体尺寸、字体颜色。

 

　　用法如图：

 

　　列表标签：有序（ol）、无序（ul）和自定义列表（dl）

 

　　有序列表用法：

 

　　效果为：

 

　　*注：start 从什么开始的顺序；reversed 从什么开始的倒序。

 

　　无序列表用法：

 

　　效果为：

 

　　*注：无序列表有type属性，dics（默认实心圆），circle（空心圆），square（方块）。

 

　　自定义列表用法：

 

　　效果为：

 

　　定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 

　　table>（表格标签）简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

 

　　tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

 

　　可选元素：table>标签用法：

 

　　效果为：

 

　　form> 标签用于为用户输入创建 HTML 表单。包含action属性（设置提交表单的地址）和metho属性（设置表单提交方式，两种方式：get、post）。

 

　　表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

 

　　表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

 

　　表单用于向服务器传输数据。

 

　　input> 标签（单标签）用于搜集用户信息。

 

　　根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

 

　　textarea>（文本域标签），文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

 

　　select>（下拉菜单标签），可创建单选或多选菜单。该标签option> 标签用于定义列表中的可用选项。

 

　　button>（按钮标签），button> 控件 与 input type=“button”> 相比，提供了更为强大的功能和更丰富的内容。button> 与 /button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。

 

　　**重要事项：**如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 button> 与 /button> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

 

　　iframe>（浮动框架标签），该标签会创建包含另外一个文档的内联框架（即行内框架）。

 

　　link>（链接外部资源标签–单标签） 标签定义文档与外部资源的关系。

 

　　link> 标签最常见的用途是链接样式表。

 

　　**注意：**link 元素是空元素，它仅包含属性。

 

　　此元素只能存在于 head 部分，不过它可出现任何次数。

 

　　div> 是一个块级元素。这意味着它的内容自动地开始一个新行，可定义文档中的分区或节（division/section）。div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div>，那么该标签的作用会变得更加有效。

 

　　span> 标签被用来组合文档中的行内元素。