html学习笔记小结2

时间:2024.3.31

4.3<tr><th><td>标签下的常用属性

属性名称 属性值 说明 width height

align(水平方向) right left center

valign(垂直方向) top 数据靠上 middle 数据居中 buttom bgcolor

4.4 拆分与合并单元格 <td>里面的属性

属性名称 属性值 colspan 数字 rowspan 数字 先删掉不要的空格再合并需要的空格 4.5表格的标题 <table>

<caption>.... </caption> </table>

属性有:

属性名称 属性值 align top buttom 5.1背景图片设置

<body background="url">

5.2将图片插入网页中

格式:<img src="url">

功能:将图片插入网页中 单一标签

属性名称 属性值 src url width 像素/百分比 height 像素/百分比 alt 字符串 border 数字 5.3文字图像的排列

属性名称 属性值 align left right top middle buttom 间隙设置

数据靠下 说明

向两边扩展 向上下扩展 说明

图片的路径

图片的宽度(绝对和相对) 图片的高度(绝对和相对) 给图片做注解 图片边框 说明

图像靠左 文字靠右 图像靠右 文字靠左 文字靠上 文字居中 文字靠下

vspace 像素 垂直上下两端与物件的距离 hspace 像素 水平左右两端与物件的距离

5.4 图片超链接

<a href="url"><img src="url"></a>

注意边框问题

5.5地图索引

格式:<img src="url" usemap="#图像名称">

<map name="图片名称" id="图片名称">

<area shape="选取区块的形状" coords="坐标" href="url" alt="文字说明"> </map>

说明:

<map>声明整张图使用地图连接方式进行连接

<area>表示需要连接的某个区块

<shape>表示我们所选择的形状 如:rect矩形 circle圆形 poly 多边形 coords 表示地图的坐标位置

举例:

<img src="bg.jpg" border="0" usemap="#Map">

<map name="Map">

<area shape="rect" coords="136,36,202,102" href="" > <area shape="circle" coords="275,74,27" href="" > <area shape="poly" coords="389,284,426,266,459,"

href="" >

</map>

地图索引最好使用dreamweaver

5.6切片索引

使用firewook来进行,用表格进行定位

<table border="0" cellpadding="0" cellspacing="0">

<tr><td><a href=" src="1.jpg"></a></td><td><a href=" src="2.jpg"></a></td></tr> <tr><td><a href=" src="3.jpg"></a></td><td><a href="

src="4.jpg"></a></td></tr>

</table>

5.6为网站添加图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

6.1超链接的基本格式

格式:

scheme://host[:post]/path/filename

scheme指的是http,ftp,file,mailto, news等

host指的是IP地址或者计算机名

post指的是服务器端口一般为:8080

path指的是文件路径

filename指的是文件名

如:http://localhost/:8080/master/index.php

localhost可以写成计算机机器名或者IP地址

6.2超链接的种类

1.http

声明 <a href="/images/logo.html">网易</a>

2.file 连接本地的文件

声明 <a href=file:///e/images/pic.jpg>图片</a>

3.ftp

声明 <a href="ftp://192.168.4.21/">进入</a>

4.mailto <a href=mailto:bnbbs@163.com>E-MAIL</a>

6.3 相对链接和绝对链接

1.若是6.html和index.html文件在同一目录下

使用 index.html (index.html为连接文件)

<a href="index.html">index.html</a>

2.若index.html文件在6.html文件目录下的文件夹page里面 则使用 page/index.html

<a href="page/index.html">index.html</a>

3.如果index.html在 page文件下page2中

page/page2/index.html

2、3为往后查找文件路径

4.若6.html文件在page文件夹中 则查找index.html

需要向上翻一层查找

../index.html

<a href="../index.html">index.html</a>

5.若是6.html文件在page文件夹里面的page2文件夹里面 则查找连接index.html 使用

../../index.html

4、5为往前查找

5.若6.html在page文件夹中 而index.html在images文件夹中 则6.html要查找连接index.html文件需要

先出page文件夹再进images文件夹

../images/index.html

<a href="../images/index.html">index.html</a>

6.4 书签链接

先在需要跳转的文本地方创建书签点

