前奏
- 学习方法：
整体原则：复习、学习、练习、预习
网上找资料找练习作业、整理笔记、反复加强代码训练 - 常用开发工具：
Notepad++、Editplus、Hbuilder、IntelliJ IDEA、WebStorm - 常用的浏览器
- IE: trident内核
IE浏览器是世界上使用最广泛的浏览器，它由微软公公司开发，预装在windows操作系统中。所以我们装完windows系统之后就会有IE浏览器。目前最新的IE浏览器的版本是IE 11. - Firefox：gecko内核
火狐浏览器是一个开源的浏览器，由Mozilla资金会和开源开发者一起开发。由于是开源的，所以它集成了很多小插件，开源拓展很多功能。发布于2002年，它也是世界上使用率前五的浏览器。 - Safari:webkit内核
Safari浏览器由苹果公司开发，它也是使用的比较广泛的浏览器之一。Safari预装在苹果操作系统当中，从2003年首发测试以来到现在已经11个年头。是苹果系统的专属浏览器，当然现在其他的操作系统也能装Safari。 - Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
opera浏览器是由挪威一家软件公司开发，该浏览器创始于1995。目前其最新版本是opera 20.他有着快速小巧的特点，还有绿色版的，属于轻灵的浏览器。 - Chrome:基于webkit
Chrome浏览器由谷歌公司开发，测试版本在2008年发布。
虽说是比较年轻的浏览器，但是却以良好的稳定性，快速，安全性获得使用者的亲睐。号称全世界用户体验最好的浏览器
- IE: trident内核
html_19">html基础知识
对网页和网站的理解：
- 什么是网页？
网页就是在网站中的任何一页面，通常网页文件的扩展名为.html或.htm；(静态网页) - 网页的构成要素
文字、图片、超链接、音频、视频等； - 什么是网站？
网站是用于展示相关内容的网页的集合；访问网站时，默认打开的第一个页面就是主页，也叫首页。默认的文件名是index.html或default.html
web标准的介绍
- WEB标准不是某一个标准，而是一系列标准的集合。
- 网页主要由三部分组成：结构（Structure-html）、表现（Presentation-css）和行为（Behavior-javascript）。
- 对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由万维网联盟（world wide web coalition，缩写：W3C）起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
W3C 就是出 web 规范的组织机构。html、css、js的规范都是W3C定义发布的。
Html的发展历史
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
- HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2——1997年1月14日，W3C推荐标准
- HTML 4.0——1997年12月18日，W3C推荐标准
- HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
- HTML 5——2014年10月28日，W3C推荐标准
什么是Html?
Hyper Text Markup Language,超文本标记型语言，是一种标记语言，它是制作网页的基础语言，主要用于超文本中内容的显示方式。它不需要编译，可以直接由浏览器执行。
- 超文本：
- 标记：“标记”是一些符号，用来区分文档中的不同部分。也被称作“标签”
- 语言：
文件和文件夹的命名规范
由字母、数字、下划线构成、且不以数字开头
不建议使用中文
Html标签的属性和属性值
属性：标签的特征
属性值：为标签的特征所赋的值
语法：<标记 属性名 = “属性值”> 内容</标记>
Html中元素的分类
块状元素block
内联元素(行内元素)inline
内联块状元素inline-block
Html的嵌套原则
块元素的三级分类
- 一级元素
body、head - 二级元素
a.子一级元素必须是指定元素的二级元素- ul、ol子一级元素必须是li
- dl：子一级元素必须是dt和dd
- table：子一级元素必须是caption、thead、tbody、tfoot，再子一 级是tr，最后是td、th。
- b.完全可以自由嵌套的元素 div、li、dd、form、td
- 三级元素
不可以自由嵌套的元素，该元素内部只能嵌套行内元素 h1-h6、p、dt
元素的嵌套原则
- 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：
- 块级元素与块级元素并列、内联元素与内联元素并列
Html基本元素及属性的介绍
Html基本结构的介绍
html head body
- html 网页标签
- head头部标签中可以嵌套网页标题标签 title 元信息标签 meta 样式标签style 链接外部样式标签link js标签script
- body主体标签背景属性 bgcolor
- meta元信息标签设置编码、文档描述、关键字、重定向等等(详见w3c)
标题标签及属性 h1-h6
语法： 标题标签 n代表1-6
属性： align 属性值： left center right
特点：h1-h6字体逐渐变大，默认加粗效果，独立占有一行（块状元素特点）
段落标签及属性 p
语法：<p>段落</p>
属性： align 属性值： left center right justify(分散对齐)
特点：元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定
图像标记及属性 img
语法：<img />
属性：
- src 设置图片的路径（规定显示图像的 URL）
- alt 图片加载失败的文字描述（规定图像的替代文本）
- title 图片的描述信息（鼠标放在上面，增加用户体验）
- width、height 设置图片的宽高
- border 设置图片的边框
注意：可插入的图片类型 :jpg、gif、png 不能插入的类型：psd、ai、bmp
路径：指定文件或文件夹所在的位置，路径分为绝对路径和相对路径；
绝对路径：完整的描述文件位置的路径就是绝对路径（带盘符），例如：F:\厦门\素材\其他\1.jpg
相对路径：文件本身相对于目标所在位置
- 网页文件和图片位于同一个文件夹下：直接写图片名，如src=“1.png”
- 网页文件和图片不在同一个文件夹下，图片位于另外一个文件夹里面：先写图片文件夹的名，再写文件名，如src=“img/1.png"
- 网页文件和图片不在同一个文件夹下，网页文件位于另外一个文件夹里面：先使网页文件跳出文件夹，再写文件名，如src=“…/img/1.png”
水平线标记以及属性 hr
语法：<hr />
属性：\
- size 水平线的厚度
- width 水平线的宽度
- color 水平线的颜色
- align 水平线对齐方式，属性值 left center right
其它常用标签的介绍(了解)
<br /> 强制换行（Shift+Enter）
<sup></sup> 上标
<sub></sub> 下标
<b></b> 标签(加粗)
<strong></strong> 标签（加强调，效果加粗）
<i></i> 标签（斜体）
<em></em> 标签（作用强调，效果斜体）
<u></u> 标签（下划线）
HTML里面常用的特殊符号（详见附件）
  空格
