HTML基础知识学习

 看b站动力节点HTML全套基础教程-html实战开发-深入浅出HTML，萌新前端记录学习笔记(*^_^*)

系统结构

B/S架构 （Browser/Server)

Browser支持的语言：HTML,CSS,JavaScript

优点：升级方便，只需升级服务器端代码，维护成本低。

缺点：速度慢，体验不好。

（企业内部的解决方案主要采用B/S架构，企业更注重维护成本）

 C/S架构（Client/Server)

优点：速度快，体验好（娱乐）

缺点：升级麻烦，维护成本高

HTML

HTML不区分大小写

基本标签

1. 段落标记

2. 标题字

3. 换行,独目标签

4. 水平线

5. 预留格式

6. 粗体字

7. 斜体字

8. 插入字

9. 删除字

10. 右上角加字

11. 右下角加字

12. font标签

实体符号

1. 空格

2. 大于号

3. 小于号

表格

1. 基本表格

2. 单元格合并

row合并时，删除下面的单元格

col合并时，对删除哪个没要求

3. th标签

th标签也是单元格标签，比td多的是居中，加粗

4. thread,tbody,tfoot

在table中不是必须的，只是为了便于后期js书写

背景颜色和背景图片

图片

设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放

超链接

href, hot reference 热引用

href属性一定是一个资源的地址

超链接的特点：有下划线，鼠标停留在超链接上面显示小手，点击超链接后会跳转页面。

target属性,可取 _blank:新窗口，_self:当前窗口(默认),_top:顶级窗口，_parent：父窗口

超链接的作用：通过超链接可以从浏览器向服务器发送请求。

浏览器向服务器发送数据(请求：request)

服务器向浏览器发送数据(响应：response)

B/S结构的系统，每一个请求都会对应一个响应。

用户点击超链接和用户在浏览器地址栏上输入url，有什么区别？

本质上没有区别，都是向服务器发送请求。

操作上，超链接使用更加方便。

列表

表单（最最最重要）

1. 表单有什么用？

收集用户信息。表单展现后，用户填写表单，点击提交按钮提交数据给服务器。

2. 怎么画一个表单？

使用form标签画表单。

3. 一个网页当中可以有多个表单form

4. 表单最终是需要提交数据给服务器的,from标签有一个action属性，这个属性用来指定服务器地址。

action属性用来指定数据提交给哪个服务器。

action属性和超链接中的href属性一样，都可以向服务器发送request。

5. https://192.168.111.3:8080/oa/save这是请求路径，表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。

超链接和表单都可以向服务器发送请求，只不过表单发送请求的时候可以携带数据。

•  表单是以什么格式提交数据给服务器的？

http://localhost:8080/oa/login?username=111&userpwd=111

格式：action?name=value&name=value&name=value...

HTTP协议规定的，必须以这种格式提交给服务器

• 表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。

•  关于input中的value

text和password类型由用户输入value，不需要再到input里设置value。

submit和reset类型在input中设置的value，用来指定按钮上的文本信息。

radio单选按钮的value必须手动指定,name一样表示是一组单选按钮，加checked表示默认选中。

checkbox复选按钮的value也需要手动指定，name一样表示是一组复选按钮，加checked表示默认选中。

textarea文本域没有value属性，用户填写的内容就是value

凡是给用户输入机会的，都不用写value，点击的都需要写value

•  form表单method属性:

get:采用get方式提交时，用户提交的信息会显示在浏览器的地址栏上(默认)

post:采用post方式提交时，用户提交信息不会显示在浏览器的地址栏上

当用户提交的信息中含有敏感信息，使用post方式提交。

post提交时的数据格式和get还是一样的，只不过不再地址栏上显示出来。post提交的数据还是：name=value&name=value&name=value...

• 超链接补充

超链接也可以提交数据给服务器，但是提交的数据都是固定不变的。

超链接是get请求，不是post请求。

• 其余常用type

下拉列表通过multiple="multiple"支持多选,size设置显示条目数量

file：文件上传专用

hidden：隐藏域，网页上看不到，但是表单提交时数据会自动提交给服务器

readonly和disabled相同点，都是只读不能修改。但是readonly可以提交给服务器，disabled数据不会提交(即使有name属性也不会提交)

maxlength: 设置文本框的可输入字符数

HTML中元素的id属性

1. 在HTML文档中，任何元素(节点)都有id属性，id属性是该节点的唯一标识，所以在同一个HTML文档中id值不能重复。

2. 表单提交数据时，只和name有关系，与id无关

3. id的作用：js可以对html文档中的任意节点进行增删改操作，而增删改之前需要拿到这个节点，通常通过id来拿节点对象。id的存在让我们获取节点更加方便。

4. html文档是一棵树，树上有很多节点，每一个节点都有唯一的id。DOM树。

div和span

1. div和span都可以称为图层,图层的作用是为了保证页面可以灵活的布局。图层就是一个一个的盒子，div嵌套div就是盒子套盒子。div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。

2. 最早的网页采用table进行布局，但是table不灵活，现代的网页开发中div布局使用最多。

3. div独自占用一行(默认)，span不会独自占用一行。