Web第六讲:HTML基础

内容提要:

  • HTML文档的基本结构
  • 标记(标签)类型、标记(标签)语法
  • body标记的属性的设置方法
  • 给网页添加注释
  • meta元信息的作用
  • HTML文档类型。<!doctype html>

html文件由头部head和主体body两部分组成:

  • 在头部<head>标记中,可以定义标题、样式等,头部里放的是网页元信息,不显示在网页内,元信息是关于网页的基本描述。

    CSS代码和JavaScript代码可以放在头部,另外JavaScript代码也可以放在body部分。

  • 在主体<body>标记中,可定义段落、标题字、超链接、脚本、表格、表单等元素,主体内容是网页要显示的信息。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <p>欢迎大家学习web前端技术</p>
    </body>
    </html>

头部<head>

  • HTML文档的头部标记主要包含页面标题标记、元信息标记、样式(CSS)标记、脚本(JavaScript)标记、链接标记等。头部标记所包含的信息是说明性信息或引入性信息,一般不会显示在网页上。

  • 页面标题<title> </title>

    • 基本语法

      <title>标题信息显示在浏览器的标题栏上</title>

    • 语法说明:title标记是双标记,<title>是开始标记,</title>是结束标记,两者之间的内容为显示在浏览器的标题栏上的信息。

  • 元信息<meta>

    • META标记用来描述一个HTML网页文档的属性,也称为元信息(meta-information),这些信息并不会显示在浏览器的页面中。例如:作者、日期和时间、网页描述、关键词、页面刷新等。该标记位于文档的头部(其属性形式是键值对)。

    • 基本语法

      <meta name=" " content=" ">

      <meta http-equiv=" " content=" ">

    • 属性说明:meta属性主要分为两组。

    • meta标记是使用方法

      • <meta name="keywords" content="信息参数"/>
      • <meta name="description" content="信息参数"/>
      • <meta name="robots" content="信息参数"/>
      • <meta name="generator" content="信息参数"/>
      • <meta name="author" content="信息参数"/>
      • <meta http-equiv="content-type" content="text/html;charset=信息参数"/>
      • <meta http-equiv="refresh" content="时间;url=网址参数">
    • meta标记键值对对应表

      属性描述
      contentsome_text定义与http-equiv或name属性相关的元信息
      http-equivcontent-type内容类型
      expires网页缓存过期时间
      refresh刷新与跳转(重定向)时间
      set-cookie如果网页过期,那么存盘的cookie将被删除
      nameauthor定义网页作者
      description定义网页简短描述
      keywords定义网页关键字
      generator定义用什么编辑器编写的
      schemesome_text定义用于翻译content属性值的格式
    • name属性与content属性

      • name属性用于描述网页,以键值对的形式,便于搜索引擎查找、分类。
      • 其中最重要的是description、keywords和robots
    • http-equiv属性与content属性

      • http-equiv属性用于提供HTTP协议的响应头报文,以键值对的形式,http-equiv属性的值所描述的内容(值)通过content属性表示,通常为网页加载前提供给浏览器等设备使用。
      • 其中最重要的是content-type charset提供编码信息,refresh刷新与跳转页面,no-cache页面缓存,expires网页缓存过期时间。

主体<body>

主体body是一个Web页面的主要部分,其设置内容是读者实际看到的信息,所有WWW文档的主体部分都是由body标记定义的。在主体body标记中可以放置的是页面中所有的内容,如图片、图像、表格、文字、超链接等元素。

  • 基本语法

    • <body> … </body>
  • 语法说明

    • <body>是开始标记,</body>是结束标记。
    • 两者之间所有的内容为网页上显示的信息。
  • 案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>简易网页设计</title>
    </head>
    <body text="green">
        <h3 align="center">Web前端开发技术课程简介</h3>
        <hr color="red">
    
    
        <p>&nbsp;&nbsp;&nbsp;&nbsp;《Web前端开发技术》课程是计算机科学与技术、信息管理与信息系统、软件工程
            等专业的一门基础课程,也是其他计算机相关专业的公共基础课程,通过对Web前端开
            发三大主流技术学习和研究,让学生理解和掌握HTML、JavaScript、CSS等相关知识,
            通过实验培养学生设计与开发Web站点的基本操作技能。
        </p>
    </body>
    </html>

  • 标记属性

    • 设置body标记属性可以改变Web页面显示效果。body标记主要属性有text、bgcolor、background、link(未点击未激活)、alink(正在激活)、vlink(已经点击过)、topmargin、leftmargin。

    • 基本语法

      <body leftmargin="50px" topmargin="50px"
      text="#000000"  bgcolor="#339999"
      link="blue" alink="white" vlink="red"
      background="body_image.jpg">
    • 属性说明

