HTML
-
开发工具
任何文本编辑工具都可以用来书写网页。专业的网页开发工具：
DW、Sublime Text3、 WebStorm、Visual Studio Code、HBuilder
网页
-
扩展名是
.html -
格式：
<!-- 注释内容： 下面的DOCTYPE用于说明HTML页面的版本，下面的写法说明他是基于HTML5版本的页面 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> -
整个HTML页面都是有
html标签来定义的。标签名是不区分大小写的。建议小写
-
每个HTML页面都是由头和体组成
-
头中：
<meta charset="utf-8"> <!--告诉浏览器页面使用utf-8进行编码--> <title></title> <!--用来定义网页的标题（在浏览器页签中能看到）--> -
体中： 存放页面显示相关的标签代码。日常大部分的页面开发，都是放在
body标签中。 -
标签格式：
<!-- 1. 开始和结束标签成对出现。中间可以包含任意的内容--> <空标签></空标签> <标签名>包含文字</标签名> <标签名><另外一个标签></另外一个标签></标签名> <!-- 2. 空标签。不包含内容，开始结束标签合在一起写--> <标签名/> <!--3. 只包含开始标签的标签。（情况比较少，比较特殊） --> <meta>所有标签的名字是HTML规范中定义好的。
-
标签中还可以提供属性
<!--标签中的属性是定义在开始标签的内部。用 属性名='属性值' 的格式来指定，多个属性用空格隔开--> <开始标签 属性名1 ="属性值1" 属性名2='属性值2'></开始标签>属性值，可以用单引号 ，也可以用双引号。
属性名也是HTML规范中定义好的。不同的标签，具备的属性名不同。
属性指定的顺序是无关的。
-
注释的格式：
<!--开始标记 、-->是结束标记。期间，可以写任何内容（注释不允许嵌套）
标题标签
html 中提供了 <h1> ----- <h6>
- 自动加粗
- 独占一行
- 值越小，字体越大
浏览器中按F12，可以调出页面的开发者工具（适合页面的分析、JS代码的端点调试、JavaWeb的传输内容等）
<h1>我是h1</h1>
<h6>我是h6</h6>
水平分割线
<hr/>
-
size属性： 指定宽度
-
noshade属性： 自定没有阴影。
<!-- html中的开关属性 在HTML中有两种指定形式： 1. 开关属性名="开关属性名" 2. 只写： 开关属性名 --> noshade = "noshade" noshade
字体标签
<font> 标签，用于定义字体显示的相关内容
-
没有独占一行
-
size 属性：指定字体的大小
-
color属性：指定字体的颜色
<!-- html中颜色的表示方式 1. 预定义的颜色。使用对应的英文单词即可 color="blue" 2. 使用RGB颜色来表示 R - red G - green B - blue 它通过混合每部分的[0-255]值，来描述最终的效果： RGB - 0 0 0 表示黑色 RGB - 255 255 255 表示白色 在css样式中可以定义:rgb(233,45,28) 总的变化： 256*256*256 表示时，使用16进制的形式，将三部分拼接起来组成6位长的字符串，并用#开头。 所以： 黑色： #000000 白色： #FFFFFF 3. 如果三部分的16进制都是重复的值，可以简写： 比如： 颜色： #EEFFAA ,可以简写为： #EFA -->
粗体
<b> 标签定义粗体。 bold
斜体
<i> 标签定义斜体。 italic
如何定义粗斜体？
<b><i>内容</i></b> <i><b>内容</b></i>
段落标签
<p>对应 paragraph
- 效果是将包裹的内容按段落格式来阻止。并且增加了段落间的外间距。
图片标签
<img> 标签用来显示图片
-
src属性：用来指定图片的位置
<!-- 1. 支持外部的地址（http://图片地址） 2. 支持相对地址 （相对于这个网页的位置） 2.1 ../ 用于指向父级目录 2.2 ./ 用于指向当前目录（一般在指定相对目录的时候省略） 3. 支持绝对路径（相对于网站的根目录）【了解】 用 / 开头的地址 --> -
alt属性： 用于指定图片无法显示时提示的内容
-
width属性、height属性： 分别用于指定图片的宽度和高度（像素px）
- 如果单独指定一个width或height属性，是按图片的长宽比来进行的。
列表标签
有序列表
<ol> 标签定义一个有序列表。 ordered list
- type属性：来修改顺序的样式。默认是阿拉伯数字。
- start属性：用户指定从哪个数字开始编号。默认值是1。
无序列表
<ul> 定义一个无序列表。 unordered list
- type属性：用来修改序号的样式。
列表项
<li> 标签定义一个列表项。 list item
- 由于标签内容是任何内容（出现图片、超链接…）
超链接
<a> 标签，用于定义一个超链接
-
（核心属性） href属性：用于指定跳转的目的地（写法类似于之前的img标签的src属性值）
-
target属性： 用于指定跳转发生在什么地方
- 默认是
_self：当前页面 _blank用于在新的页签中打开跳转的页面自定义的值(后面讲): 让页面在自己定义的框架中显示。
- 默认是
表格标签
<table> 标签用于在网页中定义一个表格。由表头和表体和脚组成。
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
<!--以上是标准写法。实际中有时候也不一定遵守-->
<!--实际中更多的用行来进行区分。行的标签 tr : table row-->
<!-- 表格的第一行，一般作为表头。所以它内部的单元格用： th 标签来定义。 table head -->
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
- 效果： 加粗、单元格居中显示。
<!--表体内容一般是第二行之后的内容，使用td 标签来定义 -->
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
常用属性
<table> 标签:
border属性: 用于指定表格的边框大小。数值越大，表格越宽。
**width属性：**用于指定整个表格的宽度。（1. 数值默认是像素值，单位是px。2.还支持百分比，相对于页面跨度：100%）
bgcolor属性： 指定表格的背景色
cellspacing属性： 一般设置为0，表示单元格之间没有缝隙。
cellpadding属性: 一般设置为0，表示单元格内容的内边距为0。
<td> 标签:
align属性 : 用于指定单元格的水平对齐方式。 left center right
valign属性:用于指定单元格的垂直对齐方式。 top middle bottom
nowrap属性 ： (开关属性)。用于指定单元格的内容是否不折行（默认是自动折行的）nowrap="nowrap"
单元格的合并
水平方向的合并 : 是列的合并 colspan 【列：column】，它的值就是要合并的列的个数。
合并之后的该行的列数不能超出整个表格的列数。
所以： 一般列合并，会伴随后面单元格的删除。合并N个，删除后面的N-1个。
垂直方向的合并 ： 是行的合并 rowspan 【行： row】，它的值就是要合并的行数。
垂直合并往往伴随之后的行对应的单元格的删除。
合并N个，删除后面的N-1个。
表格的用途
- 常规用法： 用来展现数据。
- 用来布局网页（好理解，但是不建议使用）。
框架标签
往往用于网站后台的布局。
- 定义框架集
<frameset>它里面有rowscols属性，用于说明有几行或几列（它的值，需要用逗号分隔。也就是说不管有几行还是有几列，这里就需要有几个逗号分隔的值。这些值代表的意思就是行或列的高度或宽度。支持绝对值、百分比、通配符(*)。）。- 其中可以包含:
<frame标签。定义一个窗口。src属性： 用于指定窗口中显示的网页的内容。name属性：给这个窗口起一个名字。<frameset>标签。嵌套另外一个框架集。
注意： 使用了
<frameset>标签的页面，不能再包含 标签
-
frameset的border属性设置边框的宽度。为0。 -
frame的noresize开关属性设置是否允许调整大小。 -
frame的scrolling属性设置是否出现滚动条。默认是auto、还可以选择 no、yes。HTML的表单标签
表单用来向服务器发表数据。
需要使用 <form> 标签来定义一个表单。
它的三个非常重要的属性：
action属性：说明将来数据提交到的地址是哪里。method属性： 说明数据的提交方式。有两个值：get/post。默认是get。 不区分大小写- post：
- 提交的数据不会出现在URL地址中。
- 它可以提交的数据内容是任意的。没有任何限制。
- 相对来说对于敏感信息稍安全些。
- 效率相对低一些
- get ：
- 表单的提交的数据会拼接到URL地址的后面。
原有的URL地址+? 表单name属性值=表单中填写的值+&表单其它name属性值=表单中填写的值 .... - HTTP协议规定的URL地址的长度是有限的。get方式携带的数据量是有限的。
- 由于URL地址中会携带信息，对于敏感信息来说是不安全的。
- 方便，效率高
- 表单的提交的数据会拼接到URL地址的后面。
- post：
enctype属性：说明表单数据的编码方式。默认值是：application/x-www-form-urlencoded。 当文件上传时，需要设置为：multipart/form-data
表单中能进行信息录入或交互的组件称为：表单控件 、表单元素 。
input 标签
它通过 type 属性，指定了不同类型的控件。
type="text"： 用于在表单中定义一个单行文本框type="password"： 用于在表单中定义一个密码框type="button"： 用于在表单中定义一个按钮（一般配合JS代码来使用)type="checkbox"： 用于在表单中定义一个复选框type="radio": 用于在表单中定义一个单选框type="file"： 用于在表单中定义一个文件上传的组件type="submit"： 用于在表单中定义一个提交按钮type="image": 用于在表单中定义一个 图片类型的提交 按钮。 一般配合src属性使用type="reset"： 用于在表单中定义一个重置按钮。点击它可以清空已经填写的内容。type="hidden"： 用于在表单中定义一个隐藏域
[外链图片转存失败(img-jz9kVY86-1566382656217)(assets/1566265031214.png)]
以上标签，都具备一个对于Java程序来说一个很重要的属性。 name属性 。
只有设置了name属性值的哪些控件中的内容，才会被将来提交到服务器上。
其实，表单控件还提供了两个属性：
disabled开关属性：如果设置了，对应的表单控件显示灰色，不允许修改。那么对应的表单控件的值将来也不会被提交到服务器（即使它设置了name属性值）readonly开关属性：如果设置了，对应的表单控件不显示灰色，不允许修改。但是它的值将来会被提交到服务器。对于： 图片提交按钮、提交按钮、重置按钮，一般是不设置其name属性值的。
如果想在表单显示的时候，就填好了某些内容，可以为其设置 value属性 。
如果想改变提交或重置按钮显示的文字，可以为其指定 value属性。
size 属性：控制文本框的长短
maxlength 属性：控制能录入多少个字符
单选框和复选框
- 一般来说，一组信息，具备相同的name属性值。
- 还需要配合使用
value属性值。否则提交到服务器上的值只是on。我们需要自定义自己的值。比如：- 男用1表示，女用0表示。
<input type="radio" value="1">男<input type="radio" value="0">女
- 男用1表示，女用0表示。
- 控制选中与否，配合
checked开关属性。
textarea标签
textarea 标签，用于定义填写一段文本信息。也称为：“多行文本框”
-
设置值的时候，不是通过
value属性；而是在标签内部书写文字：<textarea name="intro">生于2020年</textarea> -
cols和rows属性用于定义显示多少列、多少行。
select标签
select 标签，用于定义 “下拉框” 或 “列表框”。
下拉框
其内部的选项用 <option> 标签来说明。
- 如果需要提交选择的数据，就给
select标签设置name属性值。 - 默认情况下，是将标签中的文本提交到了服务器。
- 一般情况下，需要为不同的选项设置自定义的值，通过为
<option>标签设置value属性值 - 如果要选中哪一项，就为
<opiton>标签设置selected开关属性
列表框
通过设置 select 标签的 size属性。其值，表示能看到的选项的数量。
默认是单选，如果想要进行多选，还可以为 select 标签设置 multiple开关属性 支持按住shift多选
两个特殊的HTML标签
这两个标签单独书写，没有特殊的意义。不影响页面的显示效果。
<div> ：独占一行。块标签。
<span> ：行内标签。
所以，这两个标签一般会配合CSS技术来做页面样式的设定。DIV+CSS
2771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
