从入门到放弃系列--如何成为全栈工程师02

最新推荐文章于 2022-09-15 10:30:32 发布

创业情报官

最新推荐文章于 2022-09-15 10:30:32 发布

阅读量119

点赞数

分类专栏：如何成为全栈工程师

本文链接：https://blog.csdn.net/wongvio/article/details/104810168

版权

如何成为全栈工程师专栏收录该内容

4 篇文章 0 订阅

订阅专栏

未来3个月，你需要的html全部在这里

用html语言，可以写出目前你见到的所有类型的电脑界面，包括app、小程序、网页；注意！！我说的是界面！！说这个的意思是告诉你html是基础也很实用，是帮你打开全栈工程师的大门的第一步，所以，你需要熟练掌握html里每一个标签吗？当然不是，我都记不住，所以这一课我会告诉你最常用的那几个，而且你也不用一下就记住，因为以后你会经常用到，慢慢你就记住了。

标准html结构

现在我要告诉你一个比上节课稍微复杂一点的html结构，注意这是我规定的“标准”结构，我不会在这里给初学者介绍标准的html规范，如果你很想了解，可以去自己百度一下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>标题</title>
	<meta name="Keywords" content="全栈工程师,全栈教程" />
	<meta name="description" content="从入门到放弃系列--如何成为全栈工程师02" />
</head>
<body>
	
</body>
</html>

代码解释：

<!DOCTYPE html>必须是 HTML 文档的第一行，能让你编写的html文件在大多数浏览器里正常的运行；
<html lang="zh-cn">用于告诉浏览器，这个网站是基于什么语言的，zh-cn就是中文的意思；
<head></head>区域内的内容主要用于显示一些网页相关的内容，比如网页的标题，关键词，描述等等；
<title>标题</title>就是每一个网易左上角显示的网页标题
<meta name="Keywords" content="全栈工程师,全栈教程" />这是这个网页的关键词，主要用于告诉百度或者谷歌这类的搜索引擎这个网页的关键词信息
<meta name="description" content="从入门到放弃系列--如何成为全栈工程师02" />这是网页的描述，用于告诉搜索引擎这个网页大概的内容
<body></body>所有你在浏览器内可以用肉眼可见的东西都必须写在body这个标签内。

常用html

接下来的代码，你只需要用复制粘贴的方法保存到记事本里，然后用浏览器打开就可以看到效果，如果你能对照着打一遍，那就是非常棒了：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta >
</head>
<body>
	<div>
		<h1>HTML标签一学就会</h1> <br/>
		<p>段落：html语言超级简单，轻松掌握</p> <br/>
		<b>加粗</b> <br/>
		<i>斜体</i> <br/>
		<span>打酱油</span> <br/>
		<a href="http://www.baidu.com">百度</a> <br/>
		<img src="https://img-blog.csdn.net/20141228220835062" alt="">
	</div>
</body>
</html>

html标签一共有89个，我目前只教下列9个，这9个够你完全80%的需求，二八定律无处不在~；

<div></div>div标签，以后使用率最高的标签，用于网页的排版，如果你还听说过table，那么请忘记它，我不会教你们怎么用table，因为完全没有必要了解。
<h1>HTML标签一学就会</h1> 一般我们把网页里最重要的，比如一篇新闻的标题，用h1标签包裹；
<p>段落：html语言超级简单，轻松掌握</p>p标签一般用来显示网页的段落内容，其实主要是为了增强网页代码的可读性，html诞生的时候并没有现在的人工智能，大数据分析，百度、谷歌一类的搜索引擎需要靠特殊的标签才能明白网页的主要内容；
<b>加粗</b>把文字加粗，很好理解；
<i>斜体</i>同上很好理解，文字斜体；
<span>打酱油</span>这个标签你可以理解为打酱油的，但是会经常用到，主要是为了增强代码的格式性；
<a href="http://www.baidu.com">百度</a>超链接，记住这个专用名词，当你用鼠标点击的时候，可以帮你打开指定的网址，这就是超链接；
<img src="https://img-blog.csdn.net/20141228220835062" alt="">插入图片，在网页中插入图片就靠这个标签
<br/>换行，没什么好解释的。

小测试

把今天的代码保存为html格式，并在网页中打开看看；
尝试跟着打一遍，调整一下顺序，看看有什么区别，每次修改以后，可以直接按F5刷新页面，就能看到效果
尝试写一个打开新浪微博的超链接
下载一张女神的照片，修改img标签的内容，让女神在网页中显示出来

教程结束，不要问为什么，保持好奇，但是要先动起手来~

创业情报官

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从入门到放弃系列--如何成为全栈工程师02

未来3个月，你需要的html全部在这里用html语言，可以写出目前你见到的所有类型的电脑界面，包括app、小程序、网页；注意！！我说的是界面！！说这个的意思是告诉你html是基础也很实用，是帮你打开全栈工程师的大门的第一步，所以，你需要熟练掌握html里每一个标签吗？当然不是，我都记不住，所以这一课我会告诉你最常用的那几个，而且你也不用一下就记住，因为以后你会经常用到，慢慢你就记住了。标准ht...
复制链接

扫一扫