HTML学习笔记

1.系统结构

B/S架构：
Browser / Server （浏览器/服务器的交互形式。）
Browser支持哪些语言：HTML CSS JavaScript
S是服务器端Server，Server端的语言很多：C C++ Java python…

B/S架构的系统有什么优点和缺点？
优点：升级方便，只升级服务器端代码即可。维护成本低。
缺点：速度慢、体验不好、界面不炫酷
B/S架构的系统有哪些代表？
京东百度天猫

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

缺点：升级麻烦，维护成本较高。
优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）
常见的C/S架构的系统：
QQ微信支付宝

2.什么是HTML？怎么开发HTML？怎么运行HTML？

什么是HTML？
	HTML: Hyper Text Markup Language （超文本标记语言）
	由大量的标签组成，每一个标签都有开始标签和结束标签。
	<标签>
		<标签>
			<标签 属性名="属性值" 属性名="属性值">
			
		
	

	超文本: 流媒体、图片、声音、视频....

怎么开发HTML？
	HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
	HTML也有专业的开发工具，例如：DreamWeaver、HBuilder.....

怎么运行HTML？
	直接采用浏览器打开HTML文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.HTML是谁制定的？

W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5.
1
2
3

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

为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
w3school：先出现的，和W3C没有关系
w3cschool：后出现的，和W3C没有关系

4.HTML格式




<html>
    
    <meta charset="UTF-8">
    
    <head>
        
        <title>网页的标题title>
    head>

    
    <body>
        网页的主要内容，欢迎学习HTML！
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5.HTML基本标签


<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Titletitle>
  head>

  <body>
    
    <p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。p>
    <p>她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。p>大怪兽!!!!!!!!

    
    <h1>一级标题h1>
    <h2>二级标题h2>
    <h3>三级标题h3>
    <h4>四级标题h4>

    
    hello <br>world!

    
    <hr>
    
    
    <hr color="yello" width="50%">
    
    <hr color=yello width=30%>

    
    <pre>
      for(int i=0;i<5;i++)
      {
        System.out.println("i="+i);
      }
    pre>

    <del>删除字del>
    <ins>插入字ins>
    <b>粗体字b>
    <i>斜体字i>

    
    10<sup>2sup>
    
    10<sub>2sub>

    
    <font color="blue" size="50">字体标签font>

  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

效果：
（图片5）

6.实体符号


<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>实体符号title>
  head>
  <body>
    
    b < a > c
    <br> b<a>c 
    <br> b<a>c

    
    <br>啊    b
    <br> a    b
    
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果：
（图片6）

7.表格

7.1、建表


<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>表格title>
  head>
  <body>
    
    
    
    
    
    <br><br><br><br><br><br><br><br>
    <h1 align="center">员工信息列表h1>
    <table align="center" border="1px" width="30%" height="150">
      <tr align="right">
        <td>atd>
        <td>btd>
        <td>ctd>
      tr>
      <tr>
        <td>dtd>
        <td>etd>
        <td>ftd>
      tr>
      <tr>
        <td>1td>
        <td>2td>
        <td align="center">3td>
      tr>
    table>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

效果：
（图片7.1）

7.2、表格合并


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写title>
head>
<body>
  <table align="center" border="1px" width="50%" height="150">
    
    <thead>
      <th>员工编号th>
      <th>员工薪资th>
      <th>部门名称th>
    thead>
    
    <tbody>
      <tr>
      <td>1td>
      <td>5000td>
      <td>SALEStd>
      tr>
      <tr>
        <td>2td>
        <td>4000td>
        <td rowspan="2">GANtd>
      tr>
      <tr>

        <td colspan="2">7500td>

      tr>
    tbody>
    
    <tfoot>
    <tr>
      <td>4td>
      <td colspan="2">7500td>
      
    tr>
    tfoot>
  table>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

效果：
（图片7.2）

