《DW学习笔记》模块二：HTML基础

最新推荐文章于 2024-03-26 22:19:00 发布

风冷晨

最新推荐文章于 2024-03-26 22:19:00 发布

阅读量3.4k

点赞数 6

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_45239751/article/details/115127916

版权

这篇博客详细介绍了HTML的基础知识，包括HTML的概念、功能、文档结构和文字编辑标签，如段落、换行、预定义标签等。此外，还讲解了如何在网页中插入多媒体元素，如音频、视频以及HTML5新增的结构标签。最后，介绍了图文混排、超链接的创建方法，以及表格的制作技巧，包括表格的应用、结构、尺寸和对齐方式的设置。

摘要由CSDN通过智能技术生成

模块二：HTML基础

文章目录

模块二：HTML基础
- 任务1：HTML文档的基本结构和基本语法
- - 一、HTML简介
  - - 1、HTML概念
    - 2、HTML功能
  - 二、HTML文档的基本结构
  - 三、文字版面编辑的标签
  - - 1、META标签
    - 2、HTML body标签
    - 3、段落标签`
      `
    - 4、换行标签`
      `
    - - 例如
      - 输出结果为
    - 5、预定义标签`
```
`
```
    - - 例如
      - 输出结果为
    - 6、分隔标签`
      `
    - 7、列表标签
    - - （1）项目列表和编号
      - （2）例如
      - 输出结果为
      - （3）有序列表`
        
        `常用的type属性
      - （4）无序列表`
        
        `常用的type属性
    - 8、标题标签
    - 9、特定文字样式标签
    - - 例如
    - 10、特殊字符
    - 11、注释标签
  - 四、任务小结
- 补充1：网页中插入多媒体元素
- 补充2：HTML5新增文档结构标签
- - 一、`
    `标签
  - 二、`
    `标签
  - 三、`
    `标签
  - 四、`
    `标签
  - 五、`
    `标签
- 任务2：制作图文混排和超链接网页
- - 一、图像标签``
  - - 1、常见图像格式
    - 2、图像的基本语法
  - 二、超链接标签``
  - 三、在当前文件内创建超链接
  - - 1、其基本语法如下：
  - 四、在不同文件间创建超链接
  - - 1、链接到其他页面
    - - （1）相对路径
      - （2）绝对路径
    - 2、页面链接示意
    - 3、更改链接文字的颜色
    - 4、电子邮箱链接
    - 5、图像和超链接应用
    - - （1）如果将``标签在``和``之间，这个图像将成为一个可单击的图像，并生成一个链接。
      - （2）语法
      - （3）例如
      - 输出为
  - 五、``滚动标签
  - - 1、作用
    - 2、语法
    - 3、说明
    - 4、例如
    - 注
- 任务3：制作表格网页

任务1：HTML文档的基本结构和基本语法

一、HTML简介

1、HTML概念

HTML（Hypertext Mrkdup Language）即超文本标记语言，是一种用来描述网页的计算机语言，我们通常说的网页的源代码就是指HTML。

注：HTML不是编程语言，不同于C语言、Java或C#等编程语言。

2、HTML功能

（1）出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。

（2）通过超链接检索在线的信息。

（3）为获取远程服务而设计表单，可用于检索信息、订购产品等。

（4）在文档中直接包含电子表格、视频剪辑、声音剪辑以及其他的一些应用。

二、HTML文档的基本结构

在这里插入图片描述

三、文字版面编辑的标签

1、META标签

消除网页页面中的乱码
在这里插入图片描述

2、HTML body标签

body定义文档的主题

常用属性

属性	描述
link	设定页面默认的链接颜色
alink	设定鼠标正在单击时的链接颜色
vlink	设定访问后链接文字的颜色
background	设定页面背景图像
bgcolor	设定页面背景颜色
leftmargin	设定页面的左边距
topmargin	设定页面的上边距
bgproperties	设定页面背景图像为固定，不随页面的滚动而滚动
text	设定页面文字的颜色

3、段落标签`<p>`

（1）格式

<p>文字</p>
	或
<p align=参数>文字</p>

（2）属性说明

属性	值	描述
align	left/right/center/justify	不赞成使用，请使用样式取代它，规定段落中文本的对齐方式

（3）例如

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>p标签的使用</title>
</head>
<body>
<p>《无题》唐·李商隐</p>
<p>相见时难别亦难，东风无力百花残。</p>
<p>春蚕到死丝方尽，蜡炬成灰泪始干。</p>
<p>晓镜但愁云鬓改，夜吟应觉月光寒。</p>
<p>蓬莱此去无多路，青鸟殷勤为探看。</p>
</body>
</html>

输出结果为

《无题》唐·李商隐
相见时难别亦难，东风无力百花残。
春蚕到死丝方尽，蜡炬成灰泪始干。
晓镜但愁云鬓改，夜吟应觉月光寒。
蓬莱此去无多路，青鸟殷勤为探看。

4、换行标签`<br>`

在一般文本文件中，只要键入键盘的enter键则可以使文字换行显示。但是在HTML文件中，<br>为换行符号。

例如

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>br标签的使用</title>
</head>
<body>
<p>《无题》唐·李商隐</p>
相见时难别亦难，东风无力百花残。
<br />
春蚕到死丝方尽，蜡炬成灰泪始干。
<br />
晓镜但愁云鬓改，夜吟应觉月光寒。
<br />
蓬莱此去无多路，青鸟殷勤为探看。
</body>
</html>

输出结果为

《无题》唐·李商隐
相见时难别亦难，东风无力百花残。
春蚕到死丝方尽，蜡炬成灰泪始干。
晓镜但愁云鬓改，夜吟应觉月光寒。
蓬莱此去无多路，青鸟殷勤为探看。

5、预定义标签`<pre>`

（1）pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。

注：可以导致段落断开的标签（例如标题、<p>和<address>标签）绝不能包含在<pre>所定义的块里，尽管有些浏览器会把段落结束标签解释为简单的换行，但是这种行为在所有浏览器上并不都是一样的。

例如

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>pre标签示例</title>
</head>
<body>
<pre>pre标签非常适合写计算机程序：
if(a&gt;0)
	b=a;
else
b=-a;

你明白了吗？
</pre>