第一章网页制作的基础知识（续）

温吞-ing

已于 2024-09-27 19:01:06 修改

阅读量947

点赞数 10

文章标签：前端 html5 css

于 2024-09-11 20:08:24 首次发布

本文链接：https://blog.csdn.net/2401_82355990/article/details/142133542

版权

1.5 HTML语法基础

1.5.1 HTML概述

HTML即超文本标记语言，用来制作超文本文档。

1.超文本：超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

2.标记：HTML5是一种标记语言。标签分为单标签（eg:<meta>）和双标签（eg:<head></head>）。

注：双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号号添加一个关闭符号"/"。

1.5.2 HTML基本结构

HTML文档是由一系列的元素和标签组成的。\

1. HTML文档标签<html>...</html>

<html>HTML文档的内容</html>

2. HTML文档头标签<head>...</head>

<head>头部的内容</head>

3. 文档编码

<meta charset="utf-8"/>

文档声明的编码应该与实际编码一致，否则将乱码。

4. HTML文档主体标签<body>...</body>

<body>网页的内容</body>

1.6 创建HTML文档

1.“文件”菜单→“新建”→“html文件”

2.“文件”菜单→“新建”→“项目”，然后如下图：、

1.7 网页头部标签

HTML <head> 标签用于定义文档的头部，包含了一些元数据和引用的外部资源，但并不会直接展示在页面上。 <head> 标签位于 <html> 标签内部，紧跟在 <html> 开始标签之后，在 <body> 开始标签之前。

1.7.1 <title>标签

HTML <title> 元素定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

属性:这个元素只拥有全局属性。

<title>标题</title>

1.7.2 <meta>标签

<meta name="参数"content="参数值">

1 keywords:用来告诉搜索引擎网页使用的关键字。

2 description::用来告诉搜索引擎网站主要的内容。

1.7.3 <link>标签

<link rel="stylesheet" href="外部样式表文件名.css"type="text/css"/>

1.7.4 <script>标签

<scripttype="text/css"src"脚本文件名n.js"></script>

1.8 HTML5文档注释和特殊符号

1.8.1 注释

为增加HTML5文档的可读性，可为其添加注释部分。

<!--......-->(注：支持单行和多行）

1.8.2 特殊符号

1.9 综合案例——临江仙 · 送钱穆父

用一首宋词为例子，参照给定的HTML代码和图片资源，利用HBuilder设计Web网页。

<!DOCTYPE html>
<html>
	<head>
		<meta name="keywords"content="宋词,苏轼" charset="utf-8" />
		<title>宋词精选</title>
		<style type="text/css">
			P{
				text-align:center;
				font-size:larger;
			}
			</style>
	</head>
	<body bgcolor="antiquewhite" text="#333333">
		<h2 align="center">临江仙·送钱穆父</h2>
		<p>宋 苏轼</p>
		<!--使用<br/>的效果-->
		<p>一别都门三改火，天涯踏尽红尘。<br/>
		依然一笑作春温。<br />
		无波真古井，有节是秋筠。<br/>
		惆怅孤帆连夜发，送行淡月微云。<br/>
		尊前不用翠眉颦。<br/>
		<font color="brown"face="微软雅黑">人生如逆旅，我亦是行人。</font></p>
		<img src="img/ljx.jpg"/>
		<!--水平线-->
		<hr size="2" color="black" width="100%"/>
		<p align="center">网页制作教程 Copyright&copy;广东南方职业学院</p>
	</body>
</html>

浏览效果图：