写个 Hello world - 前端从入坑到弃坑系列教程(1)
这是一个系列教程《前端从入坑到弃坑》的第一篇。
HTML 是什么
说白了,HTML 就是网页的内容。比如你现在正在阅读的这个网页的内容,就是 HTML。如果你还不明白,请继续往下阅读。
写一个简单的 HTML
首先在你的电脑上,新建一个名为 index.html 的文件,用文本编辑器打开(注意不要用 Windows 自带的记事本打开)。
然后把下面的内容复制,粘贴到编辑器,保存文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>你好,世界</p>
</body>
</html>
双击打开文件,你将会在浏览器看到以下内容:

你再把下面的内容复制,替换 index.html 的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>这是标题</h1>
<p>这是普通的内容。</p>
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
</body>
</html>
浏览器刷新页面,可以看到下面的效果:

看到这里,我想你应该明白了,HTML 是什么了。HTML 简单的理解,就是网页要显示的内容。
总结
略。
写个 Hello world - 前端从入坑到弃坑系列教程(1)的更多相关文章
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(五)——实现注册功能
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 写给后端的前端笔记:浮动(float)布局
写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...
- 写给后端的前端笔记:定位(position)
写给后端的前端笔记:定位(position) 既然都写了一篇浮动布局,干脆把定位(position)也写了,这样后端基本上能学会css布局了. 类别 我们所说的定位position主要有三类:固定定位 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(四)——对 run.py 的调整
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(三)——使用Flask-Login库实现登录功能
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- 弃坑pexpect,入坑paramiko
上文书说到,ssh库pexpect的使用,简直就是个“月亮公主”——满眼全是坑.勉强把程序写好了,跑起来的时候发现了一个新坑,让我不可抗拒的把它弃掉了——经常莫名其妙的连不上服务器!开线程连接14台服 ...
- 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
随机推荐
- Winform使用的一些常识
? 防止数据绑定的列动态添加 需要设置DataGridView的AutoGenerateColumns属性为False ---------------------------------------- ...
- oracle删除数据后表空间仍过大问题解决方法
-----亲测有效------- --一.备份原始数据库库--1.备份空表--在plsql里面执行一下这句话 然后把结果集 再执行一把 再导数据select 'alter table '||table ...
- java——国际化详解
深入理解Java国际化 假设我们正在开发一个支持多国语言的Web应用程序,要求系统能够根据客户端的系统的语言类型返回对应的界面:英文的操作系统返回英文界面,而中文的操作系统则返回中文界面--这便是典型 ...
- JS中关于clientWidth offsetWidth scrollWidth 的区别及意义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- servlet+jsp update修改页面的实现,整整搞了两个小时才搞定
package DAO; public class books { private int bid; private String bname; private int booksl; private ...
- VMvare虚拟机的安装及新建虚拟机.
一.VMvare虚拟机的安装 1.首先双击--你下载的安装包,这里我分享百度云盘,供大家下载:http://pan.baidu.com/s/1jImQSZG 2.VMware Workstation ...
- discuz 6.1.0F前台getshell(据说通用6.x , 7.x)
EXP: 执行phpinfo()语句: GLOBALS[_DCACHE][smilies][searcharray]=/.*/eui; GLOBALS[_DCACHE][smilies][replac ...
- Spring Boot 系列(一)快速入门
简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置 ...
- 智联卓聘 卓聘IM(聊聊)开发实践
1. 卓聘IM开发背景 智联卓聘是智联旗下高端人才招聘平台,成立快4年多,业务增涨每年以100%速度增涨快,同时对产品和研发速度都比较高. 2015年提出IM开发,主要用于后选人与猎头及时交流,降低 ...
- Sass学习笔记(补充)
阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@de ...