属性描述
text.rgb(R,G,B),.grb(R%,G%,B%),.#RRGGBB|#RGB,.Colorname规定文档中所有文本的颜色。不赞成使用。请使用样式取代它。
bgcolor同上规定文档的背景颜色
alink同上规定文档中活动链接的颜色
link同上规定文档中未访问链接的默认颜色
vlink同上规定文档中已被访问链接的颜色
backgroundURL规定文档的背景图像
topmargin.Pixel规定文档中上边距的大小
leftmargin.Pixel规定文档中左边距的大小
  • body标记属性-颜色表示方法,在网页设计中,HTML提供了4种颜色设置方法:

    • 使用RGB(R,G,B),其中R、G、B是0-255的整数;
    • 使用RGB(R%,G%,B%),其中R、G、B是0-100的整数;
    • 使用3位或6位十六进制数#RGB或#RRGGBB,R、G、B为十六进制数,取值范围:0-F,每种颜色使用2位十六进制数表示,RR:红色部分、GG:绿色部分、BB:蓝色部分。红色为#FF0000;#RGB可以转换为#RRGGBB,例如红色分别表示为#F00、#FF0000.
    • 使用颜色英文名称,如red表示红色、green表示绿色,blue表示蓝色等。
  • body标记属性-案例(edu_2_3_2.html)

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>body属性应用</title>
        <meta name="Generator" content="VS Code">
        <meta name="Author" content="Windf17">
    </head>
    
    <body text="rgb(00,00,00)" bgcolor="#f0f0f0" background="" link="rgb(0%,100%,0%)" leftmargin="60px" alink="white"
        vlink="red" topmargin="60px">
        <div id="" class="">
            <p>欢迎访问我们的站点,我们为您提供网站地图。</p>
            网站导航:
            <a href="https://www.baidu.com">百度</a>
            <a href="https://www.163.com">网易</a>
            <a href="https://www.sohu.com">搜狐</a>
        </div>
    </body>
    </html>

HTML标签

  • 标记通常分为单标记和双标记两种类型,大部分是双标记。

  • <a> <b> <br> <button> <dl> <dt> <dd> <h1>~<h6> <head> <hr> <html> <i> <iframe> <img> <input> <label> <link> <ol> <li> <p> <s> <script> <select> <option> <span> <style> <table> <thead> <th> <tr> <tbody> <td> <textarea> <title> <u> <ul> <li>

  • 单标记

    • 单标记仅单独使用就可以表达完整的意思。

    • 基本语法:<标记名称>或<标记名称/>

    • 最常用的单标记有:

      • <br>:<br>、<br/>表示换行。

      • <hr>:<hr>、<hr/>表示水平分隔线,还可以定义颜色、宽度(单位是像素)。

        <hr color="black" size="2" />
  • 双标记

    • 双标记由开始标记和结束标记两部分组成,必须成对使用。
    • 基本语法:<标记名称>内容</标记名称>
      • <h3><i>这是错误的交叉嵌套的代码</h3></i> ×
      • <h3><i>这是正确的交叉嵌套的代码</i></h3> √
  • 属性语法

    • 基本语法
      • <标记名称 属性1="属性值" 属性2="属性值" … 属性n="属性值n">
      • <hr size="3" color="red" align="center">
    • 语法约束
      • 属性应该在开始标记(首标记)内定义,并且与标记名之间有一个空格分隔。如上述案例中hr标记名字和size属性之间有一个空格。
      • 属性值一般用英文双引号" "括起来。如上述案例中size属性值"3"和color属性值"red"。
  • 属性语法-案例

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>标记语法及属性语法应用</title>
        <style type="text/css">
            h2 {
                text-align: center;
                background: #6699ff;
                padding: 20px;
            }
        </style>
    </head>
    
    <body background="" text="red">
        <h2 align="center">新&nbsp;年&nbsp;寄&nbsp;语</h2>
        <hr size="2" color="#6600ff" width="100%" />
        <p align="left">&nbsp;&nbsp;&nbsp;&nbsp;轻轻送上我忠诚的祈求和祝愿,祈求分别的时光象流水瞬间逝去,祝愿再会时,紧握的手中满溢友情和青春的力量。</p>
        <p align="right">&nbsp;&nbsp;&nbsp;&nbsp;有一种跌倒叫站起,有一种失落叫收获,有一种失败叫成功——坚强些,朋友,明天将属于你!</p>
    </body>
    </html>
  • 注释

    • HTML代码中添加注释的方法有2种:

      • <!-- 注释信息 -->

      • <comment>注释信息</comment>

        • 基本语法

          <comment>显示一个段落</comment>

        • 语法说明:comment标记是成对标记,以<comment>开始,以</comment>结束。标记包围的信息为注释内容,但在高版本的浏览器中均显示在页面内,建议不使用此注释标记。

