第一章 HTML语言基础

第一节 HTML的基本结构

1.什么是HTML

  • HTML(Hyper Text Mark-up Language),超文本标记语言。它包含了很多不同的标签（标题标签(h1-h6),段落标签(p)）,通过浏览器加载这些标签，呈现不同的内容。
  • HTML文件的扩展名是.htm或.html
  • HTML语言要靠浏览器执行

2.如何运行HTML文件

通过不同种类的浏览器打开html文件：IE,FIrefox,Chrome

3.HTML文档结构

  • <html>标签
    是文档的根标签，所有网页中的内容都要定义在根标签之间
  • <head>标签
    文档的头部，用于配置网页的相关属性。比如:title,css样式,js脚本,网页内容概要,搜索关键字,网页内容的编码<meta>
  • title标签
    配置网页的标题信息
  • body标签
    网页所有信息内容都是写在body标签中的:文本,超链接,图片,视频
  • <meta>标签
    通过<meta>标签可以配置网页内容编码格式
    ...
    <head>
    <meta charset="utf-8/gbk/gb2312"/>
    <meat http-equiv="Content-type" content="text/html;charset=utf-8" />
    </head>
    ...

4.HTML注释和特殊字符

注释:就是为代码加以解释，另外也可以使用注释屏蔽无用的代码

格式:

<!-- 注释的内容 -->

特殊符号htm编码&copy;&reg;<&lt;>&gt;空格&nbsp;

第二节 创建HTML文档

  • 用记事本创建HTML
  • 用EditPlus创建HTML
  • 用HBuilder创建HTML

第三节 常用HTML标签

标签的写法：

  • 标签以<开始以>结束
  • 成对标签的格式:<标签名>内容</标签名>
    空标签:<标签名 />
  • 标签名不区分大小写,推荐用小写

1.<h1>~<h6>标题标签

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META name="Generator" content="EditPlus">
  <META name="Author" content="">
  <META name="Keywords" content="">
  <META name="Description" content="">
 </HEAD>
​
 <BODY>
  <!--标题标签-->
  <h1>这是1级标题</h1>
  <h2>这是2级标题</h2>
  <h3>这是3级标题</h3>
  <h4>这是4级标题</h4>
  <h5>这是5级标题</h5>
  <h6>这是6级标题</h6>
  <!--
  没有h7，浏览器自动忽略该标签
  <h7>这是7级标题</h7>
  -->
  这是普通内容
​
 </BODY>
</HTML>
​


2.<p>段落标签

p:用于表示一个段落，段落之间会存在段间距

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META name="Generator" content="EditPlus">
  <META name="Author" content="">
  <META name="Keywords" content="">
  <META name="Description" content="">
 </HEAD>
​
 <BODY>
  <h3>今天天气非常热</h3>
    <p>
    各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况
    </p>
    <p>
    各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况各地出现不同的情况
    </p>
 </BODY>
</HTML>
​

3.<br/>换行标签

br:让内容换行，换行的两行之间没有间距

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META name="Generator" content="EditPlus">
  <META name="Author" content="">
  <META name="Keywords" content="">
  <META name="Description" content="">
 </HEAD>
​
 <BODY>
    <h1>再别康桥</h1>
    <p>
    作者：徐志摩
    </p>
    <p>
    轻轻的我走了，<br/>
    正如我轻轻的来；<br/>
    我轻轻的招手，<br/>
    作别西天的云彩。<br/>
    </p>
    <p>
    那河畔的金柳，<br/>
    是夕阳中的新娘；<br/>
    波光里的艳影，<br/>
    在我的心头荡漾。<br/>
    </p>
    <p>
    软泥上的青荇，<br/>
    油油的在水底招摇；<br/>
    在康河的柔波里，<br/>
    我甘心做一条水草！<br/>
    </p>
    <p>
    那榆荫下的一潭，<br/>
    不是清泉，是天上虹；<br/>
    揉碎在浮藻间，<br/>
    沉淀着彩虹似的梦。<br/>
    </p>
    <p>
    寻梦？撑一支长篙，<br/>
    向青草更青处漫溯；<br/>
    满载一船星辉，<br/>
    在星辉斑斓里放歌。<br/>
    </p>
    <p>
    但我不能放歌，<br/>
    悄悄是别离的笙箫；<br/>
    夏虫也为我沉默，<br/>
    沉默是今晚的康桥！<br/>
    </p>
    <p>
    悄悄的我走了，<br/>
    正如我悄悄的来；<br/>
    我挥一挥衣袖，<br/>
    不带走一片云彩。<br/>
    </p>
 </BODY>