7.3、thead tbody tfoot


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写title>
head>
<body>
  <table align="center" border="1px" width="50%" height="150">
    
    <thead>
      <th>员工编号th>
      <th>员工薪资th>
      <th>部门名称th>
    thead>
    
    <tbody>
      <tr>
      <td>1td>
      <td>5000td>
      <td>SALEStd>
      tr>
      <tr>
        <td>2td>
        <td>4000td>
        <td rowspan="2">GANtd>
      tr>
      <tr>

        <td colspan="2">7500td>

      tr>
    tbody>
    
    <tfoot>
    <tr>
      <td>4td>
      <td colspan="2">7500td>

    tr>
    tfoot>
  table>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

效果：
（图片7.3）

8.背景图片和颜色


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色和背景图片title>
head>

<body bgcolor="orange" background="img/cool.png">

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果：
（图片8）

9.图片（img）


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片title>
head>
<body>
  
  <img src="img/hudie.png" width="500" title="这是一只蝴蝶照片" alt="图片找不到"/>
  <br><br><br>
  <img src="img/hudie1.png" width="100" title="这是一只蝴蝶照片" alt="图片找不到"/>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果：
（图片9）

10.超链接热链接


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接 热链接title>
head>

<body>
  <a href="http://www.baidu.com">百度a>
  <a href="http://www.jd.com">京东a>
  <br><br><br>
  
  <a href="表格.html">表格a>
  <br><br><br>

  
  <a href="背景颜色和背景图片.html">
    <img src="img/cool.png" width="100" />
  a>
  <br><br><br>

  
  
  <a href="背景颜色和背景图片.html" target="_blank">
    <img src="img/cool.png" width="100" />
  a>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

超链接的作用：
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）

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

用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。
从操作上来讲，超链接使用更方便。

效果：
（图片10）

11.列表（有序/无序）


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表title>
head>
<body>
    
    <ol type="A">
        <li>水果
            <ol type="1">
                <li>苹果li>
                <li>香蕉li>
                <li>香梨li>
            ol>
        li>
        <li>蔬菜li>
        <li>饮料li>
    ol>

    
    <ul type="circle">
        <li>小学
            <ul type="disc">
                <li>北京
                    <ul type="square">
                        <li>1li>
                        <li>2li>
                        <li>3li>
                    ul>
                li>
                <li>上海li>
            ul>
        li>
        <li>初中li>
        <li>高中li>
    ul>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

效果：
（图片11）

12.表单（form）

12.1、创建表单及提交


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单title>
head>

<body>
  <form action="http://192.168.111.3:8080/oa/save">
    
    
    
    <input type="submit" values="注册"/>
    
    <input type="button" value="设置按钮上的显示"/>
  form>
  <br><br><br>

  
  <a href="http://www.baidu.com">百度a>
  <form action="http://www.baidu.com">
    <input type="submit" value="百度"/>
  form>
  <br><br><br>

  <form action="http://localhost:8080/login">
    账号<input type="text"/><br>
    密码<input type="password"/><br>
    <input type="submit" value="登录"/>
  form>
  <br><br><br>
  
  
  <form action="http://localhost:8080/login">
    <table border="1px">
      <tr>
        <td>用户名td>
        <td><input type="text" name="username"/>td>
      tr>
      <tr>
        <td>密码td>
        <td><input type="password" name="userpwd"/>td>
      tr>
      <tr align="center">
        <td colspan="2">
          <input type="submit" value="登录"/>
             
          <input type="reset" value="清空"/>
        td>
      tr>

    table>
  form>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

效果：
（图片12.1）

12.2、用户注册页面


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册title>
head>
  