再进行连接

<a>下的属性

属性名称 属性值

name 字符串

格式:

锚点:<a name="音乐">..</a>

连接点<a href="#音乐">..</a>

连接到别的网页的书签项目

基本格式:

锚点:<a name="音乐">...</a>

连接点:<a href="index.html#音乐">...</a>

先连接到需要连接的网页 再连接到书签

6.5基准参考点

基本格式:

<head>

<base href=".cn/">

</head>

作用:所有的html都会在前面加上这个域名.cn/ 防止跳到别的网站

注意:最后“/”必须要打 错误 :.cn

6.6超链接事件

link 颜色的设置

基本格式: <body link="颜色" alink="颜色" vlink="颜色">

link 超链接尚未选中的文字

alink 超链接选中但是为放开的颜色

vlink 超链接已被选中过的颜色

7.1表单是提供给用户输入,选取,勾选数据,以便提交给服务器数据库的工具 表单的功能结构:

主标记结构:<from>...</from>

属性值 值 说明

name 字符串 给这个表单起的名字

method get/post 表单的传输方式 post有利于信息的保护 不会显示在域名传输地址栏中 get会在域名传输地址中显示所有的信息 不利于信息安全 所以一般设置为post

action url 传输的目标 意为将表单中所有的信息传输到某一个地址去,若是没有指定传输地址 则会传给自己

7.2 文本栏、密码栏、

input是一个单标签 属于插入一个东西 而双标签相当于一个容器 包含一些东西 表单一般是要起名字 因为以后要使用javascript进行激活 使它做一些事件

文本栏:<input type="text" name="栏位名称" value="栏位设置默认值" size="栏位显示的宽度" maxlength="栏位输入数据的最大长度" >

姓名:<input type="text" name="usename" value="小张" size="30" maxlength="10">

密码栏: <input type="password" name="栏位名称" value="栏位设置默认值" size="栏位显示的宽度" maxlength="栏位输入数据的最大长度" >

密码:<input type="password" name="usepassword" size="30">

7.3复选框 单选框

复选框:<input type="checkbox" name="栏位名称" checked disable>

checked 表示已经选定不容修改 disable 表示已经选定不容修改

爱好:<input type="checkbox" name="love">体育<input type="checkbox"

name="love">音乐

单选框: <input type="radio" name="栏位名称" checked disable>

性别:<input type="radio" name="sex">男<input type="radio" name="sex">女

7.4窗体栏和区块

窗体栏就是下拉菜单

<select name="栏位名称">

<option value="栏位设置值">栏位设置值

<option value="栏位设置值">栏位设置值

<option value="栏位设置值">栏位设置值

</select>

举例:地址:<select name="address">

<option value="上海">上海

<option value="南京">南京

<option value="盐城">盐城

</select>

//分组<optgroup label="分组名称"><option>...<option></optgroup> 举例:

address:<select name="address">

<optgroup lable="上海">

<option value="普陀区">普陀区

<option value="宝山区">宝山区

</optgroup>

<optgroup lable="南京">

<option value="下关">下关

<option value="浦口">浦口

</optgroup>

<optgroup lable="盐城">

<option value="亭湖">亭湖

<option value="盐都">盐都

</optgroup>

</select>

7.5文字区块的设置

<textarea cols="设置长度" rows="设置宽度">

.....

</textarea>

请留下您的建议和意见:

<textarea name="content" cols="200" rows="50">

</textarea>

7.6按钮和图像按钮

提交:<input type="submit" value="提交">

重置<input type="reset" value="重置">

按钮图像

<button type="submit" name="提交">

<img src="url">

</button>

7.7 上传文件

<input type="file" name="file">

7.8 外边框和标题

外边框:<fielset>...</fielset>

标题:<legend>...</legend>

<from name="reg" method="post" action="http://baidu.com"> <fielset>

<legend>注册表</legend>

.....

</fielset>

</from>

总结实例:

<from>

<head>

<title>注册表</title>

</head>

<body>

<from name="reg" method="post" action="" > <fieldset >

<legend>注册表</legend>

姓名:<input type="text" name="usename" maxlength="10"> <br>

密码:<input type="password" name="password">

