2021-05-18

HTML总结

      前端高端知识：
                     Angular
                     ANgularJS
                     VUE
         React
         webpack
         NodeJS

HTML
WWWH
1、什么是HTML

  HyperText MarkUp language:超文本标记语言

2、为什么学习HTML

互联网基石

3、HTML的版本发展

  1991   HTML 1.0
  IETF   HTML 2.0
  1993-1994  W3C（万维网联盟） HTML 3.0
  1999  HTML4.01
  2012 HTML5

4、环境准备

运行环境：浏览器（google）
开发环境：记事本工具（sublime、vscode、notepad++）
                IDE:WEBstorm、hbuilder

5、第一个网页设计

创建页面名称 xxx.html
使用sublime类似工具打开
编写html标签
标签的头

自结束标签：该标签不需要再标签中间写东西，因此只需要开始标签后加/即可，写成 这种样式

HTMl的标签分为两大类：
块标签：必须占满一行，即便没有数据，也不会让
eg。 h1 h2 p div li ul ol等
行内标签： 内容有多少，则占据多少
eg. u strong b del i em span等

div是一个标准的块标签
span是标准的行内标签

WEB前端
B/S架构的软件 browser/server
C/S架构的软件 client/server

UI层（用户界面接口层）
html\css\javascript\jQuery\BT\VUE

业务逻辑层（软件的后端）
java\PHP\python

数据持久层（数据库）

常见的标签：
hr

语义化标签：正确的标签，干正确的事
H5提供的新特性

article文章、aside边域、button按钮、
footer底部、section中部、header顶部

多媒体标签：图片、视频、音频

img：图片   属性：src地址、alt说明、 title标题
建议控制样式时使用css控制，不要使用自身提供的属性
建议设置图片宽高的时候，等比例操作，不要拉伸图片

video：视频
     source标签
audio：音频
     属性：autoplay自动播放    controls autoplay muted="muted"
 （google chrome不支持自动播放，但静音muted时可以自动播放）
      muted静音
      controls 控制器
      

表格标签（table）
    table标签

    row         列
    column   行

   tr 单元行
   td单元格
   colspan行合并
   rowspan列合并

   th可将该行加粗并居中，现在不推荐使用

表格不仅仅展示，同时还可以提供页面布局


HTML：超文本标记语言

超链接标签
a标签
链接不同的页面
锚点功能，是a标签提供的

列表标签：
有序列表：（ol）
有序列表：（ul）
数据列表：（dl）

ol：    item
 list item         li

帮助文档的使用

转义符
空格&nbsp；大于&gt；小于&lt；公司&copy；

其他h5标签
h5
h5之前提供
查文档

iframe

表单元素：
form标签
action 提交URL
method 请求方式
enctype 默认提交的是键值对

展示数据

数据交互

交互、注册、登录、加购、发起订单

  定义：用来提供用户和服务器之间进行数据交互的标签，就是表单元素

常见的表单标签有三个：
输入框 input
选择框 select
文本域 textarea

IDE：集成开发环境
开发前端：国产：HBuilder

一些表单中遗留问题
一些表单中常见的特殊属性

css部分

1、css是什么？

		cascade style sheet：层叠样式表、级联样式表

2、为什么学习css

3、css的三种常见写法

1、style属性（标签样式）
2、style标签（内联样式）
3、外联样式

4、css中一些颜色的表示方式

使用单词表示   yellow、blue、skyblue、black、gray、darkred等
使用十六进制的方式标签（RGB）
	#ff0000红
	#00ff00绿
	#0000ff蓝
color:#999999;
借助RGB函数 color：rgb（255,0,0）
借助rgba函数 color：rgba（255,0,0,0.5）