最近简单学习了一下html,看到这么一篇文章《HTML入门的简单学习》,总结下来,方便以后查阅。
HTML简介
1.1 HTML(Haper Text Markup language):超文本标记语言
超文本就是指页面内可以包含图片,链接,甚至音乐,程序等非文字元素。
1.2 开发工具:Adobe Dreamwearver cs5
1.3 HTML的基本结构
1.3.1:HTML文档标记:
1.3.2:HTML文档头标记:
1.3.3:标记内容可以存放:title,meta,style,link等
1.3.4:HTML文件标题标记:
1.3.5:页面的元信息:
1.3.5.1:显示字符集的设定
1.3.5.2:刷新
1.3.5.3:向搜索引擎提供查询关键字:
1.2.6:HTML文档主题标记:
1.4:HTML文档保存格式
包含两种,分别是html,htm;
1.5:HTML语法不区分大小写,建议尽量使用小写
使用小写,阅读性比较高。
1.6:文档注释
HTML字体实体
显示结果 | 描述 | 实体表述 |
---|---|---|
空格 | |
|
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
“ | 引号 | " |
‘ | 撇号 | &qpos; |
… | … | … |
HTML常用文档设置标记
3.1. 格式标记
3.2. 文本标记
hn标题标记,h1最大,h6最小
font字体设置标记
b粗体
i斜体
em表示强调斜体
strong表示强调显示粗体
small小型字体
u下划线
del删除线
案例的简单应用源码如下
图像标记
知识分析:路径分为相对路径和绝对路径
(1)相对路径,就是在同一个网站下,不同文件之间的的位置定位。引用的文件是相对当前网页的位置而言的,根据这个相对位置得出相对路径。
(2)绝对路径,指的是完整的路径。<img>
图像标记,格式支持jpg,png,gif,jpeg;
4.1. 使用方法,<img src="路径/文件名.图片格式" width="属性值" height="属性值" border="属性值" alt="属性值">
4.2. <img>
标记的属性
src属性,作用指定我们要加载的图片的路径和图片的名称以及图片格式
width属性,作用指定图片的宽度,单位px,em,cm,mm
height属性,作用指图片的高度,单位px,em,cm,mm
border属性,作用指定图标的边框宽度,单位px,em,cm,mm
alt属性:
作用1,当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性文字
作用2,如果图像没有下载或者加载失败,会用文字来代替图像显示
作用3,搜索引擎可以通过这个属性的文字来抓取图片
超链接的使用
5.1. 基本语法,<a href="" target="打开方式" name="页面锚点名称">链接文字或者图片</a>
5.2. 属性
5.2.1. href属性
链接的地址,链接的地址可以是一个网页,也可以是一个视频,图片,音乐等等
5.2.2. name属性
指定页面的锚点名称
5.2.3. target属性,作用:定义超链接的打开方式
_blank:在一个新的窗口中打开链接
_self(默认值):在当前窗口中打开链接
_parent:在父窗口中打开页面,框架中使用较多
_top:在顶层窗口中打开文件,框架中使用较多
案例运行如下
小说文本案例代码如下
table表格
6.1. table标记
基本格式:<table 属性1="属性值1" 属性2="属性值2"...>表格内容</table>
table标记的属性
width属性:表示表格的宽度,他的值可以是像素px也可以是父级元素的百分比%
height属性:表示表格的高度,他的值可以是像素px也可以是父级元素的百分比%
border属性:表示表格外边框的宽度
align属性:表格的显示位置(默认值是left,值有left居左显示,center居中显示,right居右显示)
cellpadding属性:单元格内容与单元格边框的显示距离,单位像素
cellspacing属性:单元格之间的间距,默认是2px,单位像素
frame属性:
rules属性:none(默认值)表示无分割线,all表示包括所有分割线
rows表示仅有行分割线,clos表示仅有列分割线,grouops表示仅有行组和列祖之间有分割线
6.2. <caption>
标记
什么时候使用:使用如果表格需要标题,那么就可以使用caption标记
如何正确使用:caption属性的插入位置,直接位于table属性之后,tr表格行之前
align属性:top标题放在表格的上部,botton标题放在表格的下部
left标题放在表格的左部,right标题放在表格的右部
6.3. tr标记
定义表格的一行,对于每一个表格行,都是有一对<tr></tr>
标记表示,每一行<tr>
标记内可以嵌套多个<td>
或者<th>
标记
可选属性:bgcolor属性设置背景颜色
align属性:设置垂直方向对齐方式
valign属性:设置水平方向对齐方式
6.4. td和th标记
bgcolor:设置单元格背景
align:设置单元格对齐方式
valign:设置单元格垂直对齐方式
width:设置单元格宽度
height:设置单元格高度
rowspan:设置单元格所占行数
colspan:设置单元格所占列数
6.5. thead(tr,th),tbody(tr,td),tfoot(tr,td);
案例源码如下所示
HTML框架(切忌,不可以放在body标签之间)
7.1. 什么事框架?框架是将浏览器划分为不同的部分,每一部分加载不同的页面,实现在同一浏览器窗口中加载多个页面的效果
7.2. <frameset>
划分框架标记
语法格式:<frameset>...<frameset>
属性:
cols:使用像素数和%分割左右窗口,”“表示剩余部分
如果使用`”“,
““代表框架平均分成2个
如果使用
““,
““,
““表示框架平均分成3个
rows:使用像素数和%分割上下窗口,
“*”表示剩余部分
frameborder:指定是否显示边框,0不显示,1显示
border:设置边框的大小,默认值5像素
7.3.
子窗口标记
`标记是一个单标记,该标记必须放在frameset中使用,在frameset中设置了几个窗口,就必须对应几个frame框架,而且还必须使用src属性指定一个网页
属性:src属性加载网页文件的URL地址
name:框架名称,是链接标记的target所要参数
noresize:表示不能调整框架大小,没有设置时就可以调整
scrolling:是否需要滚动条,值auto根据需要自动出现,yes有,no无
frameborder:是否需要边框,值1显示边框,值0不显示边框
7.4. frame和iframe的区别
- frame不能脱离frameset单独使用,iframe可以
- frame不能放在body中,iframe可以
- iframe是被嵌入在网页的元素,而frame用于组成一个网页的多个框架
|
|
|
|
|
|
|
|
表单设计
8.1. 表单标记<form>
表单元素放到这里
<form></form>
定义表单的开始位置和结束位置,表单提交时的内容就是
8.2. 文本框和密码<input>
基本语法:<input type="" name="" value="" size="" maxlength="">
属性介绍:
type属性:type属性有两个值,当type=”text”,表示文本输入框,当type=”password”,表示密码输入框
name属性:定义控件的名称
value属性:初始化值,打开浏览器时,文本框中的内容
size属性:设置控件的长度
manlength属性:输入框中最大允许输入的字符数
8.3. 提交,重置(恢复至初始值,不是清空,name可以验证效果),普通按钮
提交按钮:当<input type="submit">
时,为提交按钮
重置按钮:当<input type="reset">
时,为重置按钮
《以上两个按钮必须放在form表单下才可以体现功能》
普通按钮:当<input type="button">
时,为普通按钮
8.4. 单选框和复选框
单选按钮:当type=radio时,为单选按钮
复选框:当type=checkbox时,为复选框
注意:单选框和复选框都可以使用checked属性来设置默认选中项
8.5. 隐藏域
隐藏文本框:当type=hidden时,为隐藏文本框
8.6. 多行文本域
用法,使用textarea标记可以实现一个,能够输入多行文本的区域
语法格式<textarea name="name" rows="value" cols="value" value="value"><textarea>
rows属性和cols属性分别用来指定,显示的行数和列数,单位是字符个数
8.7. 菜单下拉列表域<select>标记
<option select="select默认选项">选项
</select>
案例代码
|
|