HTML笔记

最新推荐文章于 2024-10-02 17:15:49 发布

优秀齐子豆

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量381

点赞数 2

分类专栏：作业笔记文章标签： html

本文链接：https://blog.csdn.net/qq_45136716/article/details/115085958

版权

笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

作业

2 篇文章 0 订阅

订阅专栏

HTML

1.HTMl是什么？

HTML是一种超文本标记语言，何为超文本，顾名思义：超越文本（不仅仅可以记录文字，还包括图片、视频、超链接等等），标记：标签，用来标记信息的，
那么为什么要学习HTML呢？
我们所谓的前端其实由三大要素组成：HTML、CSS、javascript。HTML相当于前端的身体，框架。CSS相当于皮肤、血液。javascript相当于灵魂。要学习前端知识，HTML就成了必经之路。

2.学习HTML用到的工具

既然是前端，那必然要先说一下浏览器，当今主流的浏览器：谷歌（v8引擎）、火狐、IE、safair（苹果）、欧朋。这些都是有自己内核的浏览器，建议安装两到三个，因为一样的HTML在不同的浏览器可能会有不同的结果。

3.常用标签

既然前端由三要素组成，那么html必然也有它的组成要素：头、身体、结尾（忽略）

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

1.html文件都是由一对对标签开始以及结尾的
2.跟标签：所有的标签都要写在html标签中（规范）
3.头：head标签，定义头信息，编码信息，标准信息，也可以定义CSS样式

<html>
	<head>
		<meta charset="utf-8">
		<title>这是一个新手网页</title>
	</head>
	<body>
	</body>
</html>

网页示例：
在这里插入图片描述
title标签里的内容为头信息，在网页左上角中显示，
代码中的<meta charset="utf-8">即为编码信息，统一规范，当然也可以写成JBK等等，只是一般写为utf-8.
标准信息：

<meta charset="utf-8">
		<title>这是一个新手网页</title>
		<p>我的第一个网页</p>

在这里插入图片描述
head标签中也可以写标准信息，即正文中的信息。
4.身体：由body标签包裹，里面可以放各式各样的标签，这里就可以说说常用标签了
h#标签：由1-6组成，越来越小
<h1>一级标题</h1> <h2>二级标题</h2> <h6>六级标题</h6> 在这里插入图片描述
p标签：段落标签，默认占一行
span标签：通常没有特殊含义，修饰行内文字
u标签：加下划线
b标签和strong标签：加粗
i标签和em标签：斜体
blockquote标签：自动缩进
br标签：换行
del标签：删除线

<p>常用标签演示</p>
		<span style="color: red;">
			sapn标签修饰行内文字
		</span>
		<u>u标签的下划线</u>
		<b>我是加粗标签</b>
		<strong>我才是加粗标签</strong>
		<i>我是斜体</i>
		<em>我才是真正的斜体</em>
		<blockquote>这里表演个自动缩进</blockquote><br>
		<del>我过时了删除掉吧</del>

网页演示：
在这里插入图片描述
这里有没有发现一个问题：p标签下面这些标签，我要是不给br换行标签，他不会自动换行，那么为什么p标签自动换行了呢，这里涉及到一个问题：标签分为段落标签和行内标签，p标签就是段落标签，顾名思义，占一行，行内标签就是写完一个另一个接着后面继续写，
行内标签中还有两个标签属于行内块元素：a标签和img标签。
a标签：超链接，里面有一个属性href，后面跟一个url（统一资源定位符）：协议+ip+端口号，学过网络的都应该知道
img标签：图片标签，有两个属性，scr：给定url，alt：未找到图片时的提示

<a href="https://www.baidu.com">百度</a>
		<img src="../img/5.jpg" alt="没找到图片">

演示示例
在这里插入图片描述
我们不难看出，百度的超链接和这个图片其实是占了一行中的两块。
a标签还有一个用法，锚点。

<a href="#dd">回到底部</a>
<a name="dd">底部</a>

示例：
在这里插入图片描述

点击回到底部就会直接跳转到底部
用法：name中的属性自动定义
href中的根据name所定义

列表：有序列表用ol标签，无序列表用ul标签，无论是什么列表，都要包含列表项（li标签）当然了，如果头铁偏不包含，也不是不行，只是会无意义罢了。

<ol>
			<li>陕西理工大学
			<!-- 恬不知耻的排序 -->
			<ul>
				<li>数计学院</li>
				<li>机械学院</li>
				<li>体育学院</li>
			</ul>
			</li>
			<li>北京大学</li>
			<li>清华大学</li>
		</ol>