HTML-原创手记-慕课网

HTML：

1.定义：超文本标识语言

2.标签：

（1）双标签：<html></html>

①分为头标签和尾标签，尾标签以/开头

②双标签内可以放子标签

（2）单标签：<br/>

①标签以/结束

②单标签不能含子标签

（3）标签名不区分大小写

（4）属性：要写在标签名后面，注意要有空格，比如：<img src="xx.jpg"/>

（5）注释：,写在标签的外面

3.颜色：

（1）模式：RGBR：红色，G：绿色，B：蓝色

（2）表示方式：

①十进制数：单个颜色取值：0-255

②十六进制数：单个颜色取值：00-ff

换算：十进制十六进制

举例：

255，十进制二进制（11111111）十六进制（ff）

（3）规律：

单一颜色：亮度最高为白色#ffffff,最暗为黑色#000000，灰色为RGB三个值相等

混合颜色：黄色为#ffff00，青色为#00ffff,紫色为#ff00ff

注意：颜色值前有#号

4.网页的整体设置：

网页分为头部和主体，头部用head标签，此内容不会显示在网页上；主体用body标签，此内容会显示在网页上

5.网页的文字与段落

（1）文字--------<font>

①颜色：<font color="#00ff00">文字</font>

②大小：<font size=“50”>文字</font>

③字体：<font face="宋体">文字</font>

④斜体：<i>文字</i>

⑤加粗：<b>文字</b>

⑥下划线：<u>文字</u>

⑦标题：<h1>文字</h1>，取值范围1-6，超过范围是普通的文本

（2）段落------<p>

①使用<p>.....</p>来设置一个段落

②空格：&nbsp；代表一个字节，英文是两个，中文是四个

③对齐方式：

<p align="left">默认为左对齐</p>

（3）水平分割线：

①标签：<hr/>

②宽度：<hr width="300" />,单位是像素

③大小<hr size="50" />

④颜色：<hr color="#ff00ff"/>

⑤对齐：<hr align="center" />默认居中

⑥提示：<hr title="鼠标指向时有提示" />

6.列表：

（1）结构组成：列表标签+列表项

（2）分类：无序号，有序号列表

①无序号：<ul>，例如：

<ul>

</ul>

②有序号：<ol>，例如：

<ol>

</ol>

7、超链接

（1）标签：<a>超链接</a>

链接属性：href="网址",比如<a href="fengjie.html">凤姐</a>

（2）修改链接的打开方式：

属性：target="_blank"，比如<a href="fengjie.html" target="_blank">凤姐</a>

（3）给链接添加提示：

属性:title="提示文字",比如：<a href="fengjie.html" title="别点">凤姐</a>

8.表格

（1）标签：table，tr表示航，td表示列，写法：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

（2）表格的宽度和高度

①宽度：属性width，值：一个写值，单位像素，比如width=“300”另一个是写百分比，比如width=“100%”,相对于网页窗口的比例

②高度：属性height，值：同width

③边框：border，默认值为0，写法：<table border="1">

④内边框：属性rules，值：cols（显示列），rows（显示行），none（行列都不显示，只保留外边框）

⑤边距：外边距cellspacing，内边距cellpadding

⑥表格内属性：

A.行：宽高，<tr width="100" height="100">

B.行：宽高，<tr width="100" height="100">

C.对齐方式：

水平对齐（行对齐）：<tr align="center">，值：left,right,center

垂直对齐（列对齐）：<tr valign="center">，值：top,bottom

D.合并单元格：

水平合并（行合并）：<td colspan="2">，与其右边的格合并

垂直合并（列合并）：<td rowspan="2">，与其下方的格合并

9.表单：

（1）引入：表单不是表格，它提供了一个界面，也是一个入口，让浏览者将数据传递给后台操作

（2）标签：<form></form>

（3）结构：一个表单包含多个子元素，也叫子控件，比如输入框，按钮等

（4）属性：

①name:表单名，不能与其他表单名相同，作用是标识不同的表单以保证唯一性

②method：

get:将数据通过url传递给后台程序，该url中会包含数据信息，不安全，且数据量小，一般不会超过2K

post:将数据放在form表单的数据体中传递给后台程序，数据信息都不会显示在url中，是安全的，且数据量大，一般不超过64K

③action：告诉此表单传递给后台哪个程序进行处理，比如asp、jsp和servlet等

（5）表单的控件：

①文本框和密码框：

A文本框：<input type="text" name="控件名" value="写在控件上的文字" size="10" maxlength="10" />

B密码框：<input type="password" name="控件名" value="写在控件上的文字" size="10" maxlength="10" />

②按钮：

A提交：<input type="submit" name="控件名" value="提交" />

B.重置：<input type="reset" name="控件名" />

原文链接：http://www.apkbus.com/blog-491882-60760.html