HTML整合随笔

朴灿烈づ我的快乐病毒、 2024-04-18 18:39 59阅读 0赞

**本文为根据动力节点学习课件编写随笔，开发随时编写补充。**

第1章 HTML概述  
    1.1 HTML是超文本标记语言，Hyper Text Markup Language  
        (1) 超文本：有流媒体、图片、声音的存在  
        (2) 标记语言：所有标记语言都由标签组成，有爱上标签也有结束标签，例如：<html></html>、<body></body>  
        (3) 注意用来展示页面，修饰数据  
    1.2 什么时候用HTML  
        1.2.1 B(Browser)/S(Server)架构方向  
    1.3 为什么要学HTML  
        为企业内部提供方案，例如：企业内部的办公系统、供应链管理系统、客户关系管理系统等，而这些系统通常对界面要求较低，对业务处理和数据处理要求较高，并且要求降低升级维护的成本，B/S架构可以更好的被企业接收，B/S架构开发通常被叫做Web开发，Web开发通常包括Browser浏览器端的开发以及Server服务器端的开发。  
        1.3.1 虽然我们是学习Java后台服务器编程，但是前端页面编写要了解，能看懂，简单的页面效果可以实现；  
    1.4 怎么开发HTML  
        1.4.1 创建一个以 .html或 .htm结尾的文件，用文本编辑器打开就可以开发  
    1.5 怎么运行HTML  
        1.5.1 用浏览器打开以.html或.htm的文件就可以自上而下解析执行，不需要编译  
    1.6 DTD：Document Type Definition  
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.1//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">  
        1.6.1 DTD文件的作用  
            (1) 帮助你白那些合法的代码  
            (2) 它让浏览器正确的显示代码，或者说DTD只是写给检查器看的  
        1.6.2 XML schema 定义  
            (1) (XML Schema Definition, XSD)是一套W3C标准，用于基于XML的成为XML Schema的类型系统。用于定义的语言是一种称为XML模式定义语言(XML Schema Definition Language)的XML语法。  
    1.7 HTML与W3C(World Wide Web:www)  
        1.7.1 HTML规范是有W3C负责制定的，W3C是实际万维网联盟  
    1.8 浏览器  
        1.8.1 FierFox、Google、IE  
    1.9 系统框架  
        1.9.1 C/S架构  
        (1) 概述  
            Client/Server架构，即服务器/客户端架构，是大家熟知的软件系统体系结构，通过将任务合理分配到Client端和Server端，降低了系统的通讯开销，需要安装客户端才可进行管理操作。  
            常见的C/S架构的系统有：QQ、百度网盘等;  
        (2) 优点  
            A、界面和操作可以很丰富。  
            B、大部分数据保存在客户端，相对安全。  
            C、大部分功能都集成在客户端，只需从服务器下载少量数据，因此访问速度较快。  
        (3) 缺点  
            A、升级维护工作量较大，每一个客户端都需要升级。  
            B、用户群固定。由于程序需要安装才可以使用，因此不适合面向一些不可知用户。  
        1.9.2 B/S架构  
        (1) 概述  
            B/S架构的全称为Browser/Server，即浏览器/服务器。Browser指的是Web浏览器，极少数业务逻辑在前端实现，主要的业务逻辑在服务器端实现，Browser客户端，WebApp服务器端和DB端构成所谓的三层架构。B/S架构的系统无须特别安装，只有Web浏览器即可。B/S架构中，显示逻辑交给了Web浏览器，业务处理逻辑放在了WebApp上，这样就避免了庞大的胖客户端，减少了客户端的压力。因为客户端包含的逻辑很少，因此也被称为瘦客户端。  
        (2) 优点  
            A、客户端无需安装，有Web浏览器即可。  
            B、B/S架构可以直接放在广域网上，通过一定的权限控制实现多客户访问的目的，交互性较强。  
            C、B/S架构无需升级多个客户端，升级服务器即可。  
        (3) 缺点  
            A、在跨浏览器上，B/S架构不尽如人意。  
            B、表现要达到CS架构的程度需要花费不少精力。  
            C、在速度和安全性上需要花费巨大的设计成本，这是BS架构最大的问题。

