HTML入门 学习笔记2
meta标签
作用：
- 给搜索引擎搜索
- 告知浏览器使用什么编码。告知浏览器使用什么编码。
- 例如：
<meta http-equiv="Content-Type" content="text/html";charset="utf-8" />用于字符编码
<meta name="keywords" content="meta标签的使用" />用于关键字
<meta name="description" content="使用meta标签" />用于描述
插入图片
标记：<img />
属性：
- src 图片路径
- width 宽度
- height 高度
- alt 图片说明：1.当图片无法显示的时候，将图片的说明性文字显示到图片的位置上。2.给搜索引擎来用，目前搜索引擎确定图片还是通过alt属性。
- title：当鼠标移动到图片上时，显示图片的说明文字。
使用：<img src="图片路径" width="宽度" height="高度" alt="图片的说明" />
- 图片的格式为jpg、gif、png格式
热点
在一张图上点击不同区域，跳转到不同的页面。选中图片，在属性栏上就会出现热点的按钮，点击热点按钮画出热点形状，选中热点形状做出超链接。
标记：<map></map>
属性：
- id
- name
使用例子：
<img src="图片路径" width="宽度" height="高度" alt="图片的说明" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="14,36,56,86" href="跳转网页.html" />
<area shape="circle" coords="14,36,56,86" href="跳转网页.html" />
</map>
建议使用Dw工具，在设计模式下操作。
插入flash
标记：<Object>
- flash的播放格式：swf
使用工具插入flash：
在Dw中点击媒体图标–SWF；
在设计栏下端设置属性；
- 例如:透明等…
pre标签
pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
- 注意：pre标签不用来做拼版。
作用：pre标签主要用来做调试，用来表示计算机的源代码。
实体
在网页中用来显示字符。
<：指的是"<"，即less than
>：指的是">"，即greater than
：指的是空格
"：指的是" “ "
表格
- 默认情况下，网页的布局是流布局（类似于排队的方式），不能够随意摆放位置。
作用：用来做页面布局。
组成：行、列、（列标题）。
与表格相关的标记
表标记：<table>…</table>
行标记：<tr>…</tr>
单元格标记：<td>…</td>
列标记：<th>…</th>
table属性
- border边框 数值取值
- width宽度 数值取值
- height高度 数值取值
- bordercolor边框颜色 颜色取值 例如“#FF0000”代表红色
单元格的相关属性
单元格中数据的对齐方式
对齐分为水平对齐和垂直对齐。
默认是水平居左，垂直居中。
水平对齐：aligh =left、center、right
垂直对齐：valigh =top、middle、bottom
单元格间距
单元格与单元格之间的距离。
cellspacing = 数值
- 默认=2px
单元格填充
内容与单元格距离。
cellpadding = 数值
- 默认=1px
合并单元格
合并单元格分为合并行和和并列。
合并行：把不同行合并起来。
rowspan=数值
- 在td中设置
合并列：把不同列合并起来。
colspan=数值
- 在th中设置
例子：
<table width="500" border="1" bordercolor="#0000FF" aligh="center" height="400">
<tr>
<th colspan="3">学生证</th>
</tr>
<tr>
<td>姓名</td>
<td> </td>
<td rowspan="3">照片</td>
</tr>
<tr>
<td>性别</td>
<td> </td>
</tr>
<tr>
<td>年龄</td>
<td> </td>
</tr>
</table>
效果如下：
其中的关系如下图所示：
表单
用途：
- 用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。
- 收集购买物品所需的信息，例如填写姓名、邮政地址和付款方式等。
标记：<form></form>
表单域
表单域是表单的区域，用来控制表单提交时候的数据访问。
表单元素
所有的表单元素都要放到表单中。
文本框（单行文本）
标记：<input />
属性：
type类别="text"：该元素是文本框- name名称：文本框的名称
- size尺寸：设置文本框的宽度大小（单位：字符）；数值取值，单位是字符
- maxlength最大长度：设置文本框中能够输入的字符串最大长度
密码框
标记：<input />
属性：
type类别="password"：该元素是密码框- name名称：密码框的名称
- size尺寸：设置密码框的宽度大小（单位：字符）；数值取值，单位是字符
- maxlength最大长度：设置密码框中能够输入的字符串最大长度
单选框
标记：<input />
属性：
type类别="radio"：该元素是单选框- name名称：单选框的名称
- value值：选中该元素的值
- checked 默认选中：
checked="checked"
注意：
- 同一组的name应一致
- 必须给无法输入的表单元素赋值，即给value赋值
复选框
标记：<input />
属性：
type类别="checkbox"：该元素是复选框- name名称：复选框的名称
- value值：选中该元素的值
- checked 默认选中：
checked="checked"
注意：
- 同一组的name应一致
- 必须给无法输入的表单元素赋值，即给value赋值
下拉菜单
标记：
<select>
<option>选项1</option>
<option>选项2</option>
</select>
- 下拉菜单的标签是
<select>，下拉菜单项的标签是<option>
select的属性：
- name名称：下拉菜单的名称
option的属性：
- value值：选择该元素的值
- selected默认选择：
selected="selected"
下拉列表
标记：
<select>
<option>选项1</option>
<option>选项2</option>
</select>
- 下拉列表的标签是
<select>，下拉列表项的标签是<option>
select的属性：
- size显示选项的个数 数值取值
multiple可多选="multiple"：设置按住ctrl可多选- name名称：下拉列表的名称
option的属性：
- value值：选择该元素的值
- selected默认选择：
selected="selected"
文本域（多行文本）
标记：<textarea></textarea>
属性：
- name名称：文本域的名称
- cols容纳列数：相当于设置宽度，数值取值
- rows容纳行数：相当于设置高度，数值取值
提交按钮
作用：用来向服务器提交数据。
标记：<input />
属性：
type类别="submit"：该元素是提交按钮- name名称：提交按钮的名称
- value值：按钮显示的内容
重置按钮
作用：用来清空填写的数据，将表单恢复到初始值。
标记：<input />
属性：
type类别="reset"：该元素是重置按钮- name名称：重置按钮的名称
- value值：重置显示的内容
普通按钮
提交按钮和重置按钮都是带有功能的按钮，在很多情况下，我们点击按钮的时候不是需要提交和重置，而是执行我们自己的功能，这时候就需要一个不带有功能的按钮。
标记：<input />
属性：
type类别="button"：该元素是普通按钮- name名称：普通按钮的名称
- value值：按钮显示的内容
表单属性
表单中包含action属性和method属性。
action属性
作用：指定处理提交的表单的脚本的位置。
使用：action="数据提交的位置"
- action=""表示提交到本页面
method属性
作用：指定向服务器发送数据的方法。
使用：method="get | post "
数据提交的方法有两种：get和post
get和post的区别：
- 从外观上，get方法在地址栏上带有?问号，post方法没有?问号；
- 从提交的数据量上：get方法只能提交少量数据，一般低于
2K；post方法则能够提交大量数据，PHP默认可以提交8M的数据，甚至更多； - 从安全性上，get方法不安全，post方法较为安全；
- 从提交原理上，get方法提交的数据之间都是独立的，post方法提交的数据作为一个整体一起提交；
- 在灵活性上，get方法很灵活，只要页面跳转就可以传递数据；post方法不灵活，必须要有表单的参与。