目录
一、前言
这几年经历裸辞、创业、进创业公司然后被拖欠工资等等事情,真的是一波三折,但是写博客这件事情不能落下。web前端其实还算接触的比较早,最早的时候08年、09年上大学的时候就学过玩过,现阶段做Android项目开发经常会碰到混合开发一个人干的事情而且web-h5依然很火热,不妨从今天开始把以前的一些笔记整理一下。最大的学习经验就是要写博客,做笔记,写博客不仅仅是记录,也是总结提炼,在写的过程中,融入自己的思考,加深对技术的理解
二、简单实例介绍
实例:3秒自动跳转
我们先来看看一个例子,如下代码:01_基本文档结构_3秒自动跳转.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>这是title标题</title>
<!-- 内容类型;纯文本html;字符类型utf-8 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- 刷新;3秒后刷新跳转到指定url, url属性必须包含在content属性里面,否则没效果 -->
<meta http-equiv="Refresh" content="3;url=http://www.w3school.com.cn" />
</head>
<body>
!DOCTYPE 、html、head、body、title、meta标签的使用
</body>
</html>
用浏览器打开运行,3秒后它会跳到 W3School官网。很简单,这里就不演示贴图了!
使用工具:Visual Studio Code
这里web前端的编辑器,之前我在写 vue 系列专题推荐的是 IntelliJ IDEA,Vue框架项目实战整理:1、Vue开发工具介绍、快速启动、常见错误 但是刚刚整理笔记的时候我的mac使用它打开文件夹就一直响,启动有点卡顿,差不多1.5w入手的mac应该配置还行吧,于是eclipse、Sublime Text、Visual Studio Code都试了试,感觉Visual Studio Code体验好一点,没必要在开发工具上一直纠结,再者前段时间整理 nodejs 技术点也用的它,所以就不使用 IntelliJ IDEA了,就用Visual Studio Code吧,当然这看个人喜好和使用体验,你用记事本也行。
三、要点说明
(一)快速手动构建,html基本文档结构
基本思路:
1. 复制<!DOCTYPE>标签内容
2. <html>标签,指定文档的开始点和结束点
3.<head>标签,定义文档的头部。指定title、meta
4.<body>标签,定义文档的主体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>这是 title 标题</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
这是 body 部分
</body>
</html>
(二)详细解释说明
1、!DOCTYPE 标签
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
详见可参考: 可搜“HTML <!DOCTYPE> 标签”
http://www.w3school.com.cn/tags/tag_doctype.asp
2、html 标签
此元素可告知浏览器其自身是一个 HTML 文档。
<html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。
文档的头部由 <head> 标签定义,而主体由 <body> 标签定义。
详见可参考: 可搜“HTML <html> 标签”
http://www.w3school.com.cn/tags/tag_html.asp
3、head 标签
<head> 标签用于定义文档的头部,它是所有头部元素的容器。
如:标题/刷新/编码方式等
<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<title> 定义文档的标题,它是 head 部分中唯一必需的元素。
详见可参考: 可搜“HTML <head> 标签”
http://www.w3school.com.cn/tags/tag_head.asp
4、body 标签
body 元素定义文档的主体。
body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
详见可参考:
http://www.w3school.com.cn/tags/tag_body.asp
5、title 标签
<title> 元素可定义文档的标题。
浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。
同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称
详见可参考:
http://www.w3school.com.cn/tags/tag_title.asp
6、meta 标签
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。
<meta> 标签的属性定义了与文档相关联的名称/值对。
http-equiv 用于传送HTTP通信协议的标头,也就是设定标头属性的名称,而在content中才是设置具体的属性值。
常用如:
刷新;每3秒刷新一次
http-equiv="refresh" content="3"
刷新;3秒后刷新跳转到指定url (跳转到其它页面,所以不会刷新了)
url属性必须包含在content属性里面,否则没效果
http-equiv="Refresh" content="3;url=http://www.w3school.com.cn"
内容类型;纯文本html;字符类型utf-8
http-equiv="content-type" content="text/html;charset=utf-8"
详见可参考:
http://www.w3school.com.cn/tags/tag_meta.asp