© 版权符号
> 大于号
< 小于号
&trade 商标
® 已注册
颜色的表示方式
- 英文单词表示法（详见资料）：red green blue black orange yellow pink brown purple white gray gold
- 十六进制表示法：#6位16进制数（0-9，a-f）
#ff0000 红色 #00ff00 绿 #ffff00 黄 #000000 黑色 #ffffff白色 - RGB表示法:
- 0-255之间的值 rgb(255,120,0)
- 所占百分比设置 rgb(10%,0%,100%)
- 带有透明度的颜色设置(rgba表示法):a表示不透明度 , 取值范围是0-1之间（在IE上测试浏览器兼容性）,0代表完全透明 rgba(255,0,0,0.5)
无序列表 ul(unordered list)-li(list item)
属性：type 属性值：disc circle square
有序列表ol(ordered list)-li(list item)
type = 1 | a | A | i | I 列表类型
reversed 倒序
start = 数字 从第几个开始
自定义列表dl(definition list)
<dl>
<dt>定义项1</dt>
<dd>描述项11</dd>
<dd>描述项12</dd>
<dd>描述项1n</dd>
<dt>定义项m</dt>
<dd>描述项m1</dd>
<dd>描述项m2</dd>
<dd>描述项2n</dd>
</dl>
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客地址
超链接标签 a
属性
- href 超链接地址（规定链接指向的页面的 URL）
- title 超链接的描述信息（增加用户体验）
- target 超链接打开的方式（规定在何处打开链接文档）
- download 规定被下载的超链接目标
<a download="filename">filename规定作为文件名来使用的文本,可以省略
超链接对象：文本、图像、空连接、锚点链接
链接到不同页面：
链接到同一个页面的不同部分：设置锚点
表格 table
- border 设置表格的边框
- bordercolor 设置表格边框的颜色
- height、width
- bgcolor、background
- cellspacing 设置表格边框与边框之间的距离
- cellpadding 设置表格内容与边框的距离
- summary 设置描述信息，便于搜索引擎的准确快速的搜索到此表格
- align 设置表格的整体水平对齐方式
caption
表格自带的标题标签，标准规定只能添加一个标题，且caption标签只能写在table起始标签的后面；但是谷歌浏览器写多个caption标签也可以显示
分割区域
- thead
- tfoot
- tbody
注意使用顺序
thead标签定义表格的表头。该标签用于组合HTML表格的表头内容;thead元素应该与tbody和tfoot元素结合起来使用。tbody元素用于对 HTML表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素,它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签
tr
每个表格中有几对tr标签，就代表这个表格有几行
- height、bgcolor、background
- align 设置文本的水平对齐方式
- valign 设置文本的垂直对齐方式
td(th)
每一行中有几对td就代表这一行有几个单元格
- height、width、bgcolor、background、align、valign
- colspan 列合并，左右单元格进行合并，属性值是数字
- rowspan 行合并，上下单元格进行合并，属性值是数字
