HTML-1.html的简单认识及开发者工具的了解

HTML-1.html的简单认识

WEB前端的核心部分

前端主要由三部分组成:HTML、CSS、JS(JavaScript)。
如果把一个页面比作人的结构的话:

  • html 就相当于人的骨架,你本身固有的一些东西(有四肢、五官等)
  • css 就是每个人的体态,外貌(高矮胖瘦、衣服的搭配)
  • js 就是每个人的动作,与外界环境或他人的沟通交互(打招呼、跑步、敲代码)

什么是HTML?

官方定义:HTML(Hyper Text Markup Language )超文本标记语言

注意HTML中所有的标记都是W3C标准组织已经规范了,不能自己创建标签。并且每个版本都会有一些差异,HTML有很多版本。目前最新使用最多的版本是H5

什么是W3C标准?

​ 万维网联盟(外语缩写:W3C)创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南标准不是某一个标准,而是一系列标准的集合。

HTML特点:

  • 简单性:没有复杂的逻辑,你掌握这些标签的作用,合理搭配就可以设计出网页
  • 可扩展:HTML标签有很多功能,新增一个标签就可以带来一个新的功能
  • 跨平台:网页的运行环境是浏览器,只要保证你的系统有浏览器就可以运行。
  • 通用性:页面写好了之后,可以相互的嵌套。一旦网页设计好了后,任何人都可以访问到你的页面。不管你使用什么浏览器都可以访问。

HTML文档的结构

<!--代表网页的文档类型,申明了浏览器解析时候的解析规则-->
<!DOCTYPE html>
<html>
	<head>
        <!--强制设置字符集,解决汉字乱码-->
		<meta charset="utf-8">
        <!--声明浏览器渲染方式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <!--开启理想视口 如果不写该代码,移动端的默认值则为980px  viewport为理想视口  device-width为width100%=独立像素  initial-scale 为缩放比例-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 设置网页的关键字 -->
        <meta name="keywords" content="嘻嘻嘻嘻">
        <!-- 网页描述 -->
        <meta name="description" content="设置网页的描述">
        <!-- 设置作者 -->
        <meta name="author" content="xixixi">  
		<title>my first page</title>
	</head>
	<body>
		欢迎来到前端大家庭!
	</body>
</html>
  • <!DOCTYPE html>:声明网页的文档类型,告诉浏览器解析的规则及html使用版本(目前使用的是H5版本)。
    • 注意:必须声明到文档的开头,不区分大小写
  • html的版本:
    - HTML:1991年,设计出来并没有作为标准。
    - HTML+:1993年,非标准,这个版本已经在W3C的草案中。
    - HTML2.0:1995年发布,这个版本作为了标准。
    - HTML3.2:1997年发布 W3C 推荐标准
    - HTML4.0(HTML4.01)W3C 推荐标准,之前的 PC 端网页规范
    - HTML5:2012年发布的,新增了很多的新特性。W3C 推荐标准,基于移动终端进行优化
    - XHTML:存在一段时间,后来就放弃维护,转向H5,既有html规范,又有xml规范
DOCTYPE有什么用:
  1. 使用了DOCTYPE可以正确声明文档的类型,有利于浏览器解析
  2. 可以正确告诉浏览器,我们使用的HTML版本是哪一个。 浏览器根据不同版本对代码有不同解析
  3. 正确声明DOCTYPE有利于浏览器识别采用哪种模式来运行代码。

###常用的 DOCTYPE 声明版本

html5

<!DOCTYPE html>

HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集
(Framesets)。必须以格式正确的 XML 来编写标记。 (了解)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

浏览器两种解析模式:

  1. 严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码(服务于标准规则)。

    混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码(服务于旧式规则)。

    浏览器为什么有两种解析模式:

    浏览器在发展的最初没有标准化,老版本浏览器下面能运行的代码,现在放在新版本浏览器下面无法运行,新版本的浏览器采用W3c的标准。以前写的代码就会不兼容,浏览器为了解决这个问题,所以采用两种模式来解析代码
    

    如何区分两种解析模式:如果文档包含严格的 DOCTYPE ,那么它就是以严格模式呈现,否者为混杂模式。

  • <html></html>:根标签,每个网页有且仅有一个根标签
  • <head></head>:代表网页的头部,head主要写CSS代码和js代码。
    • <title></title>:代表网页的标题,显示在网页窗口栏,SEO优化有用
    • <meta charset="utf-8">:表示网页的编码集,浏览器在解析时会根据这个编码集去解析网页
  • <body></body>:代表网页的内容区域,主要写网页的结构代码

开发工具

目前市面上有很多的开发工具

  • 记事本 (万能工具)
  • Hbuilder:
    • 内置插件,打开慢,运行易容卡顿,编辑器中内置浏览器的显示效果
  • webstorm:
    • 内置了很多插件,很多开发中会用到的插件提前安装好了,对电脑内存要求比较大,配置低电脑,容易卡退
  • sublime:
    • 轻量级的开发工具,插件需要自己下载,按需下载。后期开发的框架搭建环境稍微麻烦一点。
  • Dreamweaver:
    • 更新太慢,可以直接拖拽组件使用
  • vscode:(推荐)
    • 微软发布的一个工具,目前市场上前端最主流的开发工具,不仅可以开发前端,还可以开发java、Python等等。轻量化、需要什么插件在工具中即可下载安装,运行效率比较高,内存消耗不大。插件生态非常好,全球程序员一起来维护插件生态。

官网:https://code.visualstudio.com/Download

安装步骤:一直点击next(下一步)

vscode插件安装

  1. chinese 汉化
  2. Auto Rename Tag 自动将结尾标签补全
  3. HTML CSS Support 在HTML文档中支持CSS的提示
  4. HTML snippets 自动生成html代码,专门对html代码格式化比如输入HTML5能够生成一个HTML5文件的标准模板代码。
  5. Image preview 能够在编辑代码时查看所使用图片的缩略图。
  6. IntelliSense for CSS class names in HTML 可以在HTML代码中智能提示CSS代码中的class 名
  7. Live Server 可以将vscode作为一个服务器,让浏览器来访问(可以开启一个服务器,执行我们所写 的前端文件,并且实时更新,也就是说,以后可以无需刷新页面就可以查看效果了)
  8. open in browser 可以指定浏览器打开网页
  9. stylelint 编写CSS代码时,语法错误智能提示

vscode常用快捷方式

  1. Ctrl + C 复制
  2. Ctrl + X 剪切
  3. Ctrl + V 粘贴
  4. Ctrl + S 保存文件
  5. Ctrl + F 查询
  6. Ctrl + H 替换
  7. Ctrl + | 分屏显示
  8. alt+B 默认浏览器快速解析代码
  9. Ctrl + N 新建文件
  10. Ctrl + O 打开文件所在路径
  11. Ctrl + B 侧边栏显示隐藏
  12. Ctrl + /- 放大 / 缩小

总结

其实没啥总结的:

  • 现在的前端开发html页面基本使用快捷键一键生成了,只需要了解每个位置的含义,在需要调整时修改即可
  • 开发工具各有优劣,本人推荐使用vscode,插件库也比较齐全;全凭诸君喜好!
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值