【HTML笔记01】（必须会，很基础很基础）_写html的时候在前面加一个点大扩号是什么意思-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42533634/article/details/86645061

本文介绍HTML的基本概念和常用标签，包括标题、段落、图片、列表和超链接等元素的使用方法，适合初学者快速入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

了解HTML

HTML:超文本标记语言Hyper Text Markup Language
超文本语言：比普通文本强大，可以更改样式
标记语言：通过标签进行描述<>

html标签（根标签）分为

head：页面信息
body：页面内容

通过标签对内容描述：

开始标签<>
结束标签</>
标签不区分大小写

<!-- 文档声明 -->
<!DOCTYPE html>	 
<!-- 根标签 -->
<html>
<head>
	<!-- 网页的配置信息 -->
	<!-- 指定浏览器的编码方式 -->
	<meta charset="utf-8">
	<!-- 网站的标题 -->
	<title>练习</title>
</head>
<body>
	hello world!你好
</body>
</html>

HTML 通过小练习了解标签

段落信息案例

在这里插入图片描述

标题标签 —— h1~h6

分割线 —— hr

段落标签 —— p

字样式标签 —— font

font 的属性 color 、size 、face

属性	含义
color	颜色
size	大小（1~7）
face	字体

加粗标签 —— b / strong

strong 标签为带感情有语气的标签（在为盲人制作的可朗读网页中会强调这标签中的内容）推荐使用

斜体标签 —— i / em

em 标签为带感情有语气的标签（在为盲人制作的可朗读网页中会强调这标签中的内容）推荐使用

图片标签 —— img

img 的属性 src 、width 、height 、alt

属性	含义
src	路径
width	宽（单位：像素）
height	高（单位：像素）
alt	找不到图片时的提示信息（如图）

在这里插入图片描述

src：

相对路径：
一个点/ 当前目录
两个点/上一层目录
html文件跟*.jpg文件(f盘)在不同目录下：
img src=“file:///f:/*jpg” width=“300” height=“120”
html文件跟*.jpg图片在相同目录下：
img src=".jpg" width=“300” height=“120”
html文件跟*.jpg图片在不同目录下：
a、图片*.jpg在image文件夹中，*html跟image在同一目录下：
img src=“http://xxxxxxxxxxxx” width=“300” height=“120”

列表标签

在这里插入图片描述

无序列表 —— ul

ul 属性 type

值	效果
disc	实心圆（默认）
circle	空心圆
square	实心方块

有序列表 —— ol

ul 属性 type 、start

属性	含义
type	排序样式（“a”，默认为数字）
start	从多少开始（用于type为数字时）

超链接 —— a

a 的属性 href 、target

属性	含义
href	网址
target	弹出网址方式，_self（当前页打开）/ _blank（新窗口打开）/ 也可以指定

代码

<!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8">
 	<title>HTML简介</title>
</head>
<body>
 	<h1>HTML简介</h1>
 	<hr>
	 <p><font color="red">超文本标记语言</font>，标准通用标记语言下的一个应用。<b>是网页制作必</b>备的<i>编程语言</i>。</p>
	 <p><strong>“超文本”</strong>就是指页面内可以包含<em>图片、链接，甚至音乐、程序</em>等非文字元素。</p>
	 <p>超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p>
 	<img src="file:///H:/001.jpg" width="160" height="149" alt="sorry">
	 <ul type="disc">
  		<li><a href="https://www.baidu.com/" target="_blank">想不通就百度一下</a></li>
 		 <li><a href="https://www.baidu.com/" target="_self">想不通就百度一下</a></li>
 	</ul>
</body>
</html>

在这里插入图片描述