- 创建项目
文件-->新建-->项目-->普通项目-->基本Html项目-->输入项目名，选择项目路径-->创建；
- 入门基础HTML
2.1文件命名
后缀名为*.htm或*.html，文件名不含空格只能也有下划线，英文和数字，首页默认为index.html，widows不区分大小写。
2.2基本结构
<head></head>:网页头部，内部代码不在网页显示；
<body><body>:主体部分，内部代码显示再网页中；
2.3基本标签
1.<body></body>（主体标签）中属性：
(1)bgcolor：设置背景颜色。例：bgcolor：”red”，bgcolor: #ffffff，bgcolor: #fff;
(2)background:设置背景图片。例：background:”url路径”；
(3)bgproperties:滚动设置；
(4)text:设置非超链接文本颜色。例：text:”red”；
2.标题标签:<h1~6>...</h1~6>;
标签内容加大加粗，大小由h1到h6依次减小。
3.段落标签:<p>...</p>;
段落标签中的内容为一行，在结束段落标签后立即换行；
4.换行标签:<br/>;
html中文本不会自动换行，,若在文本中间需要换行的话就需要换行标签；
5.水平线标签:<hr>
单行添加水平线，独占一行；
水平线标签属性：
(1)设置宽与高:width和size；
(2)设置颜色:color;
(3)设置对齐方式:align,值能取center,left,right,默认为center;
例：<hr width="300px" size="10px" color="gray" align="left"/>
6.保留格式标签:<pre>..</pre>；
正常的文本在网页显示的时候不会显示其在代码中的文本格式，但在<pre>..</pre>中 的文本能保留其格式。
7.居中标签:<center>...</center>;
<center>...</center>中内容会被居中显示。
8.行内标签：
仅对内部文本进行格式修改，不占行数；
(1)加粗:<strong>...</strong>
(2)倾斜:<em>...</em>
(3)下角标(下小标):<sup>...</sup>
(4)上角标(上小标):<sub>...</sub>
9.转义字符
(1)版权说明©:©
(2)空格:
html中文本无法识别正常的换行和空格，所以需要使用特殊代码代替。
(3)小于号<:<
防止被识别为标签。
(4)大于号>:>
防止被识别为标签。
(5)引号“:"
防止影响属性的使用。
10.图像标签:<img 属性 />;
<img src="文件路径" alt="..." width="..." height="..." title="..."/>
属性：
(1)src:指明图像地址;
(2)alt:图像获取失败时的替代显示内容;
(3)width和height:设置图片显示的宽和高;
(4)title:鼠标悬停在图片上出现的提示内容;
11.绝对路径和相对路径
(1)绝对路径:文件在硬盘上真正存在的路径,从盘开始到当前文件的目录;
(2)相对路径:当前文件相对与目标文件的路径;
(a):要使用的文件和当前文件在同一目录下
<img scr =”目标文件全名”>
(b):使用文件和当前文件不在同一目录下
<img scr=”../../共有目录/到目标文件目录”>
(c):使用文件的所在目录和当前文件在同一目录下
<img scr=”共有目录/到目标文件目”>
../表示返回上一级目录
12.连接标签
<a href="目标网址" target="..">..</a>
(1)href:指明点击后所想要前往的网页
(2)target:前往网站的方式。
_blank(新开窗口)
_self(在当前窗口打开，默认设置)
_parent(在上一级窗口打开,不常用)
_top(在浏览器的整个窗口打开)
13.链接标签--书签功能
步骤：
(1)创建书签
<a name=“书签名称”></a>
(2)制作链接
链接到同一页面的书签
<A href=”#书签的名称”>链接的文字</A>
链接到不同页面的书签
<A href=”页面路径#书签的名称”>链接的文字</A>
2.4列表
1.无序列表ul-unorder list
<ul type=””>
<li>...</li>
<li>...</li>
</ul>
(1)<ul>...</ul>:声明无序列表，该标签内部所有内容为无序列表；
(2)<li>...</li>:该标签内部所有内容为无序列表内的单个内容；
(3)type:定义无序列表单个内容开头的符号样式，disc(●), circle(○),square(■)；
2.有序列表order list
<ol type=".." start="..">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
(1)<ol>...</ol>:声明有序列表，该标签内部所有内容为有序列表；
(2)<li>...</li>:该标签内部所有内容为有序列表内的单个内容；
(3)type:定义有序列表单个内容开头的序列号样式，1,a,A,i,I均可；
(4)start:定义首个序列号从多少开始；
3.定义列表dl-define list
<dl >
<dt>...</dt>
<dd>...</dd>
</dl>
(1)<dl>...</dl>:声明定义列表，该标签内部所有内容为定义列表；
(2)<dt>...</dt>:该标签内部所有内容为定义列表内的单个内容,不缩进；
(3)<dd>...</dd>:该标签内部所有内容为定义列表内的单个内容,缩进一个字符；
2.5表格
1.表格基本语法
(1)<table>...</table>:定义表格；
(2)<tr>...</tr>:定义一个表的一行内容，相当于一条数据；
(3)<th>...</th>:定义一个表格首行单个单元格的内容，相当于定义数据库表里的字段，表格标签里的首个标签中使用；
(4)<td>...</td>:定义一个单元个，放在tr标签中；
(5)<caption>...</caption>:定义一个表的表头，加粗显示；
<table >
<caption>表头</caption>
<tr >
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
2.table的属性
(1)width属性：指定表格或某一个表格单元格的宽度；
(2)height属性：指定表格或某一个表格单元格的高度；
(3)align属性：指定表格或某一个单元格里的内容的对齐方式；
(4)border属性：表格边线粗细；
(5)bordercolor属性：指定边框的颜色；
(6)Cellspacing属性：指定表格内部各个单元格之间的宽度；
(7)Cellpadding属性：指定表格内文字与边框间距；
(8)bgcolor:设置表格背景颜色；
(9)background:设置表格的背景图像；
3.tr的属性
(1)height:指定行的高度；
(2)bgcolor、background:设置行背景颜色和背景图片；
(3)align:行文字的水平对齐方式；
(4)width、height:指定单元格的高度和宽度；
(5)valign :指定一个单元格里内容的垂直对齐方式。
top:顶端对齐；
middle:居中对齐；
bottom:底端对齐；
Baseline:相对于基线对齐；
4.单元格td属性
(1)align属性:指定一个单元格内容水平对齐方式：
(2)bgcolor属性:指定单元格背景颜色：
(3)background属性:指定单元格的背景图像：
合并单元格:
(1)colspan属性:指定单元格水平跨度，单元格跨越几列，及指所要合并单元格的列数，横向合并。
(2)rowspan属性:指定单元格垂直方向上跨行，及指所要合并单元格的行数，纵向合并。
2.6form表单
用于将网页客户端输入的数据提交到后台。
1.提交按钮
<input type=”submit” value="..."/>
提交所在表单的内容；
value:按钮上显示的文本；
2.文本框
<input type="text" name="..." value="..." placeholder="..."/>
单行文本输入，value为文本框的值，placeholder为文本框初始的默认提示；
3.密码框
<input type="password" name="..."/>
输入内容保密，不可见；
4.单选框
<input type=”radio” name="..." value="..."/>
同一个表单中可以存在多个，根据name判断是否为同一个选择中的不同选项，在name相同时，value必须不同。value是该选项提交到后台时显示的值。可用checked设置默认选项。
5.复选框
<input type="checkbox" name="..." value="..."/>
同一个表单中可以存在多个，根据name判断是否为同一个选择中的不同选项,同一name下value必须不同，但可以多选。用checked可以设置默认选项。
后台接收复选框的值，通过数组接收
6.下拉框
<select name="...">
<option value="...">...</option>
<option value="...">...</option>
</select>
下拉选项，option标签中为下拉列表中的单个选项，同一个下拉框中每个option标签的value值必须不同。用selected可以设置默认选项。
7.文本域
<textarea name="..." cols="..." rows="..."></textarea>
需要输入大量文本时使用，可以显示多行文本。
cols:规定每行可以有多少个字符；
rows:规定了显示的行数；
8.文件上传
<input type="file" name="..."/>
上传文件，如果要使用的话form表达的method属性和enctype属性需修改为method="post"和enctype="multipart/form-data"；
9.按钮
(1)提交按钮:
<input type="submit" />
将表单的内容提交；
(2)普通按钮:
<input type="button"/>
一般会定义其触发条件和调用的方法，对用户的特定动作进行响应；
(3)重置按钮:
<input type="reset" />
将页面重置为初始状态；
10.隐藏域
<input type="hidden" name="..." value="..."/>
当name中名字的数据不想被看到，但提交表单时又需要其数据时使用；
11.Disabled, readonly
都是只有读取权限而没有修改权限。
Readonly: 只读的，不可以修改，但数据可以提交到后台的；
Disabled: 不可用的，数据也不可以提交到后台；
4406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