第2章 B/S架构原理剖析  
    2.1接口与协议的作用  
        接口和协议可以理解为一种行业的标准或者规范，只有提前制定好规范和标准，将来各个部件或组件才可以做到无缝对接，接口的存在使整个系统变的具有很强的可接插特性，使整个系统各个组件之间到达松耦合，具备很强的高扩展力。  
        Java语言连接数据库的API被称为JDBC接口，该接口是SUN公司负责制定的，连接数据库的Java程序员只需要面向JDBC接口调用的相关方法即可完成底层数据库CRUD操作，该规范的出现让操作数据库的Java程序和底层具体的数据库产品借耦合，Java程序无须依赖底层具体的数据库产品，可以真正做到“一套Java程序”连接并操作各种不同类型的数据库系统。  
        再例如“不同版本的浏览器”都可以访问“百度网站”，并且最终在浏览器中显示的百度页面都是相同的，这说明“浏览器软件”和“百度服务器软件”之间是解耦合的，它们之所以可以做到解耦合就是因为这两个软件在互相传递数据的时候必然是遵守某种传送标准的，这种标准就是W3C制定的HTTP鞋业（超文本传输协议）。  
    2.2 B/S架构  
        浏览器 ---W3C's HTTP---》 Web服务器 ---SUN's Servlet---》 Web应用 ---SUN's JDBC--- 》数据库服务器  
        Browser ---B/S架构---》   WebServer     ------》          WebAPP  ------》          DB Server  
第3章 HTML元素  
    3.1HTML标签  
    3.2标签属性  
    3.3引号样式  
    3.4语法是否严格：不严格，语法松散  
    3.5是否区分大小写：不区分大小写

<html>
            <head>
                <title>第一个HTML</title>
            </head>
            <body>
                Hello World!
            </body>
        </html>

第4章 HTML基本标签  
    4.1段落标签：<p></p>  
        4.1.1 定义：可以把HTML文档分割为若干段落  
    4.2标题字：<h1></h1>至<h6></h6>  
        4.2.1 标题是通过<h1>-<h6>等标签进行定义的  
        4.2.2 <h1>定义最大标签，<h6>定义最小标签  
    4.3换行  
        4.3.1 定义：<br>可插入一个简单的换行符  
        4.3.2 <br>标签是空标签，它没有结束标签  
    4.4注释：  
    4.5 align属性：剧中对齐  
    4.6水平线：<hr/>

第5章 HTML常用实体符号  
    5.1空格：&nbsp;  
    5.2小于号：<  
    5.3大于号：>  
    5.4乘号：&times;  
    5.5除号：&divide;第6章 HTML表格  
    6.1作用：HTML中table标签实现表格  
    6.2表格的作用：  
        (1) 主要用作布局  
        (2) 先把表格画出来，然后往表格中放入数据  
        (3) 现代网页采用table的比较少，采用div较多  
    6.3实例一：创建table表格  
        (1) <table>的属性如下：  
            border="1px" width="500px" height="300px" align="center"  
        (2) <tr>行</tr>、<td>单元格</td>  
        (3) <hr>、<center>剧中标签</center>

<html>
            <head>
                <title>表格</title>
            </head>
            <body>
            
            
            <center>员工信息表</center>
    
            
            <br><br>
            
            <hr color="red" width="60%">
                
                <table border="1" cellspacing="0" cellpadding="0" width="50%" height="300px" align="center">
                    
                    <tr>
                        
                        <td>未设置对齐</td>
                        <td>未设置对齐</td>
                        <td>未设置对齐</td>
                    </tr>
                    <tr>
                        
                        <td align="left">左对齐内容。</td>
                        <td align="right">右对齐内容。</td>
                        <td align="center">居中对齐内容。</td>
                    </tr>
                    <tr align="right">
                        
                        <td>物理</td>
                        <td>化学</td>
                        <td>生物</td>
                    </tr>
                </table>
            </body>
        </html>

6.4实例二：使用表格头、表格体、表格脚  
        (1) <table border="1px" width="30%">  
        (2) 表格头：<thead><tr> <th>表格中标题专用</th> </tr></thead>  
        (3) 表格脚：<tfoot><tr><td>表格脚</td></tr><tfood>

<html>
            <head>
                <title>表格-03</title>
            </head>
            <body>
            
                <table border="1px" width="30%">
                    
                    <thead>
                        <tr align="center">
                        
                            <th>员工编号</th>
                            <th>员工姓名</th>
                            <th>员工薪水</th>
                        </tr>
                    </thead>
                    
                    <tbody>
                        <tr align="center">
                            <td>7788</td>
                            <td>SMITH</td>
                            <td>800</td>
                        </tr>
                        <tr align="center">
                            <td>7712</td>
                            <td>Ford</td>
                            <td>1800</td>
                        </tr>
                    </tbody>
                    
                    <tfoot>
                        <tr align="center">
                            <td>表脚</td>
                            <td>表脚</td>
                            <td>表脚</td>
                        </tr>
                    </tfoot>
                </table>
            </body>
        </html>

