html和css学习课件（新版） |
您所在的位置：网站首页 › html基本结构标签教案 › html和css学习课件（新版） |
|
第一章：初识HTML
本章目标：
理解HTML掌握HTML标签的应用掌握超链接的应用
什么是HTML
HTML是用来制作网页的标记语言HTML是HyperText Markup Language的英文缩写,即超文本标记语言HTML不是一种编程语言，而是一种标记语言 [标记语言是一套标记标签 (markup tag)] ，描述网页的语言HTML使用标签描述网页中图片、文本、音乐、视频、超链接在HTML中，虽然有文本，但是这些文本需要使用html语言中的标记来标识。当被HTML中的标记标识之后的文本，它就超出了我们所理解的简单文档范畴。不再是一个普通的文本。而这些文本可以被浏览器进行识别，并且以不同的形式展示在浏览器上。HTML不需要编译,直接由浏览器执行HTML文件必须使用html或htm为文件名后缀HTML是对大小写不敏感的,HTML与html是一样的；但是我们一般规定：书写时一律小写HTML是由W3C组织的维护的
为什么要学习HTML
制作精美的电商、门户等静态网页制作网页中的各种交互、动画效果制作网页游戏……工作~ 挣钱~
HTML的发展历史
1989年，伯纳斯-李提出一个基于互联网的超文本系统。他规定HTML规则，并在1990年底写出浏览器和服务器软件。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3x9AkTcv-1645879853736)(assets/image-20210413163727691.png)] 超文本标记语言(第一版) – 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)HTML 2.0 – 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时HTML 3.2 – 1996年1月14日,W3C推荐标准HTML 4.0 – 1997年12月18日,W3C推荐标准HTML 4.01(微小改进) – 1999年12月24日,W3C推荐标准XHTML 1.0 – 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布XHTML 1.1 – 于2001年5月31日发布XHTML 2.0 –2002年HTML 5.0 – 2008年发布 2014年10月由万维网联盟（W3C）完成标准制定 什么是html5[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-27Hu7vGA-1645879853737)(assets/image-20210413164143187.png)] HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用。 HTML5 中的一些有趣的新特性： 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search 开发环境及开发工具 开发环境：windows、linux、Mac开发工具：VsCode、Sublime Text、WebStorm……VsCode优点：智能的代码补全、代码提示、自动保存…… HTML文档结构 DOCTYPE html> Document img/a/h1.... DOCTYPE 声明了文档类型 html标签 描述了文档类型 lang='en' 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知 道，你的站点是中文站，对html页面本身不会有影响这些现在都是html规范，你的页面越规范，就越容易被收录 head标签 包含了所有的头部标签元素 title标签 定义了浏览器工具栏的标题 meta标签 对页面的元信息进行设置，比如针对搜索引擎和更新频度的描述和关键词 charset 属性规定 HTML文档的字符编码 HTML5中的新属性 UTF-8-Unicode 字符编码 设置当前页面的字符编码格式为 utf-8的格式,字符集是一种统一的标准，全世界有很多很多不同的语言，这时候如果针对每个国家的语言都设置一个字符集的标准，会很混乱，比如我写的页面上可能有了中文就不能有英文了，因为识别不出来，为了解决这个问题，就出现了utf-8这个字符集标准，所有的国家，所有的文字，都生成特定的字节码，这样不论你一个页面出现多少的文本内容，都可以正常的识别出啦了.我们国家的汉语简体的字符集标准是GB2312 body标签 为可视化网页内容 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 无标题文档 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 无标题文档 DOCTYPE html> 无标题文档 HTML标签 概念： HTML 标记标签通常被称为 HTML 标签 (HTML tag)HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 标签中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签我是内容 title-AAA也有单标签，比如、等 HTML基本标签 标题的文字标签示例标题标签~h1>静夜思段落和换行标签… 、床前明月光疑是地上霜 水平线标签 斜体…举头望明月字体加粗…低头思故乡 无语义标签，主要用于布局 … 结构标签，用于布局 span 无语义标签，类似div…结构标签，用于布局 图像标签 img:标签名 src/alt/width/height:属性 src:要展示的图片的路径 【相对路径、绝对路径】 alt:图片替换文本、当图片路径无效时生效 widht:图片宽度 height:图片高度 超链接 文本或图像 href:链接路径 target: _self：自身窗口 _blank：新建窗口跳转链接 页面间的跳转不同网站间的跳转锚链接 跳至自身固定位置，或A页跳到B页固定位置，需锚标记 #创建锚标记 乙位置 #创建跳转链接 甲位置 #跳转到其他页面的固定位置 其他页面丙位置功能性链接 电子邮件、QQ、电话等链接 发邮件 发邮件 打电话 打电话给我 QQ 元素分类块级元素： 独占一行，换行显示，可以设置宽高，如果不设置，默认占据父元素宽度的100%，块可以套块和行行级元素: 在行内显示，与其他行内元素并排显示，一行排不下了才折行显示，内容撑开宽高，不可以设置宽高（img、input除外），行只能套行可以相互转换 分类： 块级元素：div p br h1~h6 ul ol dl li 行级元素：span a em strong input img(input和img特殊可以设置宽高) 注释和特殊符号（一定要加注释！！！！） 注释 方便阅读代码 浏览器自动忽略注释内容 vscode 常用快捷键： ctrl+/ ctrl+shilt+/ 特殊符号字符实体示例空格;百度 | 新浪大于号(>);如果时间>晚上6点，就坐车回家小于号( |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |