2020-11-03

学习目标: 知识目标:

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;"、&amp;&、&li;<、&gt;>、注册符®:  &reg; 
    (4) &nbsp;空格、&copy;©版权符、&sect;§、&curren;¤ 

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语法  ②属性的用法
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值