HTML
HTML: 是用来制作网页的。
什么是网页:
只要一个文件的后缀是html或htm,该文件就是网页文件.
如:或者
此时已经创建好一个网页了,我们直接打开这个网页,先看看里面有什么!?
我们就想办法,给这个网页中添加点内容!!
我们需要右键网页-->使用记事本打开,随便写点问候!!!
记着,编写完以后,要保存,刷新网页!!
我们知道,一个网页上的文字,有大小,有颜色.... 各种外观
我们下面就像给这个字加个颜色再说别的!
此时,我们就是想把字变成红色,咋办呢???
这就引出了我们要学习的科目---> html
Html是什么: hyper text markup language (超文本标记语言)
归根结底,html这是一个语言。
语言的作用是沟通:
现在要学习的html是与浏览器沟通。想让浏览器按我们的意愿去做事情,就必须精通浏览器的语言:html.
先看一个例子:
练习:
- 创建一个文本文件
- 该后缀html(或htm)
- 右键网页-->记事本打开
- 要求,写出自己的名字,和自己的座右铭, 名字和座右铭的颜色要不一样!
HTML语法:
标记(标签):就是在 < > 之间,加入一串字母。
比如: <font> <body> <title> <head> .....
关于属性要注意的地方:
- 所有标记的属性,都必须写在开始标记中.
- 属性和属性值之间用 “=” 连接
- 属性值应该用””或者’’引起来 (标准)
D. 属性和属性之间,用空格隔开
E. 属性之间没有先后顺序
F. 在同一个标记中,同一个属性只能用1次, 如果非要把一个属性用多次,则浏览器只认第一次出现的属性
关于标记要注意的地方:
- 标记不区分大小写
B. 标记分为单标记和双标记
eg. 单标记 <br /> 特点就是,从左边开始,右边就结束,没有范围。
eg. 双标记 <font>...</font>
C. 元素 = 开始标记+中间内容+结束标记
比如<font>日出东方,唯我不败,千秋万代,一统江湖!!</font>
这就是一个font元素。
font元素的内容术语上叫做:“元素内容”
D. 所有属性,必须写在开始标记之中。
E. 标记可以嵌套, 如果嵌套的标记,与外边的标记属性有冲突,则使用就近原则!
Hbuilder的使用
标记学习
<font size=”字大小” color=”字颜色” face=”字体”></font>
<center>内容会居中</center>
<img src=”图片地址” width=”图片宽度” height=”图片高度” />
<hr width=”线的宽度” size=”线的粗细” color=”线的颜色”/>
利用以上标记制作一个简单的网页
<meta charset="utf-8">
<center> <font size="7"> 0905班级官方网站 </font> <br /> 首页 日志 相册 留言板 <hr /> <br /> <img src="img/1.jpg" width="200" height="150" /> <img src="img/2.jpg" width="200" height="150" /> <img src="img/3.jpg" width="200" height="150" /> <br /> <img src="img/a1.jpg" width="200" height="150" /> <img src="img/a2.jpg" width="200" height="150" /> <img src="img/a3.jpg" width="200" height="150" /> <br /> <img src="img/a4.jpg" width="200" height="150" /> <img src="img/a5.jpg" width="200" height="150" /> <img src="img/a6.jpg" width="200" height="150" /> <br /> <hr /> 班级邮箱: 0905java@163.com<br /> 班级地址: 高速大厦3楼<br /> tel: 18812345678<br />
</center>
|
之前编写的代码,都不规范! 规范的html代码是这样的:
例子:
下面详细学习标记内容:
- 文档标记
Body: 代表网页的体部
属性名 |
解释 |
bgcolor |
控制背景颜色 |
background |
控制背景图片, 如果背景色与背景图一起使用,则总是显示背景图 |
属性名 |
解释 |
text |
控制整个页面范围内,所有文字的颜色 |
|
|
Html中的颜色表示方法
- 英文单词 red blue
- #后面跟6位16进制的数字
a) 前两位代表R (red)
b) 中间两位代表G (green)
c) 后两位代表B (blue)
d) #ff0000 就是红色 #ffff00就是黄色.....
- rgba表示法 (等学习到css再说...)
Head
Head元素中,有一个子元素:meta,非常有用。
<meta charset=”字符集” /> 用来指定浏览器使用的编码表
注意,只要编码与解码时,采用的编码表不一致,就会造成乱码!!
注意,并不是使用utf-8就“万事大吉” 而是要保证,编码与解码时的码表一致才行!!!
利用meta,定时刷新页面
<meta http-equiv="refresh" content="1;url='http://www.163.com'" />
表示,过1秒,刷新到163首页。
Title: 你懂得 <head><title>哈哈</title></head>
- 排版标记
<!-- --> 注释。
p: 段落标记,段落标记会自动换2行
属性 |
解释 |
align |
控制段落中的内容的水平对齐方式 |
title |
鼠标悬停在段落上的提示文字 |
|
|
strong:
em
U
del
sub
sup
h1...h6
ol li (order list list item)
注意,li必须用在ol里面
ul li (unorder list list item)
dl dt dd (data list data type data describe)
marquee: 滚动标记
属性名 |
解释 |
scrollamount |
滚动距离间隔 |
Scrolldelay |
滚动时间间隔 |
loop |
控制循环次数 |
bgcolor |
控制背景颜色 |
direction |
控制滚动方向 left right up down |
width height |
控制marquee的高宽 |
Behavior |
控制滚动方式 Scroll 循环滚动 Slide 只滚动一次,且保留内容 Alternate 来回滚动 |
img
A
bgsound
video
table tr td
form
Input
select
textarea
frameset
frame
iframe