HTML&CSS精选笔记_HTML入门

HTML入门

什么是HTML

HTML基本文档格式

HTML文档的基本格式，其中主要包括文档类型声明、根标记、头部标记、主体标记。

标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范
标记位于 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档， 标记标志着HTML文档的开始，标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。

标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在标记之后，主要用来封装其他位于文档头部的标记，例如标记



标记
用于定义页面的元信息，可重复出现在头部标记中，在HTML中是一个单标记。
标记本身不包含任何内容，通过“名称/值”的形式成对的使用其属性可定义页面的相关参数，例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。



设置网页关键字
设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数。
默认会发送，通知浏览器发送的文件类型是HTML。


设置网页作者



设置字符集

其中http-equiv属性的值为Content-Type，content属性的值为text/html和charset=utf-8，中间用“;”隔开，用于说明当前文档类型为HTML，字符集为utf-8 (国际化编码)。

设置页面自动刷新与跳转
其中http-equiv属性的值为refresh，content属性的值为数值和url地址，中间用“;”隔开，用于指定在特定的时间后跳转至目标页面，该时间默认以秒为单位。



一个页面往往需要多个外部文件的配合，在中使用标记可引用外部文件，一个页面允许使用多个标记引用多个外部文件



常用属性
href URL 指定引用外部文档的地址
rel stylesheet 指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表
type
text/css 引用外部文档的类型为CSS样式表

text/javascript 引用外部文档的类型为javascript脚本

在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的CSS样式。

HTMl文本控制标记

标题标记

、

、

、

、

和

标题文本

align取值

left  设置标题文字左对齐（默认值）
center  设置标题文字居中对齐
right  设置标题文字右对齐

段落标记

段落文本

默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标记

---

---

---

默认水平线
属性
align 设置水平线的对齐方式 可选择left、right、center三种值，默认为center，居中对齐
size 设置水平线的粗细 以像素为单位，默认为2像素
color 设置水平线的颜色 可用颜色名称、十六进制#RGB、rgb(r,g,b)
width 设置水平线的宽度 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%

换行标记

文本样式标记

用来控制网页中文本的字体、字号和颜色
文本内容 


属性
face 设置文字的字体，例如微软雅黑、黑体、宋体等
size 设置文字的大小，可以取1到7之间的整数值

color 设置文字的颜色

文本格式化标记

有时需要为文字设置粗体、斜体或下划线效果，使文字以特殊的方式显示
和 文字以粗体方式显示（XHTML推荐使用strong）
和 文字以斜体方式显示（XHTML推荐使用em）
和 文字以加删除线方式显示（XHTML推荐使用del）
和 文字以加下划线方式显示（XHTML不赞成使用u）

特殊字符标记

  空格符  
< 小于号 <
> 大于号 >
& 和号 &
￥ 人民币 ¥
© 版权 ©
® 注册商标 ®
° 摄氏度 °
± 正负号 ±
× 乘号 ×
÷ 除号 ÷
² 平方2（上标2） ²
³ 立方3（上标3） ³

HTMl图像标记

常用图像格式

GIF
支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。支持透明（全透明或全不透明）
但GIF只能处理256种颜色。在网页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。


PNG
包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。
JPG
JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。

JPG是特别为照片图像设计的文件格式，网页制作过程中类似于照片的图像比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。

图像标记

src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。


属性
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素（XHTML不支持%页面百分比） 设置图像的宽度
height 像素（XHTML不支持%页面百分比） 设置图像的高度
border 数字 设置图像边框的宽度
vspace 像素 设置图像顶部和底部的空白（垂直边距）
hspace 像素 设置图像左侧和右侧的空白（水平边距）
align

left 将图像对齐到左边
right 将图像对齐到右边
top 将图像的顶端和文本的第一行文字对齐，其他文字居图像下方
middle 将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方
bottom 将图像的底部和文本的第一行文字对齐，其他文字居图像下方

相对路径

不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。


图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如。
图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如。

图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如。

绝对路径

带有盘符的路径。
“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
阶段案例-制作图文混排页面