目录
三-8-6、input 标签的 readonly 和 disabled 属性：
前言
在开始学习之前，先分享一个HTML的一个帮助文档：HTML 系列教程
一、系统结构：
B/S架构：
即Browser/Server。（浏览器/服务器的交互形式）
优点：升级方便，只升级服务器端代码即可。
缺点：网页形式。内容需从服务器端传来较多数据，速度慢，体验好。
C/S架构：
即Client/Server。（客户端/服务器端的交互形式）
优点：软件形式。内容早已大量下载在本地，服务端传来的内容少，速度快，体验好。
缺点：升级麻烦，维护成本高。
二、什么是HTML？
HTML是一种超文本标记语言。由大量的标签组成，每一个标签都有开始标签和结束标签。
HTML后缀名为.html或.htm，直接用浏览器打开即可运行。
三、HTML的基本语法：? ? ??
三-1、HTML的基本代码结构：
<!--这是html的注释，可多行可单行--> <!doctype html>???????? <!--加上这个表示是HTML5，去掉则为HTML4--> <html>???????? <!--根--> <head>???????? <!--头--> <title> 网页的标题，在浏览器左上角展现 </title> </head> <body>???????? <!--体--> <!--网页的主体内容--> </body> </html>（ <xxxx> 是开始标签，</xxxx>是结束标签 ）
（如果开始标签和结束标签之间没东西，则可以<xxxx/>，一般用在图片<img>）
（HTML语法松散不严格，不区分大小写）
三-2、HTML的基本标签：
段落标记 <p>段落标记</p> 标题字
(1到6，与Word一样，数字越小字体越大)
<h1>标题</h1>、<h2></h2>... 换行 <br>? 横线 <hr> 居中 <center>居中</center> 删除字（字中间一横） <del>删除字</del> 插入字（下划线） <ins>插入字</ins> 粗体字 <b>粗体字</b> 斜体字 <i>斜体字</i> 右上角加字 10<sup>2</sup> 右下角加字 MgCl<sub>2</sub> 字体标签 <font color="red" size="50"> 字</font>????????? （红色字，大小50） （br标签和<hr>标签是一个独目标记，无结束标签）
例：
<hr color="red" width="50%">(color和width是hr标签的属性，表示这条横线是红色的，占屏幕百分之五十)
(横线默认为居中显示)
(因为HTML的语法过于松散，双引号换成单引号，甚至不加都可以运行)
预留格式：
for(int i=0;i<6;i++){ System.out.println(“i=”+i); }如果在html文件中以以上格式输入这串代码，在网页上也只会在一行上显示，因为其中没有换行符<br>。
可以用 <pre></pre> 预留格式。即在编译器里面是什么格式，在网页就什么格式来显示。
示例如下：?
<pre> for(int i=0;i<6;i++){ System.out.println(“i=”+i); } </pre>
HTML的实体符号：
因为大于小于号会和标签的语法冲突，所以用 < 表示小于号，用 > 表示大于号。
实体符号以&开始，以分号 ; 结束。
等号可以直接写，不与HTML语法冲突。
因为在HTML编译器内两个字间隔一万个空格在网站都只显示一个空格，所以空格用实体符号 表示。
三-3、表格：
<table></table>表示一个表格，<tr></tr>表示一行，<td></td>表示一个单元格。
三-3-1、表格的基本属性：
? ? ? ? 属性写在哪个标签里面就是哪个标签的属性，如align写在<table>内则是整个表格的对齐方式，写在<tr>内则是整行的对齐方式，写在<td>内则是一个单元格的对齐方式。
例（三行三列的表格）：
<html> ??? <head> ??????? <title>123456</title> ??? </head> ??? <body> <br><br><br>??????????? <!--让表格下移--> ????????<table border="1px" width="60%" align="center">?????????????? <!-- ?????? 边框为1像素宽度，表格整体占屏幕60%（优点：可随浏览器边框调整而调整） （也可设为像素宽度，这个自由设置） --> <tr align="center" height="150px"> ???????? <td>a</td> ????????????????<td>b</td> ????????????????<td>c</td> </tr> ????????????<tr align="center" height="150px"> ???????????? <td>d</td> ????? ?????? <td>e</td> ?????????? ???? <td>f</td> ????????? </tr> ????????????<tr align="center" height="150px"> ??????????????? <td>x</td> ??????????????? <td>y</td> ??????????????? <td>z</td> ???????? </tr> </table> </body> </html>
三-3-2、合并单元格：
上下单元格合并：
- 删下面的<td></td>
- 上面的<td></td>使用rowspan语句，即<td rowspan=”2”></td>，”2”表示合并单元格数量为2（超也不可能超出表格的最外层边框）。
左右单元格合并：
- 删左边还是右边的单元格这个没要求。
- 保留的那个<td></td>使用colspan语句，即<td colspan=”2”></td>，”2”表示合并单元格数量为2（超也不可能超出表格的最外层边框）。
<td colspan="2" rowspan="2"></td> 这种方式是允许的。
三-3-3、th标签：
在单元格的位置，把<td></td>改为<th></th>可以把这个单元格设成表头，自动居中且字体加粗。一般用于表头的制作。
三-3-4、thead、tbody、tfoot:
?????? 这三者在表格中不是必须的。
?????? 三个标签必须同时使用！
?????? 作用：
- 把一部分表格设为一个整体，这样想整体调整对齐方式的话只需要改一处地方即可。
- 在浏览器解析HTML时，table是作为一个整体解释的，使用tbody可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。? ? ?
例：
<table border="1px" width="60%" align="center"> ?????? <thead>?????? ?????? <tr align="center" height="150px"> ?????? ?????? <td>a</td> ?????? ?????? <td>b</td> ?????? ?????? <td>c</td> ?????? </tr> ?????? </thead> ?????? <tbody> ?????? <tr align="center" height="150px"> ?????? ?????? <td>d</td> ?????? ?????? <td>e</td> ?????? ?????? <td>f</td> ?????? </tr> ?????? </tbody> ?????? <tfoot> ?????? <tr align="center" height="150px"> ?????? ???? ?? <td>x</td> ????????????? <td>y</td> ?????? ?????? <td>z</td> ?? ???? </tr> ?????? </tfoot> </table>
?
三-4、背景图片：
使用backgroud语句，放到哪个<>里就是设置哪个的背景图片。
background=”xxxx”?? xxxx可以是相对路径，相对于.html文件的路径。
三-5、图片：
使用img标签：
?????? <img xxxxx这里是图片路径等设置xxxxx></img>，
????????为了方便，图片一般这样写：<img xxx图片路径等相关设置xxx/>
? ? ? ? （ 凡是开始标签和结束标签之间不需要字时，可以只写一个标签<xxxx/> ）
src 设置外部图片的路径 width 设置图片宽度，单位一般为px，也可为% height 设置图片高度，单位一般为px，也可为% title 设置鼠标悬停时的显示信息。 alt 设置图片加载失败时显示的提示文字 width和height只设置一个，则另一属性等比调整，同时指定，则按指定值调整。
图片格式：
? ? JPEG(JPG)：支持的颜色比较多，图片可压缩，但不支持透明，一般用来保存照片等颜色丰富的图片。
? ? GIF：支持的颜色少，只支持简单透明[直线透明边界]，支持动态图，一般用于颜色单一或动态图。
? ? PNG：支持的颜色多，并且支持复杂透明，一般用来显示颜色复杂的透明图片。
三-6、超链接/热链接：
示例：??? <a href=”www.baidu.com”>百度</a>
因为<a></a>间要写文字，所以不能使用<a/>的格式。
href后的路径可以是网站路径也可以是本地路径（绝对路径、相对路径均可）。
<a></a>间可以是文字，也可以是图片。
示例：
<a href="www.baidu.com"> <img src="baidu.jpg" width="120"/> </a>
超链接可以设置target属性，可赋值：
_blank 使用新窗口跳转 _self 使用当前窗口跳转（默认） _top 回到顶级窗口 _parent 回到父窗口
三-7、列表：
常用的列表分为3种，无序列表(使用<ul>标签)，有序列表(使用<ol>标签)，自定义列表(使用<dl>标签)。
三-7-1无序列表（元素前无序号，用点指示）：
<ul> <li>中国</li> ??? <li>美国</li> </ul>效果：
如果中国以下还想列表，还可以加<ul>和<li>。
如：
<ul> <li>中国 <ul> ???????? <li>北京</li> <ul> <li>颐和园</li> <li>故宫</li> </ul> ????????????<li>南京</li> ??????? </ul> <li>美国 </ul>效果：
<ul>有一个type的属性,属性有3个属性值：
????????dise--实心圆(默认值)
????????circle--空心圆
square--实心方块
<li>同样适用以上属性,并且优先级高于<ul>如：
???????<ul> <li>中国 ???? <ul type="circle"> <li>北京</li> ????????????<li type="disc">南京</li> ????????????<li>上海</li> </ul> <li>美国 </ul>????效果图：
三-7-2、有序列表（元素前有序号）：
<ol> <li>水果</li> <li>蔬菜</li> </ol>
有序列表也可以在原先的基础上继续<ol><li>。
<ol>的type属性有以下5种值:
????????1--表示以 1,2,3,4 来表示
?a--表示以 a,b,c,d 来表示
?A--表示以 A,B,C,D 来表示
? i--表示以 i,ii ,iii 来表示
??I--表示以 I,II,III来表示如：
<ol type="1"> <li>植物</li> <ol type="A"> <li>水果</li> <ol type="a"> <li>草莓</li> <ol type="I"> <li>草莓籽</li> <ol type="i"> <li>圆的</li> <li>方的</li> </ol> <li>草莓PP</li> </ol> <li>西瓜</li> </ol> <li>蔬菜</li> </ol> <li>动物</li> </ol>????效果：
三-7-3、自定义列表：
以<dl>开始,</dl>结束。列表中每个元素的标题使用<dt></dt>定义,后面跟随<dd></dd>用于描述列表中元素的内容。
如：
<dd> <dt>标题1</dt> ??? <dd>标题1的具体内容</dd> ??? <dt>标题2</dt> ???? <dd>标题2的具体内容</dd> ?????? <dd>标题2的具体内容</dd> ??? <dt>标题3</dt> ?????? <dd>标题3的具体内容</dd> </dl>自定义列表也可以在原先的基础上嵌套使用。
效果：
（各类列表都可以相互嵌套组合使用）
三-8、表单：
三-8-1、细说表单：
什么是表单：
作用：收集用户信息
表单标签：????????<form></form>? ? ? ? ? ?（不是from）
因为表单最终是需要提交数据给服务器的，所以form标签有一个action属性，用来指定服务器地址。如<form action=”xxxxx”></form>
画按钮可以使用input输入域。input有type属性，type属性的值有很多，如button等，但只有submit具有提交表单的能力，即：
<form> <input type="submit"/>???????? <!-- 这里可以使用<xxx/>结构 --> </form>使用<input/>中的value属性可以设置提交按钮上显示的文本。如 value=”登录” ，默认显示“提交”。但此时还不能提交到服务器，须设置name。（往下会讲到）
表单和超链接的区别：
<form action="www.baidu.com"> <input type="submit" value="百度"/> </form>点击后就可以跳转到百度。那表单和超链接有什么区别呢？
????????表单有收集数据的输入框，超链接没有。因而表单可以收集用户输入数据再提交，超链接只能跳转固定页面（只能提交固定数据）。
input输入域还可以设置其他type值：
type="text"? ? 单行文本框
type="password"? ? ?密码框，输入的内容会被遮挡
type="submit"? ? 提交按钮，会向指定服务器地址提交<form</form>内所有输入数据
type="button"? ?? 普通按钮
type="reset"? ? ? ?重置按钮，会重置<form></form>内的所有输入数据
type="checkbox"? ? ?复选框
type="radio"? ? ?单选按钮（单选按钮和复选框需注意，使用细则在后面）
表单可结合表格来使用，以达到整齐的效果。
注意：
?????? 如果想提交内容到服务器，须在input内设置name属性让服务器知道这是什么。
?????? 即：
<input type="text" name="username" />??? 该文本框输入为用户名 <input type="password" name="username" />? 该文本框输入为密码?????? 另外，如果是账号密码输入框，那么<input/>的value不需要程序员来写，用户输入的内容就是value，如果有<input type=”text” name=”username” value=”HYF”/>，那么在用户名的输入框内会显示HYF,如果用户不删除它，那么将会把HYF作为用户名提交到服务器。value有默认值，如果不填则提交一个空字符串。（不是NULL串）
?????? 如果想提交给服务器，都必须设置name属性，包括复选框或者单选按钮！
?????? 但name属性的值是随意的，后端能看得懂就行。
表单是以什么格式提交给服务器的？
???????? action?name=value&name=value&name=value&name=value……?????? action为服务器地址，当按提交按钮后，浏览器会提供这个形式向服务器发送内容。（在地址栏可看到）。后端可提供 & 符号对字符串进行切割，在通过 = 符号对name和value进行切割然后进行其他操作。（ 注意此处的name和value只是一个变量名，提交的是name的内容和value的内容，即username=xxxx(用户输入的用户名)，userpwd=xxxx(用户输入的密码) ）。
????????但为了安全，可以在<form>内设置mathod属性，把值post赋值给mathod，注意表单所传递内容就不会显示到地址栏上了。（提交的格式一样）
? ? ? ? ? ? <form action="www.baidu.com" method="post">????????不设置method默认为get值，会把用户提交的信息显示到浏览器的地址栏上。（即便是密码框输入的内容也会显示）
??????
通过这个形式，我们也可以用超链接来提交数据：
?? <a href="www.baidu.com?username=hyf&userpwd=123456">超链接</a>?????? 超链接是get请求不会是post请求。
复选框type="checkbox" 和 单选按钮type="radio"的使用细则：? ? ? ? ！！！！
?????? 例如男和女这两个input，如果要用单选按钮"radio"，因为需要提交内容给服务器，所以必须设置name属性，而且两个input的name属性的值须一样，这样浏览器才知道这两个单选按钮是同一组选项，才能达到只选一个的效果，不然即便两个input都是radio，只要name不同，也可以同时选上。
?????? 另外，因为男和女这两个字只是供用户参考，所以type内必须设置value属性提交给服务器让服务器得以区分，value属性的值项目内部人员自己定，可以是0和1。
?????? 再者，因为单选按钮都会默认选中一个，所以在默认选择的那个type内加上checked即可。
?????? 如：
<input type="radio" name="sex" value="1"/>男 <input type="radio" name="sex" value="0"/>女?????? 同理，复选框type="checkbox"也要设置name和value。需要注意的是，复选框的name可以一致，但因为它是复选框，即便name一致也可以多选。
?????? 复选框type="checkbox" 默认选中的也可以加checked。
代码示例（注册表）：
<html>
??? <head>
??????? <title>123456</title>
??? </head>
?????? <body>
????????????? <form action="www.baidu.com">
???????????????????? <table>
??????????????????????????? <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>性别：</td>
?????????????????????????????????? <td><input type="radio" name="sex" value="1" checked/>男
<input type="radio" name="sex" value="0"/>女
?????????????????????????????????? </td>
??????????????????????????? </tr>
??????????????????????????? <tr align="center">
?????????????????????????????????? <td>爱好：</td>
?????????????????????????????????? <td colspan="1">
????????????????????????????????????????? <input type="checkbox" name="interest" value="sing"/>唱
????????????????????????????????????????? <input type="checkbox" name="interest" value="jump"/>跳
????????????????????????????????????????? <input type="checkbox" name="interest" value="rap"/>Rap
????????????????????????????????????????? <input type="checkbox" name="interest" value="basketball"/>篮球
?????????????????????????????????? </td>
??????????????????????????? </tr>
??????????????????????????? <tr align="center">
?????????????????????????????????? <td>学历：</td>
?????????????????????????????????? <td>
????????????????????????????????????????? <select name="grade" style="width: 100">
???????????????????????????????????????????????? <option value="zk">专科</option>
???????????????????????????????????????????????? <option value="gz" selected>高中</option>
???????????????????????????????????????????????? <option value="bk">本科</option>
???????????????????????????????????????????????? <option value="ss">硕士</option>
???????????????????????????????????????????????? <option value="bs">博士</option>
????????????????????????????????????????? </select>
?????????????????????????????????? </td>
??????????????????????????? </tr>
??????????????????????????? <tr>
?????????????????????????????????? <td>简介：</td>
?????????????????????????????????? <td><textarea rows="5" cols="30" name="synopsis"></textarea></td>
??????????????????????????? </tr>??????????????????????????
??????????????????????????? <tr align="center">
?????????????????????????????????? <td colspan="2">
????????????????????????????????????????? <input type="reset" value="重置"/>
?????????????????????????????????? ??????
????????????????????????????????????????? <input type="submit" value="登录"/>
?????????????????????????????????? </td>
??????????????????????????? </tr>
???
???????????????????? </table>
????????????? </form>
??? </body>
</html>效果图：
三-8-2、select 标签：
代码示例：
学历：<select name="grade"> <option value="zk">专科</option> ????<option value="gz" selected>高中</option> ????<option value="bk">本科</option> ????<option value="ss">硕士</option> ????<option value="bs">博士</option> </select>效果图：
grade是发送给服务器的变量名，zk、gz等是变量值，selected表示默认选项。
三-8-3、textarea 标签（文本域）：
代码示例：
简介：<textarea rows="10" cols="60" name="introduce"></textarea>效果图:
?????? rows设置框显示的行数，cols设置框显示的列数。name是发送给服务器的变量名，文本框不需要设置value，用户输入的就是value。
三-8-4、"file"控件：
<input type="file" />????????上传文件专用。???????
效果图：
三-8-5、"hidden"控件：
<input type="hidden" name="xxxxxx" value="xxxxxx"/>在网页不会显示出来，但在表单提交的时候会一起提交。
但在地址栏能看见.
隐藏的不一定是保密的，有可能只是为了页面美观。
三-8-6、input 标签的 readonly 和 disabled 属性：
两个都是修饰<input>的，且都表示只读（只读value的内容），用户无法修改。（用户可见）
readonly修饰的<input>是白底，disabled修饰的<input>是灰底。
readonly修饰的<input>如果含name属性则它的value会被提交。
disabled修饰的<input>即便含name属性它的value也不会被提交。
用户代码：<input type="text" name="usercode" value="123" readonly> <br> 用户名称：<input type="text" name="username" value="123" disabled>
三-8-7、input?标签的 maxlength 属性：
maxlength可以限制<input>输入框所输入文本的长度：
<input type="text" maxlength="3" />修饰后，该文本框最多输入三个字符。
三-9、元素（节点）的id属性：
在HTML文档中，任何元素（）节点都有id属性，如<input>，包括但不限于<head>、<body>，甚至<html>都有id属性。
id属性可以自己命名。
表单在提交的时候，只和name属性有关，和id无关。
JavaScript可以对HTML文档进行增删改操作，而这都依赖于元素（节点）的id属性。通过id可以对元素（节点）的位置进行快速定位。
id是唯一的，不可以重复。name可以重复。
HTML文档可以看成是一棵树，树上有很多节点，每个节点又可以有很多子节点。这棵树也被称为DOM树。（Document）
<form id=”myform”> ????????<input type=”text” id=”username” name=”username” /> ????????<input type=”password” id=”userpwd” name=”userpwd” /> </form>
三-10、div和span：
?????? 1、div和span是什么？有什么用？
?????? ?????? div和span都可以称为“图层”、“盒子”，可以让页面更灵活地布局。最早是网页是采用table进行布局的，但table太死板了，很难做出好看的页面。现代的网页开发中基本都是采用div布局。
?????? 2、div默认占用一行，span不会。
?
?????? 3、div和span的单位是像素px。
?????? 4、div和span都可以嵌套。
四、参考文献：
HTML表格（table、tr、td、th、thead、tbody、tfoot标签）_拾Miss~博客-CSDN博客_table