【HTML】基础，入门先学会这些知识点

最新推荐文章于 2023-11-08 19:35:05 发布

暖橘短衫

最新推荐文章于 2023-11-08 19:35:05 发布

阅读量323

点赞数 3

分类专栏：学习代码文章标签：大数据 html 前端

本文链接：https://blog.csdn.net/knowingna/article/details/125685903

版权

学习同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

代码

20 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础概念，包括HTML的结构、常用特殊符号和基础标签，如段落、标题、图片等，并提供了实际代码示例进行练习。通过学习，读者可以掌握创建网页的基本技能，了解HTML在网页制作中的应用。

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

一、什么是HTML？

HTML（HyperText Markup Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言，也是制作网页的最基本的语言，它可以直接由浏览器执行。

二、HTML的基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

三、常用的特殊符号

大于或小于： > /<
空格从小到大：  /&ensp;/&emsp;
双引号： "
版权符号： ©

四、基本标签

1.基础文本标签

段落标签：<p></p>

换行标签：<br>

分行：<hr>

加粗： <strong> </strong> （用于强调字眼）/ <b></b>

倾斜： <em></em> 倾斜（用于强调）/ <i></i>

标题标签：

<h4>四级标题</h4>(字体大小为1em=16px,与网页中默认字体大小一样)

代码如下：

<!DOCTYPE html><!-- 声明为HTML5文档 -->
<html><!-- HTML页面的根元素 -->
	<head><!-- 头部元素 -->
		<meta charset="utf-8"><!-- 定义网页编码格式为万维码 utf-8 ，防止网页乱码-->
		<title>HTML基本格式</title><!-- 指网页名称 -->
	</head>
	<body><!-- 可以看到的网页内容 -->	
		<p>这是我的第一个网页</p>
	</body>
</html>

效果如下（示例）：

对应练习

基本标签小练习：

<!Doctype html>
<html>
	<head>
	<title></title>
	</head>
	<body>
		<div>
			<h1>人物简介</h1>
			<p><b>李清照</b>（<i>1084年3月13日~1155年5月12日</i>），宋代女词人，号易安居士，婉约词派代<br>表，
			有“千古第一才女”之称。早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦。<br>所作词，
			前期多写其悠闲生活，后期多悲叹身世，情调伤感。形式上善用白描手法，自辟<br>
			途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之<br>
			法作词，留有诗集《易安居士文集》、《易安词》等。</p>
			<hr>
			&copy;&ensp;**版权所有
		</div>
	</body>
</html>

效果如下：

2.图片标签

alt=“ ” 在网络较慢的环境中，如果没有出现图片，那么将以图片替代文本显示

title=" " 在鼠标放置图片上面时提示的文本 (大多数的标签中都会有这个属性，会慢慢接触到)

图片路径分为两种：

(1).绝对路径：就是图片在自己电脑中具体位置文件夹中，在电脑中的位置；

(2)相对路径：参照自身的位置，而定义的路径，叫做相对路径;(强烈建议使用)

相对路径有三种表示方法

a.Html文档和图片在同一个文件夹下，直接写图片名称；

b.Html文档和图片所在的文件夹在同一个文件夹下，先写文件夹名称，再写图片名称；

c.Html文档所在文件夹和图片所在文件夹在同一个文件夹下，则需要先用”../ ”找到根文件夹，再写图片所在文件夹的名称，最后写图片名称。

图片标签小练习：

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>京东读书新闻资讯页面</title>
	<meta charset="utf-8"/>
  </head>
  <body>
    <h1>看不见的完美硬币 ：细节的负担</h1>
    <h2>创新公司皮克斯的启示</h2><hr/>
	<p><img src="../img/书籍.jpg"  title="书籍"/><br/>
	<em>&nbsp;&nbsp;细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。</em><br/>
	<em>但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。</em><br/>
	<em>怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</em><br/>
	<h3>看不见的完美硬币：细节的负担</h3>
	</p>
  </body>
</html>

效果如下：