一、环境搭建
- 浏览器 --- 谷歌/火狐/IE/Safari
- 编辑器 --- HBuilder/Sublime/Dw/记事本
二、语言了解
- HTML 超文本标记语言 【基本架构】
语言: 和浏览器沟通的
标记: <文本>
标签对:
单标签:
文本: 显示文本内容
超文本: 显示图片、显示视频、播放音乐....
- CSS 层叠样式表 【搞装修的】
一个人的描述:
身高: 183cm
年龄: 18岁
体重: 70Kg
一个元素的描述:
style="width: 100px; height: 100px; background: red;"
width: 100px; // 属性名: 属性值;
width: 100px; // 宽度为100像素
height: 100px; // 高度为100像素
+ background: red;// 背景为红色
————————————————————————————————————
style="width: 100px; height: 100px; background: red;"
- Javascript 脚本语言【智能化】
// 点击之后要做的事情
onclick="this.style.width='800px';"
this.style.width='800px'; // 自己(this) 的(.) 样式(style) 的(.) 宽度(width) = '800像素'
![](http://upload-images.jianshu.io/upload_images/1801379-93337a73fba0e270.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
三、网页组成
- 内容: 网页要传达的信息即是内容部分;
- 结构: 网页的结构部分(头部、身体、结尾…)
- 表现: 网页样式(每个网页设计的都是不一样的)
- 行为: 网页能够实现交互功能(轮播图、滑动效果、用户与页面的交互..)
四、HTML及相关概念
- HTML指的是超文本标记语言,www万维网的描述性语言,通用标记语言的一个应用;
- XHTML指可扩展超文本标记语言(标识语言),是一种置标语言,表现方式与超文本标记(HTML)类似,不过语法上更加严格;
- HTML5指的是HTML的第五次重大修改(第5个版本);
- H5是一个技术集合,面向于移动端;
五、HTML发展历史
> HTML1.0 在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准);
> HTML2.0 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时;
> HTML3.2 1996年1月14日,W3C推荐标准;
> HTML4.0 1997年12月18日,W3C推荐标准;
> HTML4.01(微小改进)——1999年12月24日,W3C推荐标准;
> XHTML1.0 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布;
> XHTML1.1 2001年5月31日发布,W3C推荐标准;
> XHTML2.0 W3C工作草案;
> XHTML5 从XHTML 1.x的更新版,基于HTML5草案;
> HTML5 第一份正式草案已于2008年1月22日公布;
> HTML5 2014年10月29号万维网联盟宣布经过8年时间,该标准规范制定完成;
【WHATWG(网页超文本应用技术工作小组)是一个以推动网络HTML 5 标准为目的而成立的组织,在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成】
六、HTML基本骨架
- 骨架1(HTML4.01版本IE6开始兼容)
- 标准骨架2(IE9开始兼容)
- 备注
文档声明头
此标签可告知浏览器文档,使用HTML或XHTML规范(注: 现阶段学习的是HTML4.01版本);
字符集(编码类型)
- 中文能够使用的字符集有UTF-8和GB2312(GBK);
- UTF-8是国际通用字库,里面涵盖所有地球上人类语言文字,例如汉语、英语、鸟语…;
- GB2312是国标,是中国的字库,里面仅涵盖了汉字和一些常用外文,例如日文片假名、常见符号…;
- 字库规模: UTF-8(字全) > GB2312(只有汉字);
- 保存大小: UTF-8(更臃肿、加载更慢) > GB2312(更轻巧、加载更快)[UTF-8一个汉字3个字节,而GB2312一个汉字2个字节];
【meta标签即是声明当前html文档的字库,如果类型不一致,则会出现乱码】
注: 使用UTF-8,还是GB2312?
使用哪种字符集要根据实际情况进行选择,例如公司是做日本动漫的,经常会出现日语动漫名字,网页就要使用UTF-8,如果用GB2312将无法显示日语;例如公司就是中文网,极度的追求网页的显示速度,就可以使用GB2312,如果使用UTF-8将每个汉字多一个字节,即5000个汉字就多5KB;
例如qq、网易、搜狐都是使用GB2312,追求显示速度;
例如新华网藏语频道使用的是UTF-8,保证字符集的数量;
注: 什么是字符集?活字印刷术,所有的汉字都有一个小小印章,需要哪个字,就取哪个字。
赵六发明一个字库U,老王发明了一个字库G;
例如同一个汉字“你”,在赵六字库U中是第3个大盘子第3行第24列;在老王字符库G中是第6大盘子第9行第68列。
计算机,不能直接存储汉字,而都是存储的是编码,所以计算机记录“你”字,就这么记录的:
赵六U: 03 03 24 030324你
老王G: 06 09 68 060968你
七、HTML常用标签
1、标记(标签)
标签对: <标记名> 标记名>
单标签: <标记名 />
说明:
1)写在尖角号里的第一个单词,叫做标记,也叫做标签,也称作元素;
2)标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在双引号内
3)一个标记可以有多个属性,属性和属性之间用空格隔开,属性与属性间不分先后顺序;
4)空标记是指没有结束标签的标记,必须使用"/" 关闭
2、HTML注释方式
语法:
例如:
3、标题字体
语法:
标题内容 [其中#是1~6]
例如:
一级标题
二级标题
二级标题
二级标题
二级标题
六级标题
4、段落
语法:
段落文本内容(段落与段落之间有间距)
注:
空格符号(所占的位置没有确定值,这和当前字体有关):
例如:
我是段落内容
5、加粗
语法1:
加粗内容
语法2:
加粗内容
例如:
学习HTML的感想...
6、倾斜
语法1:
倾斜内容
语法2:
倾斜内容
例如:
今天是星期四,明天就是 星期五啦!!! 想想明天放假我都开心,然后我可以睡个懒觉、玩玩游戏、撩撩妹...
7、文本加下划线
语法:
文本加下划线
例如:
我就是文本文本加下划线
8、标记文本上标
语法:
文本上标
例如:
23 = 8
9、标记文本下标
语法:
文本下标
例如:
H2O
10、换行
语法:
备注: 换行是一个空标记,是强制换行
11、水平线
语法:
备注: 空标记
12、列表
> 无序列表(unordered list):
- 无序列表1
- 无序列表2
> 有序列表(ordered list):
- 有序列表
- 有序列表
注: 扩展(有序列表的属性):
语法:
type属性: 规定列表中的列表项的符号类型
start属性: 规定有序列表是从第几个开始(默认从1开始)
'1' 数字的有序列表(默认值)
'a' 小写字母的有序列表
'A' 大写字母的有序列表
'i' 罗马数字,小写
'I' 罗马数字,大写
> 自定义列表(definition list):
- 名词
- 解释/定义描述
13、图片
语法:
title的作用: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的,图片标题;
alt的作用: 在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方做为图片替换文本;
例如:
备注:
需要插入的图片必须放在站点下;
路径问题:
./ 当前目录(可以忽略不写)
../ 上级目录
../../ 上上级目录
14、超链接
语法1:
空链接(当前)
语法2:
href: 链接地址后边跟的是链接页面的路径(包含文件名);
title: 加入这个属性后,当鼠标移动到热点时,则在鼠标下方显示title的内容;
target: 参数定义了打开链接的目标窗口,即控制打开方式;
_blank: 在新窗口中打开链接 页面(会保留原窗口)
_self: 在当前窗体打开链接页面,此为默认值
例如:
首页
15、div和span
语法:
例如:
你好啊?
备注:
没有具体含义,统称为块标签,
用来设置文档区域,是文档布局常用对象
语法:
例如:
hello world!
备注:
文本结点标签
可以是某一小段文本,或是某一个字
16、表格
表格:
行: 行
单元格(列): 单元格
1)width="表格的宽度"
2)height="表格的高度"
3)border="表格的边框"
4)bordercolor="边框色"
5) bgcolor="背景颜色"
6)cellspacing="单元格与单元格之间的间距"
7)cellpadding="单元格与内容之间的空隙"
8)align="表格对齐方式" 取值:left、right、center(备注: 如果是table中的属性是整个表格相对于浏览器的对齐方式,如果是td即是文本内容相对单元格的对齐方式)
valign="垂直对齐" top\bottom\middle (备注: 只能用于tr/td)
9)background=“路径” 背景
10)合并单元格属性:
合并列: colspan=“所要合并的单元格的列数"
合并行: rowspan=“所要合并单元格的行数”
例如:
单元格"合并列"
17、表单控件
- 表单框(表单域)
语法:
属性描述:
name: 表单框的名字
method: 请求方式
action: 提交到url
- 文本框
- 密码框
- 提交按钮
备注: value是必备的,即是按钮要有按钮名才行
- 重置按钮
备注: 重置,即是输入框删除输入内容
- 单选框/单选按钮
男
女
中性
备注:
name: 必须写,而且同一组单选按钮的name属性值必须是一致的;
checked: 可以设置默认选择(checked="checked"默认即是选中);
disabled: 是否可用(disabled="disabled"即禁用),默认是可用;
- 复选框(即可以多选的)
吃饭
睡觉
玩游戏
打豆豆
备注:
name: 可以不写,不影响复选,但是同一组的最好还是要添加一致的名字;
checked: 可以设置默认选择(checked="checked"默认即是选中);
disabled: 是否可用(disabled="disabled"即禁用),默认是可用;
- 下拉菜单
- 多行文本框(文本域)
rows: 设置文本输入窗口的高度
cols: 设置文本输入窗口的宽度
- 按钮
和submit的区别是 ,submit是提交按钮 起到提交信息的作用,button只起到跳转的作用,不进行提交
作者:西门奄
链接:https://www.jianshu.com/u/77035eb804c3
來源:
著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。