Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
HTML基础
学习内容
• HTML概念
• 了解HTML发展史
• 基础语法
• 常用标签(段落、图片、链接等)
• 结合小例子
什么是HTMLHTML(Hypertext Markup Language)即超文本标记语言
HTML发展史
HTML特点
• HTML不需要编译,直接由浏览器执行
• HTML文件是一个文本文件
• HTML文件必须使用html或者htm为文件名后缀
• HTML大小写不敏感,HTML和html一样
开发工具• sublime
HTML基础语法
课程内容
•HTML基本结构
•HTML标签
•HTML元素
•HTML属性
•注释
HTML基本结构
头部信息
HTML文件
网页内容
语法:
例如: ….
规范:
1、括起来2、一般成对出现,分开始标签和结束标签
结束标签比开始标签多了一个/
3、单标签:没有结束标签
HTML标签
从开始标签到结束标签的所有代码,称为HTML元素。
HTML元素
语法: …..
HTML标签属性
•
• 注释在网页中不显示。
HTML注释
DOCTYPE 文档类型声明
声明必须放在HTML文档第一行。 声明不是HTML标签
网页编码设置
当网页显示出现乱码时,在标签之间添加:
注:utf-8、GB2312、gbk等编码
标题标签:~
段落标签:
align对齐属性值
:
文字和段落标签
换行标签:
值 描述
left 左对齐内容。
right 右对齐内容。
center 居中对齐内容。
justify 对行进行伸展,这样每行都可以有相等的长度。
水平线:
属性如下:
文字和段落标签
属性 描述
width 设置水平线宽度,可以像素或百分比
color 设置水平线颜色
align 设置水平线居中对齐
noshade 设置水平线无阴影
文字和段落标签
文字斜体: 、 加粗
: 、 下
标:
上标:
插入内容:
删除内容:
特殊符号
属性 显示结果 描述
< < 小于号或显示标记
> > 大于号或显示标记
® ® 已注册
© © 版权
™ ™ 商标
Space 不断行的空白
列表标签
无序列表:
列表项
列表项
……
列表标签
type属性值:
注:规定列表的项目符号类型,请使用样式设置。
值 描述
disc 圆点
square 正方形
circle 空心圆
列表标签
有序列表:
列表项
列表项
……
type属性值:
注:规定列表的项目符号类型,请使用样式设置。
值 描述
1 数字1,2……
a 小写字母a , b……
A 大写字母A , B……
i 小写罗马数字 i
I 大写罗马数字 I
定义列表:
定义列表项
列表项描述
列表项描述
定义列表项
列表项描述
……
列表标签
注:组合使用。
列表标签应用场景
图像和超链接标签
语法:
img属性:
图像标签
属性 值 描述
Src(必写) URL 显示图像的URL
alt 文字 图像替代文本
height 数值和百分比 图像的高
width 数值和百分比 图像的宽
语法:
< a href=“”>内容
属性:
超链接标签
属性 描述
href 链接地址
target 链接的目标窗口_self、_blank、_top、_parent
title 链接提示文字
name 链接命名
定义锚(同一页面):
< a href=“#锚名1”>目录1
< a href=“#锚名2”>目录2 < a href=“…”name=“锚名1”>内容
xxxxxxxxx
xxxxxxxxxxxxx< a href=“…”name=“锚名2”>内容
xxxxxxxxx
xxxxxxxxxxxxx
超链接标签
定义锚(不同页面):
< a href=“网页名称#锚名”>……
超链接标签
电子邮件链接:
< a href=“mailto:邮件地址”>……
超链接标签
图像和超链接标签
语法:
img属性:
图像标签
属性 值 描述
Src(必写) URL 显示图像的URL
alt 文字 图像替代文本
height 数值和百分比 图像的高
width 数值和百分比 图像的宽
语法:
< a href=“”>内容
属性:
超链接标签
属性 描述
href 链接地址
target 链接的目标窗口_self、_blank、_top、_parent
title 链接提示文字
name 链接命名
定义锚(同一页面):
< a href=“#锚名1”>目录1
< a href=“#锚名2”>目录2 < a href=“…”name=“锚名1”>内容
xxxxxxxxx
xxxxxxxxxxxxx< a href=“…”name=“锚名2”>内容
xxxxxxxxx
xxxxxxxxxxxxx
超链接标签
定义锚(不同页面):
< a href=“网页名称#锚名”>……
超链接标签
电子邮件链接:
< a href=“mailto:邮件地址”>……
超链接标签
HTML基础学习内容幻灯片编号 3HTML发展史HTML特点幻灯片编号 6HTML基础语法课程内容HTML基本结构HTML标签幻灯片编号 11HTML标签属性HTML注释DOCTYPE 文档类型声明网页编码设置文字和段落标签文字和段落标签幻灯片编号 18特殊符号列表标签列表标签列表标签列表标签列表标签应用场景图像和超链接标签图像标签超链接标签超链接标签超链接标签超链接标签图像和超链接标签图像标签超链接标签超链接标签超链接标签超链接标签