HTML和CSS是在一起学的
但是！两个内容都很多，我就各写一篇了，今天先出品HTML
!前言!
请教了码农学弟！入手两款编译器
* sublime 据说功能很强大，配置一下基本所有语言都能编，但我觉得不适合小白，因为没有提示！！！纯手工敲键盘！！！而且不能同步出厂效果！！！
* HBuilder 强推！！！和慕课网的效果差不多，有提示，有同步画面效果，可以边敲边看
！课程链接！
这几个是小白学习时参考的教程，体系比较完善，结合慕课和菜鸟，小白就自己鼓捣了教程，其实也基本就是复制黏贴（寄刀片）~~~
第一章 HTML基础知识
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3.标签的语法
（1）标签由英文尖括号"<"和">"括起来
（2）标签一般都成对出现，分开始标签和结束标签，结束标签比开始标签多了一个/
（3）标签与标签之间可以嵌套，但先后顺序必须保持一致
（4）标签不区分大小写，但建议小写
4.HTML文件基本结构
一个HTML文件有自己的固定结构
HTML小白教程
（1）<html></html>称为根标签。所有网页标签都在其中
（2）<head>标签用于定义文档头部，是所有头部元素的容器，头部元素有<title><script><link><meta>等
（3）<body>标签间的内容是网页的主要内容，如<hx><p><a><img>等，会在浏览器中显示出来
5.认识<head>标签
文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在<head>部分
HTML小白教程
6.认识<body>标签
<body>标签定义了HTML文档的主体，包含全部页面内容，在网页上要展示出来的页面内容一定要放在<body>标签中
7.HTML的代码注释
代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
第二章 HTML基础元素
1.HTML标题
HTML 标题是通过 <h1> - <h6> 等标签进行定义的。共有六个，依据重要性递减。
HTML小白教程
2.HTML段落
HTML 段落是通过 <p> 标签进行定义的
HTML小白教程
3.HTML链接
HTML 链接是通过 <a> 标签进行定义的
HTML小白教程
4.HTML图像
HTML 图像是通过 <img> 标签进行定义的
HTML小白教程
5.HTML表格
HTML表格是通过<table>标签进行定义的
HTML小白教程
注：表格的边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：
HTML小白教程
6.HTML列表
HTML支持无序、有序和定义列表
（1）无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。
HTML小白教程
（2）有序列表
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
HTML小白教程
（3）定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
HTML小白教程
第三章 HTML样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
1.外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
HTML小白教程
2.内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表 。
HTML小白教程
3.内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
HTML小白教程
HTML小白教程
HTML的style属性：提供了一种改变所有 HTML 元素的样式的通用方法
（1）背景颜色
background-color 属性为元素定义了背景颜色：
HTML小白教程
（2）字体、颜色、尺寸 font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
HTML小白教程
（3）文本对齐
text-align 属性规定了元素中文本的水平对齐方式：
HTML小白教程
第四章 HTML格式化
1.文本格式化标签
HTML小白教程
2.计算机输出标签
HTML小白教程
3.引用
HTML小白教程
第五章 表单标签
网站使用HTML表单(form)与用户进行交互。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
HTML小白教程
* <form> ：<form>标签是成对出现的，以<form>开始，以</form>结束
* action：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
* method：数据传送的方式（get/post）
HTML小白教程
注：所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间
1.文本输入框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可转化为密码输入框。
HTML小白教程
* type：当type="text"时，输入框为文本输入框
当type="password"时，输入框为密码输入框
* name：为文本框命名，以备后台程序ASP 、PHP使用
* value：为文本输入框设置默认值(一般起到提示作用)
HTML小白教程
2.文本输入域 当用户需要在表单中输入大段文字时，需要用到文本输入域
HTML小白教程
* <textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束
* cols：多行输入域的列数
* rows：多行输入域的行数
* 在<textarea></textarea>标签之间可以输入默认值
HTML小白教程
3.单选框、复选框
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，HTML中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
HTML小白教程
* type：当type="radio"时，控件为单选框
当type="checkbox"时，控件为复选框
* value：提交数据到服务器的值（后台程序PHP使用）
* name：为控件命名，以备后台程序 ASP、PHP 使用
* checked：当设置 checked="checked" 时，该选项被默认选中
4.下拉列表框
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选（1）单选
HTML小白教程
* value：<option value='提交值'>选项</option>
* selected="selected"：设置该属性，则该选项就被默认选中
（2）多选在<select>标签中设置multiple="multiple"属性，就可实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用Command+单击），可以选择多个选项。
HTML小白教程
5.提交按钮
HTML小白教程
* type：只有当type值设置为submit时，按钮才有提交作用
* value：按钮上显示的文字
HTML小白教程
6.重置按钮
当用户需要重置表单信息到初始时的状态时， 可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以
HTML小白教程
* type：只有当type值设置为reset时，按钮才有重置作用
* value：按钮上显示的文字
HTML小白教程
7.form表单中的label标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
HTML小白教程
注：标签的for 属性中的值应当与相关控件的id 属性值一定要相同。
OVER.GOOD NIGHT.
网友评论