HTML基础篇笔记

1、系统结构：

① B/S架构：Browser/Server（浏览器/服务器的交互形式。）

Browser支持的语言：HTML、CSS、JavaScript；S是服务器端Server支持的语言有：C、C++、Java等

B/S架构系统有什么优点和缺点？

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

缺点：速度慢、体验不好、界面不炫酷

企业大部分使用B/S架构

B/S架构的系统代表有：京东、百度、天猫等

② C/S架构：Client/Server（客户端/服务器的交互形式。）

C/S架构的优点和缺点？

优点：速度快、体验好、界面炫酷（娱乐性多数是C/S架构）

缺点：升级麻烦、维护成本较高。

C/S架构的系统代表有：QQ、微信、支付宝等

2、 HTML概述

① 什么是HTML？② 怎么开发HTML？③ 怎么运行HTML?

① HTML：Hyper Text Markup Language（超文本标记语言）

由大量的标签组成，每一个标签都有开始标签和结束标签。

超文本：图片、声音、视频等

② HTML开发使用普通的文本编辑器就行，创建扩展名是.html或.htm

编辑器有：HBuilder、vscode等

③ 直接采用浏览器打开HTML文件就能运行

④ HTML是谁制定的？

④ W3C：世界万维网联盟

W3C制定了HTML的规范：每个浏览器生产厂家都会遵守规范。HTML也会按照规范去写代码

HTML规范目前最高的版本是：HTML5.0，简称H5

我们现在主要学的HTML4.0（基本用法）

为了方便中国Web前端程序员开发，提供了大量帮助文档。为开发提供方便。

w3school：先出现的，和W3C无关

w3cschool：后出现的，和W3C无关

W3C制定了很多规范：HTML/XML/http协议/https协议……

3、第一个HTML

<!-- 
    1、这是HTML的注释
    2、加上<!doctype html>是HTML5的语法。不加表示HTML4.0
    3、HTML不区分大小写
-->
<!doctype html>
<!--根-->
<html>
    <!--头-->
    <head>
        <!--告诉浏览器以utf-8的格式打开我当前的文件-->
        <meta charest = "utf-8" />
        <!--网页标题-->
        <title>网页的标题</title>
    </head>
    <!--体-->
    <body>
        网页的主体内容
    </body>
</html>

4、基本标签

p：段落标记

h1~h6：标题字，与word的标题字相同

br：换行标记（独目标记）

hr：横线（独目标记）

color：横线颜色

width：横线宽度（可以px和%）

pre：预留格式

del：删除字

ins：插入字（有下划线）

b：粗体字

i：斜体字

sup：上标

sub：下标

font：字体标签

color：字体颜色

size：字体大小（1~7）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p>
		<p>第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段
第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段
第二段第二段第二段第二段第二段第二段第二段第二段第二段</p>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		<br>
		<hr color="red" width="50%">
		<pre>
			for(int i = 0; i < 10; i++) {
				System.out.println(i);
			}
		</pre>
		<del>删除字</del><b>粗体字</b><i>斜体字</i>
		log<sub>2</sub><sup>n</sup>  
		<font color="blue" size="7">字体标签</font>
	</body>
</html>

页面效果图：

5、实体符号：为了避免和标签冲突，所以需要使用实体符号

<：<

>：>

空格： 

注：html中按多个空格键，在网页中只显示一个空格。

6、HTML表格

table：表格

tr：行

td：列

th：列（比td加粗居中）

合并行：rowspan（一个格占两个位置）

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

合并列：colspan（一个格占两个位置）

注：col合并的时候，删除哪个没有要求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			1、cellspacing:表格单元格间距
			2、cellpadding:表格单元边界与单元内容之间的间距
			3、align：对齐方式（默认：左对齐）
            4、border：表格边线1px
		 -->
		
		<table border="1px" cellspacing="0" cellpadding="0" width="800px" 
height="150px" align="center" >
			<tr align="center">
				<td>第一行第一列</td>
				<td rowspan="2">第一行和第二行第二列合并了</td>
				<td>第一行第三列</td>
			</tr>
			<tr>
				<td align="center">第二行第一列</td>
				
				<td>第二行第三列</td>
			</tr>
			<tr>
				<td colspan="2" align="center">第三行第一列和第二列合并了</td>
				<td>第三行第三列</td>
			</tr>
		</table>
	</body>