6.5实例三：行合并属性，列合并属性rowspan、colspan  
        (1) rowspan行合并属性：规定单元格可横跨的行数  
        (2) colspan列合并属性：规定单元格可横跨的列数

<html>
            <head>
                <title>表格—单元格合并</title>
            </head>
            <body>
            
                <table border="1px" width="500px">
                    <tr>
                        <td>1</td>    
                        <td>2</td>    
                        
                        <td rowspan="2">3</td>    
                    </tr>
                    <tr>
                        <td>4</td>    
                        <td>5</td>    
                            
                    </tr>
                    <tr>
                    
                        <td  colspan="2">7</td>    
                        
                        <td>9</td>    
                    </tr>
                </table>
            </body>
        </html>

6.6 table标签：<table></table>  
        6.6.1 每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。  
        6.6.2 字母td指表格数据（table data）即数据单元格的内容  
    6.7 table标签的border属性：表格的边框属性  
    6.8 table标签的属性：  
        align：规定表格相对于周围元素的对齐方式  
        width：(1) width="100px"：表示整个表格的宽度为100像素(2) width="50%"：表示整个表格占整个浏览器50%的宽度  
        height：(1) height="200px"：表示整个表格的高度为200像素(2) height="50%"：表示整个表格占整个浏览器50%的高度  
        cellpadding：规定单元边沿与其内容之间的空白。  
        cellspacing：规定单元格之间的空白。  
    6.9 tr标签：定义HTML表格中的行  
    6.10 td标签：定义HTML表格中的标准单元格  
        6.12.1 HTML表格有两类单元格  
            (1) 表头单元th - 包含头部信息（由th元素创建）  
            (2) 标准单元td - 包含数据（由td元素创建）  
    6.11 th标签：表头单元，包含头部信息  
    6.12 thead、tbody、tfoot标签  
        6.14.1 thead标签：定义表格的表头，该标签用于组合HTML表格的表头内容  
        6.14.2 tbody标签：表格主体  
        6.14.3 tfood标签：定义表格的页脚（脚注或表注）  
    6.13单元格合并  
        6.15.1 rowspan行合并属性：规定单元格可横跨的行数  
        6.15.2 colspan列合并属性：规定单元格可横跨的列数

第7章 HTML背景色背景图片  
    7.1 Body标签bgcolor属性：设置整个页面背景颜色  
        7.1.1 实例：bgcolor="blue"  
    7.2 table、tr、td标签的bgcolor属性：设置表格、行、单元格颜色  
        7.2.1 bgcolor属性的至：  
            (1) color\_name：规定颜色值为颜色名称的字体颜色（比如“red”）  
            (2) hex\_number：规定颜色值为十六进制的字体颜色（比如“\#ff0000”）  
            (3) rgb\_number：规定颜色为rgb代码的字体颜色（比如“rgb(255,0,0)”）  
            <table bgcolor="blue">  
            <tr bgcolor="0000FF">  
            <td bgcolor="rgb(255,255,0)"  
        7.2.2 <font></font>属性color、size  
    7.3 body标签background属性：设置背景图像  
        7.3.1 实例：<body background="img/1.jpg">

<html>
            <head>
                <title>背景色和背景图片</title>
            </head>
            
                
            <body>
                <table border="1px" width="300px" bgcolor="blue">
                    <tr bgcolor="red">
                        <td bgcolor="yellow"><font color="white" size="50">1</font></td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                    </tr>
                </table>
            </body>
        </html>

第8章 HTML图片  
    8.1 img标签<img src="img/1.jpg"/>  
        8.1.1 若在开始标签与结束标签之间没有内容时，可以将结束标签省去，在开始标签的最后添加“/”  
    8.2 src属性：是必须的  
        8.2.1 src的值是图像文件的URL，也就是引用该图像的文件的绝对路径或相对路径  
    8.3 width属性：设置图像的宽度尺寸  
    8.4 height属性：设置图像的高度尺寸  
    8.5 title属性：鼠标悬停在图片上时显示title文字  
    8.6 alt属性：在图片无法正确显示的情况下alt属性有效果

<html>
            <head>
                <title>图片标签img</title>
            </head>
            <body>
                
                
                <a href="https://www.baidu.com"><img src="img/1.jpg" width="270" height="129" alt="快来点击我" title="点我去百度哦！" /></a>
            </body>
        </html>