<br>

QQ:<input type="text" name="qq">

<br>

联系电话:<input type="text" name="telephone">

<br>

爱好:<input type="checkbox" name="love" value="体育">体育

<input type="checkbox" name="love" value="计算机">计算机 <input type="checkbox" name="love" value="音乐">音乐 <input type="checkbox" name="love" value="读书">读书 <br>

性别:<input type="radio" name="sex" value="男">男

<input type="radio" name="sex" value="女">女

<br>

地址:<select name="address">

<optgroup lable="怀化">

<option value="鹤城区">鹤城区

<option value="溆浦">溆浦

</optgroup>

<optgroup lable="衡阳">

<option value="石鼓区">石鼓区 <option value="雁峰区">雁峰区 </optgroup>

<optgroup lable="长沙">

<option value="雨花区">雨花区 <option value="长沙县">长沙县 </optgroup>

</select>

<br>

<input type="file" name="file"> 请留下你的意见:

<textarea cols="50" rows="20"> </textarea>

<input type="submit" value="提交"> <input type="reset" value="重置"> </fieldset>

</from>

</body>

</from>

更多相关推荐:
html学习总结

1HTML标签由开始标签和结束标签组成空的HTML元素没有结束标签比如ltbrgt没有内容的HTML内容被称为空元素空元素是在开始标签中关闭的ltbrgt就是没有关闭标签的空元素ltbrgt标签定义换行在XHT...

html基础知识学习总结

目录HTML基本知识总结一HTML元素HTML文档是由HTML元素构成的文本文件HTML元素是通过使用HTML标签进行定义的HTML标签1HTML标签是用来标记HTML元素的2HTML标签被lt和gt符号包围3...

html学习记录总结

3月20日lthtmlgtlthtmlgt文件开始标签ltheadgtltheadgt文件头部标签lttitlegtlttitlegt文件标题标签可设置关键字页面描述编辑工具等重要属性ltbodygtltbod...

html学习总结2

目录一块结构1二内敛元素1三如何让两个块结构元素显示到一行2四ulli无序列表标签2五背景图片3六定义样式的三种方式5七文字在容器内垂直方向上居中5八容器在另一个容器内水平方向上水平居中5一块结构margin0...

学习html总结

Html学习心得通过几天学习html是我拥有了对网页相当敏感的眼睛看到做的精美的网站就情不自禁的查看源代码思考自己应该怎么做即将是暑假了所以这几天的进程也不算太快这几天先后学习了html入门cssjavascr...

html学习总结

网页第一次课一什么是网页1定义构成网站的基本元素2格式分为静态和动态网页3动态网页的扩展名为jsp或aspx或asp4静态网页的扩展名为html或htm二基本格式lthtmlgtltheadgt标题lthead...

css+html笔记总结

CSSJavaScript学习笔记CSS学习笔记一设置CSS样式的三种方法1元素内联直接在空间内写2页面嵌入在head中加入ltstyletypequottextcssquotgtinputbordercolo...

常用html标记总结

一HTML的全局架构标签lthtmlgtltheadgtlttitlegt我是标题lttitlegtltheadgtltbodygt我是正文ltbodygtlthtmlgt二body标签中的相关属性1bgcol...

html5学习笔记

一html5简介1html的组合HTML5HTMLCSSJSAPIsHtml5的发展其实是htmlcssjsapi的发展HTML5草案的前身名为WebApplications10是在20xx年由WHATWG提出...

html5学习笔记

一html5页面结构123456789ltDOCTYPEhtmlPUBLICquotW3CDTDXHTML10TransitionalENquotquotTRxhtml1DTDxhtml1transitiona...

html5学习资料

早在几个星期前Adobe就发布了DreamweaverCS5HTML5Pack的预览版下载众所周知HTML5在互联网领域掀起了一场大论战并让Adobe的日子很难熬HTML5致力于为前端开发提供全面的标记语言以下...

html5mobile的学习

jQueryMobile安装向您的网页添加jQueryMobile有多个办法可供您在网站上开始使用jQueryMobile您可以从CDN引用jQueryMobile推荐从jQuerymobilecom下载jQu...

html学习总结(10篇)