<body>
  <form action="http://localhost:8080/register" method="post">
    用户名
    <input type="text" name="username"/>
    <br>
    密码
    <input type="password" name="userpwd"/>
    <br>
    确认密码
    <input type="password"/>
    <br>
    性别
    <input type="radio" name="sex" value="1"/>男
    <input type="radio" name="sex" value="2" checked/>女
    <br>
    兴趣爱好
    <input type="checkbox" name="interest" value="smoke" checked>抽烟
    <input type="checkbox" name="interest" value="drink" checked>喝酒
    <input type="checkbox" name="interest" value="code">编程
    <br>
    学历
    <select name="grade">
      <option value="gz" selected>高中option>
      <option value="cz" selected>初中option>
      <option value="xx" selected>小学option>
    select>
    <br>
    简历
    <textarea rows="10" cols="50" name="introduce">textarea>
    <br>
    <input type="submit" value="注册"/>
       
    <input type="reset" value="清空"/>
  form>

  
  
  <a href="http://localhost:8080/oa/save?username=Jm&password=123">提交a>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

效果：
（图片12.2）

12.3、下拉列表支持多选


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表支持多选title>
head>
<body>
  <form>
    <select multiple="multiple" size="2">
      <option>1option>
      <option>2option>
      <option>3option>
      <option>4option>
    select>
  form>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果：
（按住atrl可以多选）
（图片12.3）

12.4、file控件,hidden控件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file控件,hidden控件title>
head>
<body>
  
  <input type="file"/>

  <form action="http://localhost:8080/save">
    
    <input type="hidden" name="userid" value="111"/>
    用户代码<input type="text" name="usercode"/>
    <input type="submit" value="提交"/>
  form>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果：
（图片12.4）

12.5、readonly和disabled控件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>readonly disabledtitle>
head>
<body>
  
  <form action="http://localhost:8080/save" >
    用户代码<input type="text" name="usercode" value="1111" readonly/>
    <br>
    用户姓名<input type="text" name="username" value="zhangsan" disabled/>
    <br>
    <input type="submit" value="提交"/>
  form>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果：
（图片12.5）

12.6、input控件的maxlength属性


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input控件的maxlength属性title>
head>
<body>
  
  <input type="text" maxlength="3"/>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果：
（最多输入三个）
（图片12.6）

13.HTML中元素的id属性

1.在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中di不能重复。
2.注意：表单提交数据的时候，只和name有关，和id无关。
3.id有什么用？
javascript语言：可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们获取元素（节点）更加方便。
4.HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
javascript主要就是对这棵DOM树上的节点进行增删改的。
DOM（Document）树。


<html lang="en" id="myhtml">
<head id="myhead">
    <meta charset="UTF-8">
    <title>HTML中元素的id属性title>
head>
<body id="mybody">
  <form action="http://localhost:8080/save" id="myform">
    <input type="text" name="username" id="myname"/>
    <input type="password" name="userpwd" id="mypwd"/>
    
  form>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

14.HTML中的div和span

1.div和span是什么？有什么用？
div和span都可以成为"图层"
图层的作用是为了保证页面可以灵活的布局。
图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
2.其实最早的网页就是采用table进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
3.div和span的区别？
div独自占用一行（默认情况下）
span不会独自占用一行。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中的div和spantitle>
head>
<body>
  <div id="div1">我是一个DIVdiv>
  <div id="div2">我是一个DIVdiv>

  <span id="span1">我是一个SPANspan>
  <span id="span2">我是一个SPANspan>

  
  <div id="div3">
    <div>
      <div>
        test
      div>
    div>
  div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果：
（图片14）

相关阅读:
OpenCV图像处理学习九，双边滤波器 (Bilateral Filter)和中位数滤波器 (Median Filter)
cookie相关
 使用 ElementUI 组件构建 Window 桌面应用探索与实践（WPF）
Flexible-Job-Shop-Scheduling-Problem解读
 libevent 梳理
 ORA-00600之数据库内部BUG 22114696
关于elf文件load段上内存映射
 docker基础篇：安装redis单机版
 字典树、AC自动机、后缀数组
 2022年前端面试题整理，持续更新中
原文地址：https://blog.csdn.net/m0_66689823/article/details/126187335