HTML文档编写规范

  • 所有标记均以“<”开始,以“>”结束。
  • 根据标记类型,正确输入标记,单标记最好在右尖括号前加一个斜杠“/”,如换行标记是单标记<br/>,成对标记最好同时输入起始标记和结束标记,以免忘记。
  • 标记可以嵌套使用,但不能交叉使用。
  • 在HTML代码中不区分大小写,但为了代码规范建议统一使用小写。
  • 标记中可以设置各种属性,属性值建议使用英文双引号括起来。
  • 书写开始与结束标记时,在左尖括号和标记名或斜杠“/”之间不能有空格,否则浏览器不能识别,导致错误标记直接显示在页面上,影响页面效果。
  • 文档的扩展名为html或htm,建议统一使用html作为文件名的后缀。
  • 文档名只可由英文字母、数字或下划线组成,建议以字母或下划线开始。
  • 文档名中不能含有特殊符号,如空格、$、&等。
  • 文档名区分大小写,一般建议英文小写。
  • Web服务器主页一般是index.html或default.html。

HTML文档类型<!DOCTYPE>标记

HTML4.01规定了三种DTD类型:

严格Strict、过渡Transitional以及框架Frameset。

<!DOCTYPE HTML PUBLIC "-//w3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//w3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//w3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5的DTD定义:<!doctype html>

综合实例

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标记语法及属性语法应用</title>
</head>

<body bgcolor="#cdebe6">
    <h3 align="center">欢度新年元旦</h3>
    <hr size="2" color="red" width="100%" />
    <p align="left">&nbsp;&nbsp;&nbsp;&nbsp;元旦(New Year's Day,New Year),指一年开始的第一天,
        也被称为“新历年”、“阳历年”,在古代指阴历的正月初一,1949年9月27日,中国人民政治协商会议第
        一届全体会议正式确立公历1月1日为元旦。元旦是世界上很多国家或地区的法定假日。</p>
    <div id="" class="=" align="center">
        <img src="timg.jfif" width="300" height="165">
        <img src="timg2.jfif" width="300" height="165">
    </div>
    <hr size="2" color="red" width="100%" />
    <p align="center">Web前端开发技术工作室 Copyright &copy;2017-2020</p>

</body>

</html>

网页效果:

本章小结

本章主要介绍了HTML文件的基本结构。HTML文档包含3个主要标记,其中:

  • <html> </html>分别表示一个HTML文件的开始和结束。
  • <head> </head>分别表示一个文件头部的开始和结束。
  • <body> </body>分别表示一个文件主体的开始和结束。

body标记常用属性有:

text、bgcolor、background、link、vlink、alink、topmargin、leftmargin等。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值