HTML小白教程

HTML和CSS是在一起学的

但是!两个内容都很多,我就各写一篇了,今天先出品HTML


!前言!

请教了码农学弟!入手两款编译器

* sublime    据说功能很强大,配置一下基本所有语言都能编,但我觉得不适合小白,因为没有提示!!!纯手工敲键盘!!!而且不能同步出厂效果!!!

* HBuilder    强推!!!和慕课网的效果差不多,有提示,有同步画面效果,可以边敲边看


!课程链接!

慕课网课程HTML+CSS

菜鸟教程HTML

菜鸟教程CSS

这几个是小白学习时参考的教程,体系比较完善,结合慕课和菜鸟,小白就自己鼓捣了教程,其实也基本就是复制黏贴(寄刀片)~~~


第一章  HTML基础知识

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


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


3.标签的语法

(1)标签由英文尖括号"<"和">"括起来

(2)标签一般都成对出现,分开始标签和结束标签,结束标签比开始标签多了一个/

(3)标签与标签之间可以嵌套,但先后顺序必须保持一致

(4)标签不区分大小写,但建议小写


4.HTML文件基本结构

一个HTML文件有自己的固定结构

图片发自简书App

(1)<html></html>称为根标签。所有网页标签都在其中

(2)<head>标签用于定义文档头部,是所有头部元素的容器,头部元素有<title><script><link><meta>等

(3)<body>标签间的内容是网页的主要内容,如<hx><p><a><img>等,会在浏览器中显示出来

5.认识<head>标签

文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在<head>部分

图片发自简书App

6.认识<body>标签

<body>标签定义了HTML文档的主体,包含全部页面内容,在网页上要展示出来的页面内容一定要放在<body>标签中

7.HTML的代码注释

代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。



第二章  HTML基础元素

1.HTML标题

HTML 标题是通过 <h1> - <h6> 等标签进行定义的。共有六个,依据重要性递减。

图片发自简书App

2.HTML段落

HTML 段落是通过 <p> 标签进行定义的

图片发自简书App
3.HTML链接

HTML 链接是通过 <a> 标签进行定义的

图片发自简书App
4.HTML图像

HTML 图像是通过 <img> 标签进行定义的

图片发自简书App
5.HTML表格

HTML表格是通过<table>标签进行定义的

图片发自简书App
注:表格的边框属性

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。使用边框属性来显示一个带有边框的表格:

图片发自简书App
6.HTML列表

HTML支持无序、有序和定义列表

(1)无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。
图片发自简书App
(2)有序列表

有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

图片发自简书App
(3)定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

图片发自简书App

第三章  HTML样式

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

1.外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

图片发自简书App

2.内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表 。

图片发自简书App

3.内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

图片发自简书App
图片发自简书App

HTML的style属性:提供了一种改变所有 HTML 元素的样式的通用方法

(1)背景颜色

background-color 属性为元素定义了背景颜色:

图片发自简书App
(2)字体、颜色、尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:
图片发自简书App

(3)文本对齐

text-align 属性规定了元素中文本的水平对齐方式:

图片发自简书App

第四章  HTML格式化

1.文本格式化标签

图片发自简书App
2.计算机输出标签
图片发自简书App
3.引用
图片发自简书App

第五章  表单标签

网站使用HTML表单(form)与用户进行交互。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

图片发自简书App

* <form> :<form>标签是成对出现的,以<form>开始,以</form>结束 

* action:浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)

* method:数据传送的方式(get/post)

图片发自简书App

注:所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间

1.文本输入框

当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可转化为密码输入框。
图片发自简书App

* type:当type="text"时,输入框为文本输入框

              当type="password"时,输入框为密码输入框

* name:为文本框命名,以备后台程序ASP 、PHP使用

* value:为文本输入框设置默认值(一般起到提示作用) 

图片发自简书App
2.文本输入域

当用户需要在表单中输入大段文字时,需要用到文本输入域 
图片发自简书App

* <textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束 

* cols:多行输入域的列数

* rows:多行输入域的行数

* 在<textarea></textarea>标签之间可以输入默认值

图片发自简书App

3.单选框、复选框

在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,HTML中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。

图片发自简书App

* type:当type="radio"时,控件为单选框

              当type="checkbox"时,控件为复选框

* value:提交数据到服务器的值(后台程序PHP使用)

* name:为控件命名,以备后台程序 ASP、PHP 使用

* checked:当设置 checked="checked" 时,该选项被默认选中


4.下拉列表框

下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选

(1)单选 

图片发自简书App

* value:<option value='提交值'>选项</option>

* selected="selected":设置该属性,则该选项就被默认选中

(2)多选

在<select>标签中设置multiple="multiple"属性,就可实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用Command+单击),可以选择多个选项。

图片发自简书App
5.提交按钮
图片发自简书App

* type:只有当type值设置为submit时,按钮才有提交作用

* value:按钮上显示的文字

图片发自简书App
6.重置按钮

当用户需要重置表单信息到初始时的状态时, 可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以 

图片发自简书App

* type:只有当type值设置为reset时,按钮才有重置作用

* value:按钮上显示的文字

图片发自简书App
7.form表单中的label标签

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

图片发自简书App

注:标签的for 属性中的值应当与相关控件的id 属性值一定要相同。

OVER.GOOD NIGHT.
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,980评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,422评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,130评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,553评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,408评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,326评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,720评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,373评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,678评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,722评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,486评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,335评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,738评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,283评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,692评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,893评论 2 335

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,210评论 1 41
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,792评论 0 0
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,092评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,709评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,347评论 1 45