</html>

7、thead、tbody、tfoot标签

thead、tbody、tfoot不是必须的，便于后期JS编写。

8、body的背景颜色和背景图片

bgcolor：背景色

background：背景图片

背景图片在背景色的上面

9、img标签

src：图片的路径

只设置width，height会等比例缩放

只设置height，不起作用

title：鼠标悬停时显示的信息

alt：设置图片加载失败时显示的提示信息

10、超链接或热链接

href：hot references 热引用；

后面一定是一个资源的地址。

后面的路径可以是绝对路径也可以是相对路径，可以是网络某个资源的路径。

target：

_blank：新窗口

_self：当前窗口（默认）

_top：顶级窗口

_parent：父级窗口

超链接的作用：

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

11、request与response的概念

request：浏览器向服务器发送数据（请求）

B --》S

response：服务器向浏览器发送数据（响应）

S--》B

12、列表

有序列表：ol

type：1、A、a、I、i

无序列表：ul

type：circle（○）、square（□）、disc（●）

13、表单（重点）

action：写提交的URL地址

method：默认get；还有post

表单有什么用？

答：收集用户的信息。表单展现之后，用户填写表单，点击提交。（submit）

怎么画一个表单？

答：用form标签

一个网页可以有多个表单form

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

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

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

http://192.168.111.3:8080/oa/save 这是请求路径，

表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。

input中的type取值:

radio：单选控件

checkbox：多选控件

submit：提交控件

reset：重置控件

button：普通控件

text：文本控件

password：密码控件

file：文件控件

上传文件专用

hidden：隐藏域

网页上看不到，但是表单提交的时候数据会自动提交给服务器。

input中的value属性用来指定按钮上显示的文本信息。

超链接a与表单form的区别？

答：表达form可以收集信息，而超链接a无法收集信息。

表单提交里面的按钮input中属性必须定义name，不然提交不了。

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

http://192.168.11.3:8080/jd/login?username=as&pwd=123

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

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

java中String split('&');

重点强调：表单项写了name属性的，一律会提交给服务器。不想提交就不要写name属性。

文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。

当name没有写的时候，该项不会提交给服务器

但是当value没有写的时候，value的默认值是空字符串"",将空字符串提交给服务器。java代码得到的是：String s = "";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
  
    <form action="http://192.168.0.1:8000/mianhua/cn">
        姓名：<input type="text" name="username" maxlength="3"><br>
        密码：<input type="password" name="userpassowrd"><br>
        性别：<input type="radio" name="sex" value="1" checked>男
        <input type="radio" name="sex" value="0">女<br>
        爱好：<input type="checkbox" name="aihao" value="study" checked>学习
        <input type="checkbox" name="aihao" value="play">打游戏
        <input type="checkbox" name="aihao" value="dream">做梦<br>
        <textarea name="myText"  cols="30" rows="10">我没有value属性；</textarea><br>
        <select name="position" multiple="multiple">
            <option value="ln" selected>辽宁</option>
            <option value="bj">北京</option>
            <option value="sh">上海</option>
        </select>
        <br><br>
        <input type="file" name="myFile"> <br><br>
        <input type="hidden" name="myHidden"><br>
        <input type="text" disabled><br><br>
        <input type="text" readonly><br><br>
        <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置">
    </form>
</body>
</html>

效果图：

地址栏提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我没有value属性；&position=ln&myFile=&myHidden=

14、表单的说明：

① 用户手动输入的文本框，都不需要给value赋值

② textarea没有value属性

③ radio、checkbox默认选项需要使用，checked="checked"（简写：checked）

④ select中的option属性：

selected="selected" 为默认选中

size：显示条目数量

multiple="multiple" 支持多选(select的属性)

⑤ input的属性

readonly和disabled：

都是只读不能修改

数据不会提交

maxlength：设置文本框中输入的字符数量。

15、HTML中的结点

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

注意：表单提交数据的时候，只和name有关系，和id无关

id有什么作用？

javascript语言：可以对HTML文档中的任何节点进行增删改操作。

获取节点时，通常通过id来获取节点

HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id（DOM树）

16、div和span

div和span有什么用？

div和span都可以称为图层。

有什么用？

图层的作用为了保证页面可以灵活的布局。

div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。

div和span的区别？

div独占一行

span不会独占一行