</HTML>
​

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META name="Generator" content="EditPlus">
  <META name="Author" content="">
  <META name="Keywords" content="">
  <META name="Description" content="">
 </HEAD>
​
 <BODY>
    <h1>再别康桥</h1>
    <p>
    作者：徐志摩
    </p>
    <p>
    轻轻的我走了，<br/>
    正如我轻轻的来；<br/>
    我轻轻的招手，<br/>
    作别西天的云彩。<br/>
    </p>
    <p>
    那河畔的金柳，<br/>
    是夕阳中的新娘；<br/>
    波光里的艳影，<br/>
    在我的心头荡漾。<br/>
    </p>
    <p>
    软泥上的青荇，<br/>
    油油的在水底招摇；<br/>
    在康河的柔波里，<br/>
    我甘心做一条水草！<br/>
    </p>
    <p>
    那榆荫下的一潭，<br/>
    不是清泉，是天上虹；<br/>
    揉碎在浮藻间，<br/>
    沉淀着彩虹似的梦。<br/>
    </p>
    <p>
    寻梦？撑一支长篙，<br/>
    向青草更青处漫溯；<br/>
    满载一船星辉，<br/>
    在星辉斑斓里放歌。<br/>
    </p>
    <p>
    但我不能放歌，<br/>
    悄悄是别离的笙箫；<br/>
    夏虫也为我沉默，<br/>
    沉默是今晚的康桥！<br/>
    </p>
    <p>
    悄悄的我走了，<br/>
    正如我悄悄的来；<br/>
    我挥一挥衣袖，<br/>
    不带走一片云彩。<br/>
    </p>
 </BODY>
</HTML>
​

4.格式化标签

  • <center>居中标签
  • 有序列表标签<ol><li>
  • 无序列表标签<ul><li>
  • 水平线<hr/>
  • 自定义列表标签dl dt dd
  • 预格式化标签pre
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META name="Generator" content="EditPlus">
  <META name="Author" content="">
  <META name="Keywords" content="">
  <META name="Description" content="">
 </HEAD>
​
 <BODY>
  <center>
    <h3>什么是HTML语言？</h3>
  </center>
  <!--hr:水平线-->
  <hr/>
  <!--
    ol: order list 有序列表
    li: list item 列表项
  -->
  <ol>
    <li>HTML是超文本标记语言</li>
    <li>HTML有很多标签</li>
    <li>扩展名是.html或.htm</li>
  </ol>
​
  <hr/>
  <!--
    无序列表:
    ul : unorder list 无序列表
    li : list item 列表项
  -->
  <ul>
    <li>HTML是超文本标记语言</li>
    <li>HTML有很多标签</li>
    <li>扩展名是.html或.htm</li>
  </ul>
 </BODY>
</HTML>
​

5.文本标签

  • 字体形状标签
    <b> : 加粗 bold
    <u> : 加下划线 underline
    <i> : 斜体 italic
    <sub> : 下标
    <sup> : 上标 super
    <b>这是B的效果</b><br/>
    <u>这是U的效果</u><br/>
    <i>这是i的效果</i><br/>
    A<sup>上标</sup>
    B<sub>下标</sub>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META name="Generator" content="EditPlus">
  <META name="Author" content="">
  <META name="Keywords" content="">
  <META name="Description" content="">
 </HEAD>
​
 <BODY>
    <center>
        <b>
            枫桥夜泊 
            <sub>作者：张继</sub>
        </b>
        <br/>
        <p>
            月落<i>乌啼</i>霜满天，江枫<u>渔火</u>对愁眠。
        </p>
        <p>
            姑苏城外寒山寺<sup>①</sup>，夜半钟声到客船。
        </p>
      </center>
 </BODY>
</HTML>
​
  • 字体样式标签<font>

    <font size="字号" face="字体" color="颜色">文本</font>

标签属性说明:

size:字号 1-7

face:字体类型，windows安装的字体。常用:隶书,幼圆,黑体

