前端学习笔记：HTML篇（1）

最新推荐文章于 2025-01-18 10:12:39 发布

原创最新推荐文章于 2025-01-18 10:12:39 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML的基本结构，包括文档类型声明、头部元信息、样式和脚本的使用，以及页面内容的布局。深入探讨了文本格式化、列表、图像和链接的创建方法，适合初学者快速掌握HTML的核心要素。

1.HTML页面的基本结构如下所示：

<!DOCTYPE html><!--DOCTYPE文档类型声明，必须放在第一行-->
<html>
<head>
	<title></title><!--标题-->
	<meta  http-equiv="Content-Type" content="text/html;charset=utf-8"><!--指定页面编码,这里使用utf-8编码-->
	<style type="text/css">
		/*css样式写在style标签内*/
	</style>
	<script type="text/javascript">
		/*javascript样式写在style标签内,也可以写在body标签里面*/
	</script>
	<link rel="stylesheet" type="text/css" href=""><!--引入外部样式文件-->
	<script src=""></script><!--引入js文件-->
</head>
<body>
	<!--页面内容写在body标签内-->
</body>
</html>

2.文字和段落

	<h1>标题标签，有h1到h6，h1字体最大</h1>
	<p align="">HTML:Hypertext Markup Language,超文本标记语言</p>
	<!--p标签,
	align属性有四个值left；right；center；justify
	justif是伸展对齐，这样每行都可以有相等的长度-->
	<hr />
	<!--水平线，其属性有：
		width设置水平线宽度，可以是像素或百分比；
		color设置水平线颜色；align设置水平线居中对齐；
		noshade设置水平线无阴影-->
	<br/><!--换行 -->
	&nbsp;<!--空格-->
	<pre>
	pre 元素可定义预格式化的文本。被包围在 pre 元素
  中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。简而言之，内容在编辑器里面是什么样子，
  在浏览器里面就是什么样子。
	</pre>
	<i>文字斜体</i>
	<em>文字斜体</em>
	<b>文字加粗</b>
	<strong>文字加粗</strong>
	<sub>下标</sub>
	<sup>上标</sup>
	<ins>下划线</ins>
	<del>删除线</del>

algin对齐属性值

值	描述
left	左对齐内容
right	右对齐内容
center	居中对齐内容
justify	对行进行伸展，这样每行都可以有相同的长度

HTML页面中显示特殊符号，如；》@

在html中，使用转义字符表示空格、< 等特殊符号，常用的特殊符号主要有以下几个

3.列表标签

<!DOCTYPE html>
<html>
<head>
	<title>列表标签</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
	<p>无序列表没有顺序，每个内容前面有个符号作为标识，默认是一个黑色小圆点， 
	ul标签有一个type属性，可以改变符号类型，属性值有 disc圆点，square正方形，
	circle空心圆</p>
	<ul type="square">
		<li>无序列表1</li>
		<li>无序列表2</li>
		<li>无序列表3</li>
		<li>无序列表4</li>
	</ul>

	<p>有序列表，类似ul标签，有一个type属性。属性值有：1（数字1、2...），
	a（小写字母a、b...），A（大写字母A、B...），i（小写罗马数字i），
	I（大写罗马数字I）</p>
	<ol type="a">
		<li>有序列表1</li>
		<li>有序列表2</li>
		<li>有序列表3</li>
		<li>有序列表4</li>
	</ol>

	<p>定义列表</p>
	<dl>
		<dt>111111</dt>
		<dd>222222</dd>
		<dt>111111</dt>
		<dd>444444</dd>
		<dd>444444</dd>
	</dl>
	<dl>
		<dt>111111</dt>
		<dd>222222</dd>
		<dt>111111</dt>
		<dd>444444</dd>
		<dd>444444</dd>
	</dl>
</body>
</html>

4.图像和连接

<!DOCTYPE html>
<html>
<head>
	<title>图像、链接</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
	<p>图像标签</p>
	<p>注意绝对路径和相对路径</p>
	<!--绝对路径：从盘符开始直到找到对应文件，如C:\Users\yi\Desktop\html\img\Koala.jpg
		相对路径：图片相对于网页所在的路径，如3.html和koala.jpg在同一目录下，则写为 src="kolal.jpg"；
				../代表一个上一级（3.html页面文件所在路径的上一级），上一级的上一级表示为../../  -->
	<img src="img/Koala.jpg" alt="" height="100px" width="100px">

	<p>链接</p>
	<a href="#" target="_blank" title="123" name="">内容</a>
	<!--_blank表示打开新标签页，target的属性值还有_self，_top，_parent-->

	<p>图片与链接的结合，另外a标签也可以与其他标签结合</p>
	<a href="2.html"><img src="img/Koala.jpg" height="100px" width="100px"></a>

	<p>邮件链接</p>
	<!-- <a href="mailto:邮件地址"></a> -->
	<p>文件下载链接</p>
	<a href="file/file.rar">文件下载</a>
	<!-- <a href="下载文件的地址"></a> -->
</body>
</html>