html之初入笔记小结

最新推荐文章于 2024-07-25 11:26:35 发布

抄代码抄错的小牛马

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量567

点赞数 2

分类专栏：笔记文章标签： html 前端

本文链接：https://blog.csdn.net/qq_61122628/article/details/121729010

版权

笔记专栏收录该内容

28 篇文章 2 订阅

订阅专栏

8 嘎嘎嘎嘎嘎嘎~~~继续整~~~嘿嘿嘿~~~

1 基本了解

1 网页的扩展名：.html

2 HTML是描述网页的语言，是指超文本标记语言，不是编程语言，是一种标记语言。

3 web中文名：万维网（万维网联盟），外语缩写：W3C ，是一个组织，全球4个中心中有“北京航空航天大学！！！”

2 最基本的格式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 网页的标题</title>
	</head>
	
     <body>
           你网页出现的东西
	</body>
</html>

1 <html lang=" "> 表示网页的语言是什么，告诉浏览器“代码的语言”是什么语言，如果与本地的系统语言不一致，则会弹出一个翻译窗口。（大概是这样，嘿嘿~~）例如：en表英语，zh-CN表中文，ja-jp表日文。。。。

2 <meta charset=" "> 以.....编码，浏览器按照.....来解码。告诉浏览器以什么编码来进行解码！有这些编码：ASCLL ISO-8859-1 UTF-8.....(一般用utf-8,它最常用！！）

3 常用标签

1 文本标签 <h1>一级标题</h1>...<h6>六级标题</h6> (只有1~6的标签，并且他们自动加粗，有自己的文本大小，1最大，6最小，他们也是独占一行，有默认的间距！！！）

2 段落文本 <p> 段落文本内容</p>  标识一个段落（段落与段落之间有间距—）

3 换行 <br/>或者<br> 空（单）标签，在此处强制换行

4 水平线 <hr/>或者<hr>   单标签，在此处画一条水平线。

5 加粗 <strong>加粗内容</strong>或者<b>加粗内容</b>

6 倾斜 <i>...</i> or <em>....</em>

7 删除线 <s>....</s> or <del>....</del>

8 扩展 <u>....</u>为下划线，<sub>...</sub>为下标，<sup>.....</sup>为上标

9 注释 定义注释，只会在代码里看到，网页中是不会显示的。

10 更多  HTML 标签参考手册

4 特殊符号

HTML特殊字符符号大全 – WEB骇客

5 插入图片和超链接

1 <img src="链接地址“ >

2 <a href=" ">点我，我是链接噢</a> 这个是在当前的窗口打开链接

3 <a href=" " target="_blank">点我啊，我是链接啊</a> 这个是在新的窗口打开链接。

6 有序，无序，自定义列表

HTML 列表

7 简易百度网盘制作练习

1 找好自己想在网页的的图片素材等，并想一想应该怎么构造框架！

2 将素材放在创建的HTML项目同一级目录下（好找，可以命名为Iimg ）

3 开整！！！

bai

百度网盘总目录.html

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src='../Iimg/2.PNG' width="100%" />
		<p>
			<a href="../百度网盘总目录.html">
				<img src='../Iimg/6.jfif' height="40" />
			</a> 
		</p>
		<p>
			<img src='../Iimg/5.PNG' />
		</p>
		
	</body>
</html>

one.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src='../Iimg/2.PNG' width="100%" />
		<p>
			<a href="../百度网盘总目录.html">
				<img src='../Iimg/6.jfif' height="40" />
			</a> 
		</p>
		<p>
			<img src='../Iimg/5.PNG' />
		</p>
		
	</body>
</html>

two.html

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title></title>
 	</head>
 	<body>
 		<img src='../Iimg/2.PNG' width="100%" />
 		<p>
 			<a href="../百度网盘总目录.html">
 				<img src='../Iimg/6.jfif' height="40" />
 			</a> 
 		</p>
 		<p> 
			<a href="three/three.html">
				<img src='../Iimg/4.PNG' height="150" />three
			</a>
 			<img src='../Iimg/8.PNG' />
 		</p>
 		
 	</body>
 </html>

three.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href='../two.html'>
		 <img src='../../Iimg/6.jfif' height="40" /><br/>
		 </a>
		 
		<a href="http://www.bjnews.com.cn/news/2019/05/06/575468.html"	target="_blank">点击这个，整蛊黄网
		</a>
	</body>
</html>