Web前端学习——HTML

最新推荐文章于 2024-07-21 12:12:15 发布

冬日可可爱爱

最新推荐文章于 2024-07-21 12:12:15 发布

阅读量54

点赞数

分类专栏： Web前端文章标签： html vscode html5

本文链接：https://blog.csdn.net/qq_44251461/article/details/120070365

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Web前端学习——HTML（1）

参考资料

学习内容见注释

记事本编写的案例

index.html

<html>
	<head>
		<title>哈哈，我在哪出现</title>
	</head>
	<body>
		<h1>回乡偶书二首</h1>
		<h2>其一</h2> 
		<h2>贺知章</h2>
		<p>少小离家老大回</p>
		<p>乡音无改鬓毛衰</p>
		<p>儿童相见不相识</p>
		<p>笑问客从何处来</p>
	</body>
</html>

index2.html

<html>
	<head>
		<title>这是我的第二个网页</title>
	</head>
	<body>
		<h1>这是我的第二个网页</h1>
		
		<!--
		html的注释，养成良好注释习惯;注释不可嵌套
		-->
		
		<img />
		
		<input>
		
	</body>
</html>

index3.html

 <html>
	<head>
		<title>标签的属性</title>
	</head>
	<body>
	<!--
		属性，只能在开始标签或自结束标签，属性是名值对结构（名=值）;
属性和标签名或其他属性应该是用空格隔开。
	-->
		<h1>这是我的<font color="red" size="4">第三个</font>网页</h1>
	</body>
 </html>

index4.html

<!doctype html>
<html>
	<head>
	<!--meta标签用来设置王爷的字符集，避免乱码问题-->
		<meta charset="utf-8">
		<title>网页的基本结构</title>
	</head>
	<body>
	
		<!--
			多版本迭代 HTML4
		
			文档声明（doctyoe）告诉浏览器当前网页的版本
			<!doctype html>
			<!DOCTYPE HTML>
		-->
	
			<h1>这是我的<font color="red" size="4">第三个</font>网页</h1>
	</body>
 </html>
 
 <!--最标准的网页结构-->

index5.html

<!--文档声明，声明当前html版本-->
<!doctype html>
<!--html的根标签，网页中所有内容都要写在根元素里面-->
<html>
	<!--网页头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->
	<head>
	
		<!--meta用来设置网页的元数据（与生俱来），这里用来设置字符集，避免乱码问题-->
		<meta charset="utf-8">
		
		<!--title中的内容会显示在游览器的标题里，网页搜索主要根据title内容判断网页主要内容-->
		<title>网页的标题</title>
		
	</head>
	
	<!--body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里--->
	<body>
	
		<!--h1网页的一级标题--->
		<h1>网页的一级标题</h1>
		
	</body>
	
</html>

安装VScode后的案例

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hallo</title>
</head>
<body>
    <!-- 
        1.安装vscode
        2.安装中文插件
        3.将一个目录作为项目目录打开
        4.创建一个新网页
        5.安装live sever来运行网页
        6.设置代码自动存储
     -->
    <h1>哈哈哈嘿嘿嘿</h1>
    <p>lalala</p>
</body>
</html>

test2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>entity</title>
</head>
<body>
    <!-- 
        1.在网页中编写的多个空格默认情况下会被浏览器解析为一个空格
        多个空格会被解析成格式化的需要
        2.如果我们需要在网页中书写这种特殊的符号，则需要使用html中的实体（转义字符）
        3.
         &实体的名字;
         &nbsp;   空格
         &gt;     大于号
         &lt;     小于号
         &copy;   版权符号
        4.查找实体 W3School.com中查询
     -->
今天&nbsp;&nbsp;&nbsp;&nbsp;天气真不错
</body>
</html>

工具

Notepad++
vscode
zeal ???
W3School.com 查询实体（转义字符）等

快捷键

待搜集

参考资料

B站尚硅谷视频P1~P14
https://www.bilibili.com/video/BV1XJ411X7Ud?p=14&spm_id_from=pageDriver

冬日可可爱爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习——HTML

Web前端学习——HTML（1）记事本编写的案例安装VScode后的案例工具快捷键参考资料学习内容见注释记事本编写的案例index.html<html> <head> <title>哈哈，我在哪出现</title> </head> <body> <h1>回乡偶书二首</h1> <h2>其一</h2> <h2>贺知章</h2>
复制链接

扫一扫