color:颜色关键字(red,blue,yellow), 6位16进制表示法(#ffffff)，rgb(红色[0-255],绿色[0-255],蓝色[0-255])

<font size="7" face="幼圆" color="red">猪八戒</font><br/>
<font size="7">猪八戒</font>

6. 图像标签<img>

常用的图片格式:

<BMP> : windows位图，图片清晰度高，但是尺寸大，网页中的图片一般不用bmp。

<JPG> : 文件扩展名为.jpg或.jpeg , 图像品质高，下载速度快。

<GIF> : 图片压缩比高，磁盘空间占用较少，可制作2D动画文件。

<PNG> : 是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30%的无损压缩图像文件

语法:

<img src="图片文件路径" 
     title="描述图片信息在鼠标放在图片上时呈现" 
     alt="图片无法显示时的提示"
     width="宽度"
     height="高度"
     align="对齐方式:left/right"
     />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META name="Generator" content="EditPlus">
  <META name="Author" content="">
  <META name="Keywords" content="">
  <META name="Description" content="">
 </HEAD>
​
 <BODY>
  <!--
  1.文件和图片先保存到一个目录中
  2.使用img标签引用图片
  -->
  <img src="swk.jpg"
       title="齐天大圣"
       alt="美猴王"
       width="100"
       height="100"
       align="left"
       />
  这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空
 </BODY>
</HTML>
​


7.文件路径

  • 相对路径
    相对:相对于当前页面所在的位置来定位资源文件。
    a. 要引用的资源与当前页面在同一目录下

    <img src="资源文件名"/>
    b.要引用的资源位于当前页面所在目录的下级目录

    <img src="子目录/资源文件名"/>
    c.要引用的资源位于当前页面所在目录的上级目录

    <img src="../资源文件名"/>
    ​
    其中: ../ 指的是访问上层目录
  • 绝对路径
    如果资源文件的路径带了根盘符，或者服务器根地址，这个路径称为绝对路径。一般不推荐使用

    <img src="E:\workarea\html_dev\PM903\lesson1\img\swk.jpg"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META name="Generator" content="EditPlus">
  <META name="Author" content="">
  <META name="Keywords" content="">
  <META name="Description" content="">
 </HEAD>
​
 <BODY>
  <!--
  1.文件和图片先保存到一个目录中
  2.使用img标签引用图片
  -->
  <img src="../swk.jpg"
       title="齐天大圣"
       alt="美猴王"
       width="100"
       height="100"
       align="left"
       />
  这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空这是孙悟空
 </BODY>
</HTML>

8.超链接标签<a>

语法:

<a href="链接的目标页面">链接文本</a>
  • 链接互联网的网站上

    <a href="baidu.com">百度</a> ||
    <a href="taobao.com">淘宝</a>||
    <a href="jd.com">京东</a>
  • 链接本地页面

    <body>
    <center>
    <h1>一年四季</h1>
    <hr/>
    <a href="spring.html">春天</a>
    <a href="summer.html">夏天</a>
    <a href="fall.html">秋天</a>
    <a href="winter.html">冬天</a>
    <hr/>
    <!--图片超链接-->
    <a href="spring.html">
    <img src="swk.jpg"/>
    </a>
    </center>
    ​
    </body>

9.锚点

在网页中可以设置一个标记用于定位，这个标记就称为锚点

定义锚点:

<a name="锚点名称">普通文本</a>

跳转到锚点:

<a href="#锚点名称">链接文本</a>


第四节 HTML5新增标签

1.文档结构标签

<header>:文档内容页眉

<nav>:文档内容导航

<footer>:文档的页脚

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
​
 <body>
  <header>
    这是文档内容的页眉(头部)
  </header>
  <nav>
    <a href="#">菜单1</a>
    <a href="#">菜单2</a>
    <a href="#">菜单3</a>
    <a href="#">菜单4</a>
    <a href="#">菜单5</a>
  </nav>
  <p>
    这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容这是文档的主体内容v
  </p>
  <footer>
    这是文档内容的页脚
  </footer>
 </body>
</html>
​

2. 视频标签<video>

语法：

<video src="视频文件名" autoplay="autoplay" controls="controls" width="宽度"/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
​
 <body>
  <video src="郭静 - 你的香气.mp4" autoplay="autoplay" controls="controls"/>
 </body>
</html>
​


第五节 标签的分类

块状标签：独自占一行 h(标题标签),p(段落标签), div(最纯净的块状标签，通常用于页面布局)

行内标签: 内容挤到一行 b(加粗),u(下划线),i(斜体) span(最纯净的行内标签,通用于限定内容)

行内块状标签: 同时具有块状和行内的特征,挤在一行显示，可以设置宽和高 典型的行内块状标签:img

如何区分一个元素是块状还是行内元素:

把一个元素在页面中写两次，看呈现的效果是分行显示，还在挤在一行显示，如果分行显示，说明这个元素是块状元素。如果挤在一行显示，说明这个元素，是行内元素。

作业


1.使用文档结构标签(header,nav,footer)实现如下效果

2.使用sub sup 标签完成如下内容

3.使用标题标签和段落标签完成如下内容

4.使用文本强调标签<b> <i> <em> <strong> 完成如下内容

发布于 2019-12-16 09:45
HTML 入门
HTML 解析
HTML