学习目标: 知识目标:
1. HTML语法
2. meta标签
3. 页面注释、标题标签、段落标签、换行标签
4. 文字样式标签
5. HTML转义字符
6. 列表
7. 属性的用法
学习内容:
1. HTML语法
(1) 标签: ①标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束.
②结束标记一定要以"/"结束,引号必须使用"",标签之间不能交叉嵌套.
(2) 属性: 必须放在开始标签里面,属性可以为标签提供更多样化的特性.
(3) 元素: 开始和结束标签连同包含在他们之间的内容,我们通常叫做元素.
2. HTML头部标签head
概念: ①在HTML语言的头部中,一般需要包括标题、基础信息和源信息等.
②HTML的头部元素是以<head>为开始标签,以</head>为结束标签的.
3. 网页标题标签title: 标题标记以<title>开始,以</title>结束.
HTML页面的标题一般是用来说明页面的用途,它显示在浏览器的标题栏中.在HTML文档中,标题信息设置在<head>与</head>之间.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签title</title>
</head>
<body>
</body>
</html>
4. 元信息标签meta
①meta标签提供的信息不显示在页面中,一般用来定义页面信息的说明、关键字、刷新等.
②meta标签不需要设置结束标签,是一个单标签.
③在一个HTML页面中可以有多个meta元素.
④meta元素的属性有name和http-equiv,其中name属性主要用于描述网页,以便于搜索引擎查找、分类.
5. meta标签项
①<meta name="keywords" content="插入关键字"> 设置页面关键字
②<meta name="description" content="设置页面说明"> 设置网页说明
③<meta name="author" content="作者的姓名"> 添加作者的信息
④<meta charset="UTF-8"> 设置网页编码 万国码
⑤<meta http-equiv="refresh" content="跳转的时间;URL=跳转到的地址"> 设置网页的定时跳转.
6. 页面注释标记: <!-- 注释内容 -->
(1) 注释是在HTML代码中插入的描述性文本,用来解释该代码或提示其他信息.注释只出现在代码中,在浏览器的页面中不显示.
(2) 在HTML源代码中适当地插入注释语句是一种非常好的习惯.对于设计者日后的代码修改、维护工作很有好处.另外,如果将代码交给其他设计者,其他人也能很快读懂前者所编写的内容.
7.标题标签: <h1></h1> -- <h6></h6>
(1) <h1></h1>代表1级标题,级别最高,字体也最大,其他标题依次递减,<h6></h6>级别最低.
(2) 标题对齐方式属性: align
(3) align属性值: left左对齐,center居中对齐,right右对齐
8.文字段落缩进: <blockquote></blockquote>
<blockquote>与</blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩减(增加外边距)
9.段落标签: <p></p>
(1) 用来定义网页中的一段文本
(2) 段落对齐方式属性: align
(3) 属性值: left左对齐,center居中对齐,right右对齐
10.换行标签: <br>
换行标记<br>的作用是在不另起一段的情况下将当前文本强制换行.
11.水平线标签: </hr>
(1) 和上下的内容进行区分和隔离
(2) <hr align="left"> 水平线对齐方式
(3) <hr size="9"> 水平线(设定长度)
(4) <hr width="80%"> 水平线(设定宽度)
(5) <hr color="#ff0000"> 水平线(设定颜色)
12.文字样式标签:
① <font color="#00ff00">...</font> 文本字体颜色
②<font size="1">...</font> 文本字体大小
③<b>...</b> 粗体字 <strong>...</strong> 粗体字(强调)
④<i>...</i> 斜体字 <em>...</em> 斜体字(强调)
⑤<u>...</u> 下划线 <strike>...</strike> 删除线
⑦<s>...</s> 删除线(缩写) <del>...</del> 删除线(表示删除)
13.列表标签
(1) HTML中共有3中列表,分别是无序列表、有序列表和自定义列表.
(2) ①无序列表: 无序列表就是列表项没有先后顺序的列表形式.
②type属性: 可以定制无序列表项目符号
③值: disc(实心圆)、circle(空心圆)、square(实心方块)
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
(3) ①有序列表: 有序列表就是列表项有先后顺序的列表形式.
②type属性: 有序列表的序号类型(a,1,A,i,l)
③start属性: 用来设置列表编号的起始值.
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
<ol>
(4)①自定义列表: 自定义列表不是一个项目的序列,它是一系列条目和它们的解释.
②自定义列表以<dl>标签开始,自定义列表条目以<dt>开始,
③自定义列表的定义以<dd>开始
<dl>
<dt>条目</dt>
<dd>解释</dd>
<dd>解释</dd>
</dl>
14.HTML转义字符
(1) 在html中有一些特殊符号属于HTML语法的关键字符,比如'<'或'>'等,为了在页面中显示这样的特殊字符,所以要使用实体来表示.
(2) 语法定义: -&+实体名称+;
(3) &quto;"、&&、&li;<、>>、注册符®: ®
(4) 空格、©©版权符、§§、¤¤
15. 常用颜色名:
aqua(青蓝色)、black(黑色)、blue(蓝色)、pink(粉色)、gray(灰色)、green(绿色)、lime,maroon(酒红色)、navy,olive(橄榄色)、purple(紫色)、red(红色)、silver,teal,white(白色)、yellow(黄色)、orange(桔色)、gold(金色)、lightblue(淡蓝色)、lightgreen(淡绿色)
学习总结:
1.重点: ①meta标签 ②基本标签 ③列表标签
2.难点: ①HTML语法 ②属性的用法