第9章 HTML超链接  
    9.1 实例一：链接网络页面：<a href="网络路径">文本</a>  
        <a href="http://www.baidu.com">百度</a><br/>  
    9.2 实例二：链接本地路径页面<a href="表格.html">表格</a>  
        <a href="test.html">测试页面</a>  
    9.3 实例三：图片超链接  
        <a href="http://www.baidu.com">  
            <img src="img/1.png" width="270" height="129"  alt="点击跳转至百度" title="点击跳转至百度"/>  
        </a>  
    9.4 实例四：锚点<a href="\#one">文本</a>   <a name="one"></a>  
        第一步：创建<a href="\#one">第一章</a>  
        第二步：创建<a name="one">第一章 内容开始</a>  
            注：href属性值one(\#必须写)必须与name属性值one相同

(1) 通过\#号加锚点名称：<a href="\#one">第一章</a>  
        (2) one为锚点名称<a name="one">第一章 内容开始</a>

9.5 超链接：用于从一张页面链接到另一张页面  
        (1) 标签中的内容只是供用户参考  
        (2) 当用户点击该内容时，浏览器会向服务器发送一个http请求  
    9.6 超链接和在地址栏上输入URL的区别  
        两种方式的本质是相同的，只不过点击超链接更直接  
    9.7 超链接标签<a>  
        (1) href属性：属性是相对路径、绝对路径或网络路径  
        (2) target属性：设置资源最终显示位置（或规定在何处打开链接）  
            该属性可选值：  
                \_blank    在新窗口打开页面    例子：<a href="www.baidu.com" target="\_blank">百度</a>  
                \_self    在当前窗口打开页面    例子：<a href="www.baidu.com" target="\_self">百度</a>  
                \_parent    在当前窗口的最顶层窗口/父窗口显示页面    例子：<a href="www.baidu.com" target="\_parent">百度</a>  
                \_top    在第一次打开窗口的页面显示新页面    例子：<a href="www.baidu.com" target="\_top">百度</a>  
                framename    在指定的框架中打开被链接文档。

第10章 HTML中的标题字、段落标签、预留格式  
    10.1 标题字<h1>~<h6>  
        <h1>标题字</h1>  
    10.2 段落标签<p></p>  
        <p>  
            段落标签  
        </p>  
    10.3 预留格式<pre>内容</pre>  
        定义：页面中输入什么样式就显示什么样式  
        <pre>  
            for(int i=1; i&lt10; i++)\{  
                System.out.println("i=" +i);  
            \}  
        </pre>  
          
第11章 HTML列表  
    11.1 无序列表<ul><li></li></ul>  
        (1) type属性可选值：  
            disc默认值，实心圆  
            circle空心圆  
            square实心方块  
    11.2 有序列表<ol><li><li><ol>  
        type属性可选值：A、a、I、i、1

第12章 HTML格式标签  
    12.1 粗体字<b>显示内容</b>  
    12.2 斜体字<i>显示内容</i>  
    12.3 插入字<ins>显示内容</ins>  
    12.4 删除字<del>显示内容</del>  
    12.5 预留格式文本<pre>显示内容</pre>  
    12.6 font标签<font color="" size="">显示内容</font>  
    12.7 右上角加字：10<sup>2</sup>  
    12.8 右下角加字：10<sub>m</sub>

第13章 HTML表单  
    13.1 在HTML中使用表单和用户完成交互；表单主要负责采集数据信息，然后向服务器提交表单数据，进行相关处理  
    13.2 <form>表单属性  
        (1) name属性：设置表单的名称  
        (2) action属性：用来设置发送请求的路径  
            B/S架构中，从浏览器B端向服务器S端发送数据，叫请求(request);  
            B/S架构中，从服务器S端向浏览器B端发送数据，叫响应(response);  
        (3) method属性：用来设置表单提交数据的方式：get、post  
            get方式：为默认提交方式，提交的数据会显示在地址栏中  
            post方式：提交的数据不会在地址栏中显示，相对安全  
        表单中标签：  
        (1) input标签,属性：  
            type：类型  
            readonly（只读控件）：只能看不能改，数据也会提交给服务器    例：<input type="text" name="username" value="zhangsan" readonly />  
            disabled（无效控件）：只能看不能改，数据不会提交给服务器    例：<input type="text" name="username" value="zhangsan" disabled />  
            size：设置文本框的可视长度    例：<input type="text" name="username" size="10" />  
            maxlength：设置文本框中可编写的长度    例：<input type="text" name="username" maxlength="10" />  
          \* input标签,type类型：  
            text：文本输入    例：<input type="text" name="username" />  
            password：密码输入框    例：<input type="password" name="password" />  
            radio：单选按钮    例：<input type="radio" name="sex" />  
            checkbox：多选按钮    例：<input type="checkbox" name="interest" />  
            submit：表单提交按钮    例：<input type="submit" name="注册" />  
            button：普通按钮    例：<input type="button" name="提交注册" />  
            reset：表单重置按钮    例：<input type="reset" name="重置" />  
            file：文件上传组件    例：<input type="file" name="filename" />  
            hidden：隐藏控件（在浏览器看不到，但提交表单时会提交给浏览器）    例：<input type="hidden" name="usercode" />  
        (2) 下拉列表标签：<select><option></option></select>  
            <select name="grade">  
                <option value="gz">高中</option>  
                <option value="dx">大学</option>  
            </select>  
        (3) 文本域标签<textarea></textarea>  
            <textarea name="introduce" cols="50" rows="10"></textarea>  
              
    13.3 HTTP协议：  
        (1) 是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议（HTTP）是一种通信协议  
        (2) 由W3C制定的超文本传输协议，web开发人员和浏览器厂商必须按照规定好的格式进行编写和解析  
        (3) 它允许将超文本标记语言（HTML）文档从Web服务器传送到客户端的浏览器  
    13.4 例子：用户信息表单

第14章 HTML标签的id属性  
    14.1 HTML标签：  
        \* 在HTML页面中任何一个标签都可以看做一个节点，  
        \* 整个HTML页面可以看作是节点的集合，整个HTML页面也可以看作一棵树，  
        \* 这棵树的根是<html></html>，这个根节点里有两个子节点<head></head>和<body></body>，  
        \* 任何一个节点都有ID属性，id在同一个页面中不能重复，id是这个节点的身份证号，色湖这个节点的唯一标识。  
    14.2 id属性的作用  
        \* 任何一个标签都有id属性;  
        \* 在同一个页面中id属性的值不能重复，是唯一标识;  
        \* 通过节点的id获取该节点对象，然后对这个节点对象进行增删改的操作，从而达到页面的动态效果。【JavaScript】

第15章 HTML中的div和span  
    \* div和span都是图层  
    \* 图层在HTML中主要使用在布局方面  
    \* 每一个图层都是一个独立的单元，通过定位图层的位置，可以让网页布局更加灵活  
    \* 现代HTML页面大部分都是使用div和span进行布局，比较灵活，但在之前都是通过table标签进行布局，非常死板，不灵活，所以table布局很少使用了  
    \* div和span都是独立的单元，可以往div和span中放入任何HTML元素，div和span都是可以相互嵌套的  
    \* 缺省情况下，div会独占一行，span不会独占一行

<body>
            <div id="myDiv">
                DIV:任何HTML元素，会独自占用一行
            </div>
            aaaaaa
            <span id="mySpan">
                Span:任何HTML元素，不会独自占用一行
            </span>
            zzzzzz
        </body>

第16章 HTML框架  
    16.1 frameset标签只能出现在head标签中，不可在body中出现  
    16.2 实例一  
        \* 第一步：搭建框架：将页面竖着分为30%和70%两部分  
            <frameset cols="30%,\*">  
                <frame src="http://www.baidu.com"></frame>  
                <frame src="http://www.taobao.com"></frame>  
            </frameset>  
        \* 第二步：搭建框架：再将30%的页面横着分为30%和70%两部分  
            <frameset cols="30%,\*">  
                <frameset rows="30%,\*">  
                    <frame src="http://www.baidu.com"></frame>  
                    <frame src="http://www.taobao.com"></frame>  
                </frameset>  
                <frame src="http://www.taobao.com"></frame>  
            </frameset>  
        \* 第三步：由于我们要操控页面点击事件，所以我们自己来创建三个页面  
            (1) left\_top.html在页面body里编写：  
                A、<a href="left\_down.html" target="f2">java.sql</a>  
            (2) left\_down.html在页面body里编写：  
                A、<a href="right.html" target="f3">DriverManager</a>  
            (3) reght.html在页面body里编写：  
                <pre>  
                    for(int i = 1; i < 10; i++)\{  
                        System.out.println(rs.getString(i));  
                    \}  
                </pre>

欢迎页：

left\_top.html页：

left\_down.html页：

<html>
            <head>
                <title>left_down</title>
            </head>
            <body>
                left_down<br>
                <a href="main.html" target="f3">Strign</a>
            </body>
        </html>

main.html页：

**希望对你有帮助，祝你有一个好心情，加油！**

**若有错误、不全、可优化的点，欢迎纠正与补充！**