1、HTML的概述
a、html是什么 ： hypertext markup language 超文本标记语言
超文本：音频，视频，图片称为超文本。.
标记 ：<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。
超文本：音频，视频，图片称为超文本。.
标记 ：<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。
b.作用：编写HTML页面。
c.HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).
HTML页面直接由浏览器解析执行。
HTML页面直接由浏览器解析执行。
2、专业术语
* 网页 ：由各种标记组成的一个页面就叫网页 .
* 主页(首页) : 一个网站的起始页面或者导航页面 .
* 标记:<p>称为开始标记 </p>称为结束标记. 也叫标签. 每个标签都规定好了特殊的含义。
* 元素：<p>内容</p> 称为元素.
* 属性： 给每一个标签所做的辅助信息。
* xhtml： 符合XML语法标准的HTML。
* dhtml：dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml
* http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议.
* 主页(首页) : 一个网站的起始页面或者导航页面 .
* 标记:<p>称为开始标记 </p>称为结束标记. 也叫标签. 每个标签都规定好了特殊的含义。
* 元素：<p>内容</p> 称为元素.
* 属性： 给每一个标签所做的辅助信息。
* xhtml： 符合XML语法标准的HTML。
* dhtml：dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml
* http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议.
3、编辑工具
*.notepad 记事本
*.editplus : 语法高亮显示
技巧： 根据颜色判断单词是否出错。 （不是100%）
*.ultraedit : 根据颜色判断单词是否出错,可以显示2进制数据.
*.dw(dreamweaver,专业工具) 代码提示.
*.editplus : 语法高亮显示
技巧： 根据颜色判断单词是否出错。 （不是100%）
*.ultraedit : 根据颜色判断单词是否出错,可以显示2进制数据.
*.dw(dreamweaver,专业工具) 代码提示.
4、语言规范
*HTML是一个弱势语言
*.html 不区分大小写
*.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
*.html 的结构
1) 声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。 <!doctype html>是 HTML5标准。
2) head部分： 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
3) body部分：我们所写的代码必须放在此标签內。
*.html 不区分大小写
*.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
*.html 的结构
1) 声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。 <!doctype html>是 HTML5标准。
2) head部分： 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
3) body部分：我们所写的代码必须放在此标签內。
5、HTML的各种标签
明确：每个标签都有
私有属性。也都有
公有属性。公有属性主要用于css JavaScript。
html中表示长度的单位都是像素。
html中表示长度的单位都是像素。
body:
bgcolor: 背景颜色
background:背景图片
text: 文本颜色
1.排版标签
所有的浏览器默认情况下都会忽略空格和空行
P：p代表一个段落
属性： align:对齐方式. 取值：left,right,center
<br>代表是换行。没有结束的标签。没有属性。
hr: 单独占据一行
color: 线的颜色
size : 线的粗细
width: 线的长短
两种写法： 1) 绝对值 eg: 500 单位只有一个：像素
2) 相对值： 50%
noshade: 不要阴影
align: 对齐方式 取值： left,right,center
center: 内容居中 里面的内容都居中(不怎么用)<center> <p>刘德华</p> 我爱<br>芙蓉姐姐 </center>
pre: 预定义格式标签 .告诉浏览器不要忽略空格和空行
div: 块级标签 必须单独占据一行 块级标签：把标签中的内容当做一个块来对待
属性： align :
span: 块级标签 不换行字体标记
排版标签示例：
<p align="right">刘德华</p>
<p>刘德华</p>
我爱<br>芙蓉姐姐
<hr width="50%" size="1" color="red" />
<center>
<p>刘德华</p>
我爱<br>芙蓉姐姐
</center>
<span>阿娇</span><span>阿娇</span>2 字体标签
h1...h6:定义字体大小
属性： align :居中
font:
color:字体颜色
颜色的写法有3种： 1)英文单词: red
2)十六进制：#00ffcc 红绿蓝 多/少一位可以正常显示
3)RGB(三原色) : new RGB(124,156,23)
size:字体大小 1-7 大于7按7算 小于1按1算65
face：字体类型
特殊字符： <小于 >大于 & &符号 " 双引号 '单引号
© 版权 ™商标 空格
扩展：绐
b: 加粗 strong: 加粗 i:斜体 em: 斜体 u: 下划线 s: 中划线(删除线) 没有上划线 sup: 上标 sub: 下标.
字体标签示例：
<h1 align="center">刘德华</h1>
<h2>刘德华</h2>
<h3>刘德华</h3>
<h4>刘德华</h4>
<h5>刘德华</h5>
<h6>刘德华</h6>
<font face="新宋体" size="7" color="new RGB(122,0,0)">刘德华</font>
这是一个HTML的<p>标签
<i><b>啦啦</b></i>
3.图像标记：
img: 代表是一副图片
属性： src : 图片的路径
两种写法： a) : 相对路径 路径是 相对页面所在的路径 两个标记.和.. ,分表代表当前目录和父路径
b) ：绝对路径
1) : 以盘符开始的路径
eg: C:\Documents and Settings\Administrator\桌面\day01_html\上课示例/images/1.jpg
2) : 网络路径
eg: http://www.baidu.com/images
width: 宽度
height：高度
Alt：当图片显示不出来的时候代替图片显示的内容
title： 提示性文本
border: 边框align：指的是图片和周围文字的相对位置
热点： 就是特定的位置添加超链。 地图应用 只能使用Dreamweaver
<img src="images/1.jpg" width="300" height="300" usemap="#Map" border="0" /> //这里的Map只得是id的Map
<map name="Map" id="Map">
<area shape="circle" coords="122,81,38" href="demo_字体标签.html" />
</map>
图像标签示例：
<body title = "sdf">
<p title="白痴">啦啦啦啦啦</p>
刘德华<img src="I:\黑马52期Android\day01_html\上课示例\images\1.jpg" width="300" height="300" alt="美女" border="20" align="top" title="这是一个美女"/>刘德华
</body>
热点示例：
<img src="../../黑马52期Android/day01_html/上课示例/images/1.jpg" alt="这是一个美女" width="300" height="300" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="circle" coords="117,75,31" href="day01.html" target="_blank" />
</map>
4.清单标记
列表标签：3种
a.无序列表 ul unorder list
属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆)
每项用 li
b.有序列表( OL) order list
属性: type:取值：1(阿拉伯数字，默认),a,A,i,I
start: 从几开始
c.定义列表( dl) defined list
dt: 列表项的标题
dd: 列表项
清单标签示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清单标记</title>
</head>
<body>
<ul type="circle">
<li>中国</li>
<li type="square">日本</li>
<li>美国</li>
</ul>
<ol type="a" start="10">
<li>中国</li>
<li>日本</li>
<li>美国 </li>
</ol>
<dl>
<dt>第一条</dt>
<dd>不得随地吐痰</dd>
<dd>不得爆粗口</dd>
<dt>第二条</dt>
<dd>上课不得迟到</dd>
</dl>
</body>
</html>5.超链接： <a hre="sd.html">sd</a>
3种超链接:
1. 外部连接：连接到其他页面
<a href="图片标签.html" name="a" target= "_parent">图片标签</a>
2. 锚连接: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字 默认是网页或文件，所以一定要加#
连接到本页面：
<a href="#a">回到顶部</a>
3. 连接到邮件: <a href = "mailto:xugang@itcast.cn">进入我的邮箱</a>
属性：target: 告诉浏览器怎么显示目标页面
HTML中已定义4个值： _self :在同一个浏览器中显示
_blank: 打开新的浏览器显示
_parent: 在父窗口中显示(用于框架)
_top: 在顶级窗口中显示（用于框架）
扫一扫
1435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
