HTML1-排版，字体，列表，图像，超链接

来源：互联网发布：java中的restfull接口编辑：程序博客网时间：2024/05/16 14:50

1、HTML的概述

a、html是什么： hypertext markup language 超文本标记语言
超文本：音频，视频，图片称为超文本。.
标记：<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。

b.作用：编写HTML页面。

c.HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).
HTML页面直接由浏览器解析执行。

2、专业术语

* 网页：由各种标记组成的一个页面就叫网页 .
* 主页(首页) : 一个网站的起始页面或者导航页面 .
* 标记:称为开始标记 称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。
* 元素：内容 称为元素.
* 属性：给每一个标签所做的辅助信息。
* xhtml：符合XML语法标准的HTML。
* dhtml：dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml
* http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议.

3、编辑工具

*.notepad 记事本
*.editplus : 语法高亮显示
技巧：根据颜色判断单词是否出错。（不是100%）
*.ultraedit : 根据颜色判断单词是否出错,可以显示2进制数据.
*.dw(dreamweaver,专业工具) 代码提示.

4、语言规范

*HTML是一个弱势语言
*.html 不区分大小写
*.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
*.html 的结构
1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。
2)head部分：不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
3)body部分：我们所写的代码必须放在此标签內。

5、HTML的各种标签

明确：每个标签都有私有属性。也都有公有属性。公有属性主要用于css JavaScript。
html中表示长度的单位都是像素。

body:

bgcolor: 背景颜色

background:背景图片

text: 文本颜色

1.排版标签
所有的浏览器默认情况下都会忽略空格和空行

P：p代表一个段落

属性： align:对齐方式. 取值：left,right,center

代表是换行。没有结束的标签。没有属性。

hr: 单独占据一行

color: 线的颜色

size : 线的粗细

width: 线的长短

两种写法： 1) 绝对值 eg: 500 单位只有一个：像素

2) 相对值： 50%

noshade: 不要阴影

align: 对齐方式取值： left,right,center

center: 内容居中里面的内容都居中(不怎么用)
<center>刘德华 我爱 芙蓉姐姐</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: 在顶级窗口中显示（用于框架）

0 0