1 HTML简介
HTML:超文本标记语言(hypertext markup language);
由浏览器直接解析执行(没有编译过程);
超文本:音频、视频、图片都成为超文本;
标记:<英文单词或者字母>称为标记。html页面都由标记组成;
2 HTML网络术语
网页:由各个标记组成的页面;
主页:一个网站的其实页面或者导航界面;
标记:也称标签。
<h1>开始标签,</h1>结束标签;每个标签都有规定好的含义;
元素:<h1>内容</h1>,称为元素;
属性:给每一个标签做的辅助信息;
XHTML:符合XML语法标准的HTML;
DHTML :dynamic动态的。html+css+js合起来的页面就是DHTML;
HTTP : 协议标准。用来规定客户端浏览器和服务器交互时及数据的一个格式。SMTP:邮件传输协议;FTP:文件传输协议;
3 HTML编辑工具
notepad: 记事本 editplus : 语法高亮显示;技巧:根据颜色判断单词是否出错(不是100%);
ultraedit : 根据颜色判断单词是否出错,可以显示二进制数据;
dreamweaver : 专业工具,代码提示;
4 HTML规范
HTML : 弱势语言;不区分大小写;后缀名是html或htm(一些系统不知后缀名超过3个字符,比如dos系统);
HTML结构:
1) 声明部分:用来告诉浏览器整个页面使用的是哪个标准; <!doctype html>是HTML5标准;
2) head部分 : 不会显示在页面上;是告诉浏览器一些页面的额外信息;
3) body部分 : 所写的代码必须放在此标签内;
5 HTML的各个标签
每个标签都有私有属性,也有公共属性;
html中表示长度的单位都是像素;html只有一种单位就是像素;
body: bgcolor:背景颜色; background : 背景颜色; text: 文本颜色;
a、排版标签
所有的浏览器默认情况下都会忽略空格和空行;
<p>:代表一个段落 属性:align:对齐方式;值:left ightcenter;
<br> : 换行;
<hr> : 分割线 color:闲的颜色;size:线的粗细;线的长短(两种写法:1 绝对值 eg:500 ;2 相对值:50%);
noshade :不要阴影; align:对齐方式;值:left ightcenter; center:内容居中;
<pre>:预定义格式标签,告诉浏览器不要忽略空格和空行;
<div>:块级标签,必须单独占据一行,属性:align; <span>: 行内标签,不换行字体标记;
b、字体标签
<h1~h6>:定义字体的大小,属性:align:居中;
font : color:字体颜色;三种写法:1 英文单词:red;2 十六进制:#00ffcc; 3 RGB(三原色):new RGB(124,156,23); size:字体大小; face:字体类型;
特殊字符:<小于 >大于 &&符号 "双引号 ' 单引号 ©版权 ™商标 空格
<b>:加粗;
<strong>:加粗;
<i> : 斜体;
<em>:斜体;
<u>:下划线;
<s>:中划线(删除线)/<del>(删除线);
<sup>: 上标;
<sub>:下标;
c 图像标记
img:代表一副图片
属性:src:图片的路径;
相对路径:相对于页面所在的路径,标记是: . /和 ../ ,分别代表当前目录和父目录;
绝对路径:1):从盘符开始:C:Documents SettingsAdministrator桌面images1.jpg
2):网络路径:https://www.baidu.com
width:宽度
height:高度
alt:当图片显示不出来代替图片的内容
title : 提示性文本
border : 边框
热点:特定的位置添加超链接
<img src="images/1.png" width="300" height="300" useMap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="circle" coords="122,81,38" href="www.baidu.com" />
</map>
解析:<img> 标签中的 usemap 属性与 map 元素中的 name 相关联,以创建图像与映射之间的关系;
<area> 标签定义图像映射内部的区域;shape:规定区域的形状、circle(圆圈)、coords: 规定区域的坐标 href:规定的目标URL;
d、清单标记
列表标签:3种
无序列表:ul
属性:type 值:disc(默认,实心远点)、square(实心方点)、circle(空心圆);
有序列表:ol
属性:type 取值:1(默认阿拉伯数字); start:从即开始
定义列表 : dl
dt:列表项标题
dd: 列表项
e、超链接(3种)
1、链接到其他页面
2、锚:给超链接起的一个名字,作用:连接到本页面或其他页面的特定位置;使用name属性给超链接起名字;
3、链接到博客<a href="http://www.cnblogs.com">进入博客</a>
属性:target:告诉浏览器怎么显示目标页面
html中定义4个值:
_self : 在同一个浏览器中显示;
_blank : 打开新的浏览器显示;
_parent : 在父窗口中显示;
_top : 在顶级窗口中显示;
f、 表格标记
table:表格
属性:border:边框
width:宽度
height:高度
align:表格的对齐方式
cellpadding:单元格内容到边的距离
cellspacing:单元格和单元格之间的距离
bgcolor:背景颜色
background:背景图片
bordercolorlight:表格的上,左边边框,以及单元格的右,下边框的颜色
bordercolordark : 表格的右,下边框,以及单元格上,左的边框的颜色
dir:单元格内容的排列方式 取值:ltr 从左到右,rtl:从右到左
caption : 表格标题
tr:行 属性:dir 取值:ltr 从左到右,rtl:从右到左
td:单元格 属性:align:内容的横向对齐方式
valign:内容的纵向对齐方式 top/middle/botton
绝对值或者相对值(%)
height:单元格的高度
单元格的合并:
属性: colspan:横向合并
rowspan:纵向合并
th:相当于<td> + <b>,属性同<td>;
属性:align:取值:left/center/right/top/bottom
thead tbody tfoot
写与不写的区别:
1 当表格大的时候,不写,则必须等表格内容下载完才显示;如果是tbody标签,则边下载边显示;
2 tbody、tfoot那么浏览器解析内容时是从上到下解析;写了,则顺序任意,浏览器的解析还是按照 thead、tbody、tfoot顺序显示内容;
g、框架标记及<iframe>
框架页面上不允许有body标签
frameset:框架的集合(html5不支持)
rows:纵向分部框架
cols:横向分部框架 写法:1 绝对值 "200,*" *表示剩余的; 2 相对值 "30%,*"
frame : 框架.一个框架显示一个页面(html5不支持)
scrolling:是否需要滚动条。默认为true;
noresize:固定框架大小
bordercolor : 给框架边框起一个颜色
frameborder:边窗边框
name : 给框架起一个名字
src :窗口中的目标URL
内嵌框架:嵌入在一个页面上的框架(仅仅IE支持)
iframe:属性:width/height/scrolling:是否需要滚动条。默认为true;
h、多媒体标记
bgsound : 背景音乐
embed:播放多媒体文件
属性:src 目标文件路径
autostart 自动播放 值:true/false
volume :0 ~100,规定音量的大小,不写则有系统默认音量;
marquee:移动
属性:direction 移动目标方向 left/right/up/down/, down移动距离是固定的200px;
behavior : 行为方式 取值:slide 只滚动一次,alternate 来回滚动,scroll 单方向循环滚动
scrollamount:移动速度
loop : 循环多少圈;负值为无线循环
scrolldelay : 移动一次休息多长时间;单位为毫秒;
i、头标记
head :定义文档的信息
title : 定义浏览器工具栏的标题
base: 定义页面上所有链接的默认地址或默认目标
link :定义文档与外部资源之间的关系;常用于连接样式表
meta:定义关于HTML文档的元数据;用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据;
script:定义客户端脚本,比如JavaScript;
style:定义文档的样式信息
例: <head>
<title>html页面</title>
<meta charset="UTF-8"><!--设置当前页码的编码用UTF-8-->
<meta name="keywords" content="HTML, CSS, XML" />
<base href="http://www.w3school.com.cn/images/" target="_blank" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style tyep="text/css>
body{
p{color : blue}
</style>
</head>
link :链接颜色
alink : 鼠标按下时的颜色
vlink : 访问过链接后的颜色
leftmargin : 左外边距
topmargin:上外边距
<body link = "red" alink = "blue" vlink = "yellow" leftmargin = "0" topmargin = "0">
j、表单标签(所有的表单标签必须被包裹在<form action="#">标签中) action属性:指定后台的一个地址;
input : 输入框
属性:type 值: text 文本框
password 密码框
redio 单选框
checkbox 多选框
submit 提交
reset 重置
button 普通按钮
readonly 只读
disabled
select:创建单选或多选菜单
属性:multiple 规定可同时选择多个选项 值:multiple
option:作为 <select> 标签的菜单或是滚动列表中的一个元素显示;
属性值:selected="true" 默认显示;
textarea : 文本域; 属性:cols 列数、rows:行数;
label : 为input远的定义标注;在label元素内点击文本,就会触发此控件;
属性:for ,for 属性值应当与相关元素的 id 属性值相同。
eg:
<input type="radio" name="gender" id="gender-man" >
<label for="gender-man">男 </label>
frameset :定义一个框架集;
属性:cols 定义框架集中列的数目和尺寸
rows定义框架集中行的数目和尺寸
legend : 为 fieldset 元素定义标题; frameset子元素;
eg:
<fieldset>
<legend>用户组1</legend>
用户名:<input type="text"><br>
密码:<input type="text">
</fieldset>