HTML……/HTML
标记文档开始与结尾
-
head……/head
标识HTML文档头部(只可出现一次)a. title……/title
网页的标题(只可出现一次)
<!DOCTYPE html>
<html>
<head>
<title>我的网页!</title>
</head>
<body>
七月的第一个代码哟~
</body>
</html>
- Body……/Body
HTML文档主体部分(只可出现一次)
1、<!……>
注释
2、BR
换行
3、p……/p
换段
**属性**
align=“left/right/center”
段落对齐方式
**注:**BR标记单纯换行
p标记还会多空出一行
<body>
这一段文字用的是BR<br>
这一段文字用的是BR
这一段文字用的是p<p>
这一段文字用的是<p></p>
</body>
4、center……/center
文本居中
5、hr
插入水平线
6、hn……/hn
设置标题,n越大级别越小,且自动换行
属性
a、align=“left/right/center”
b、size=”2px(默认)“
c、width=“50px/100%(默认)”
d、color=”red“
<body>
<h1>这一段文字用的是h1</h1>
<h7>这一段文字用的是h7</h7>
</body>
7、font……/font
设置字体,字号以及字体颜色
属性
face:设置字体类别
文本内容
size:设置字体字号
<font size="2">文本内容</font>
color:设置字体颜色
<font color="red">文本内容</font>
<body>
<font face="楷体" size="7" color="green">
终于漂泊好久的船停靠在你怀里<br>
依旧还会给我海阔天空的勇气<br>
</font>
<font size="1" color="#00f">
当分离 终有一天会相聚<br>
</font>
<font size="+">
我的心还守在你这里<br>
</font>
</body>
8、pre……/pre
原样显示标记
<body>
<pre>终于以约为期让我在今生
遇见你
~
</pre>
</body>
文本控制标记
9、b……/b
strong……/strong(xhtml推荐)
加粗
10、I……/I
em……/em(xhtml推荐)
倾斜
11、u……/u
ins……/ins(xhtml推荐)
下划线
12、s……/s
del……/del(xhtml推荐)
删除线
13、img
图像标记
属性:
a、src(url)
指定文件位置和文件名称
b、alt(文本)
图像的替换文本(当图片不能显示是就显示定义的文本)
c、title(文本)
鼠标悬停在图片上显示的文字
d、border(数字)
添加图像的边框,设置边框宽度(边框颜色通过HTML不能实现)
e、align(top,left,right,middle)
设置图像对齐方式
f、width和 hight(像素)
设置图像的宽度和高度(设置一个,另一个则会根据比例调整)
g、vspace和hspace(像素)
设置图像的垂直边距和水平边距
注意:
相对路径:不带盘符,以自身为起点,按层级关系描述
…/上一级
绝对路径:带盘符
如:C:\Web\url
<body>
<img src="相对路径/绝对路径">
</body>
14、特殊符号标记
a、 空格
 ; /各浏览器对空格的解析有异,推荐使用css样式代替
b、<小于
<;
c、>大于
>;
d、&和号
&;
e、人民币
¥;
f、版权
©;
g、注册商标
®;
h、摄氏度
°;
i、正负号
±;
j、乘号
×;
k、除号
÷;
l、平方2(上标2)
²;
m、平方3(上标3)
&sup;
15、常用图像格式
a、GIF
支持动画、支持透明(全透明+全不透明)、无损压缩、色彩单一
适用于:logo
b、PNG(png-8,png-24,png-32)
不支持动画、支持alpha透明(全透明+半透明+全不透明)、比GIF体积小
c、JPG
不支持动画、有损压缩、颜色多(25种)
注意:小图片考虑PNG,半透明考虑PNG-24,照片考虑JPG
任务:制作图文混排页面