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