一:基本概念
1.什么是HTML
HyperText Markup Language 超文本标记语言
超文本:超出普通文本的功能 a:普通英文首字母 <a></a>超级链接
标记:<a></a>是标记,带有尖括号
语言:都有自己的语法
2.特点
1.由浏览器解析执行
2.用带有尖括号的"标记"来标识的
3.以.html或.htm为后缀
4.网页中可以嵌套脚本语言(js)
二.HTML的基础语法
1.标记
标记:又称为元素或标签,在网页中,主要用来表示一些功能
标记分类:
1.封闭类型
也称为双标记,必须成对出现,有开始有结束标记.
语法:<标记>文本</标记>
ex:百度
加粗
2.非封闭类型
也称为单标记,或空标记
语法:<标记>--<html4.01写法>或<标记/>--<xhtml1.0写法>---html5都兼容
ex:<img>或<img/>
<br>或<br/>
<hr>或<hr/>
2.标记嵌套
1.什么是嵌套
在一对标记中出现另外一对或一个标记,从而形成功能的层叠.
2.语法
<标记1>
<标记2>
内容
</标记3>
</标记1>
ex:
注意:
1.嵌套顺序,成对出现
2.标记换行缩进
3.属性和值
允许通过属性的方式对标记进行修饰
语法:
1.属性必须声明在开始标记中
<标记 属性名=“值”></标记>
2.多个属性之间用空格隔开即可
<标记 属性名=“值” 属性2=“值2”…></标记>
4.标准属性(通用属性)
id:唯一标识(名称),id值一定不能重复
title:鼠标悬停在元素上时所提示的文本
class:在css中使用,引用类选择器
style:在css中使用,定义元素的行内样式
5.注释
语法:
注意:
1.注释本身不能嵌套 <!--
--> 错误!!会多一个 -->
2.注释不能嵌套在标记中
三.HTML文档结构
1.HTML文档结构组成
1.文本类型的声明
作用:告诉浏览器HTML的版本类型
语法:<!doctype html> -html5写法
在最顶端编写
2.HTML页面
在文档类型的声明下方紧挨着写一对html标记
作用:表示整个页面的开始与结束
在html中分两部分:
1.
作用:表示网页的头部,定义全局信息
2.
作用:定义网页的主体内容
3.
1.head是其它头元素的容器
①
② ----ex:京东例子
//设置文档字符集
③
④
4.body元素
写网页的主体内容
body标记的属性
text:修饰文本颜色
bgcolor:背景颜色(注意:不是background(css写法)!!)
这两个只能在body标签里用
四.文本标记
1.特殊字符
表示一个空格
< 表示"<"
> 表示">" <p> </p>
© 表示版权符号©
¥ 表示¥
® 表示注册商标®
× 表示关闭×号
2.文本样式
1.:加粗
2.: 斜体
3.:下划线
4.:删除线
5.:下标
6.:上标
3.标题元素
作用:在页面中以醒目的方式显示文本
语法:
n:1-6
文本
:一级标题…
文本
:六级标题特点:
1.独占一行
2.加粗,并且字体大小可以变化
3.单独成行,上下文之间有空白间距
属性:
align:设置内容的水平对齐方式–取值:left/center/right
4.段落标记
语法:
作用:以突出显示一段文本
特点:单独成行,上下文之间有空白间距(p的空白间距要比
属性:
align:left/center/right
5.换行元素
语法:
或
作用:让文本换行显示
6.水平线
语法:
或
作用:在网页中表示一根水平线
属性:
size:表示水平线的尺寸(高度),取值以px为单位的数字.
width:表时水平线的宽度,取值以px为单位的数字或者百分比
align:水平线的对齐方式,取值left/center/right
color:水平线的颜色,取值为合法的颜色值
7.预格式化
语法:
作用:保留HTML中回车和空格 --我发现:文字要比正常的小
8.分区元素
1.块分区元素
作用:用于页面中布局效果
语法:
2.行分区元素
作用:在网页中处理同一行文本的不同样式
语法:
9.行内元素与块级元素
1.块级元素
在网页中独占一行,内容从上往下显示就是块级.
常见的块级元素:
标题元素h1~h6
段落元素p
div (pre)
2.行内元素
在网页中,多个元素在一行中从左往右显示.
常见的行内元素:
a/b/u/i/s/sub/sup/span
3.行内块 显示呈行内元素的效果,但是具备块级的特点(比如:可设置宽高)
4.table
补充:
1.段落标记自己不能嵌套自己§
2.块级中嵌套行内元素
五.图像和链接
1.URL
1.目录结构
文件目录:文件夹嵌套结构
2.URL
URL:Uniform Resource Locator统一资源定位器,俗称路径
3.路径的表现形式
1.绝对路径
完整路径,一定可以找到你想找的文件
网络资源:
协议+主机名称+文件目录结构+文件名称
本地资源:
从最高盘符比如c:\xampp\htdocs\Day01
2.相对路径(重点)
相对于当前某个文件位置,从它出发所经过的路径就是相对路径.
(1).同级目录
直接引用文件
ex: “2.jpg”
(2).子级目录
先进入文件夹,再引用
ex: img/1.jpg
(3).父级目录
先返回上一级,再引用
ex: …/3.jpg
ps:属性值 可加引号也可以不加
3.根相对路径
ex: /myPro/demo.html