HTML的学习笔记

表格:

     作用:进行数据展示

     表格标签<table>属性:

1.  bgcolor背景颜色

2.  background  背景

3.  border     边框

4.  cellspacing  单元格与单元格之间的距离

5.  cellpadding  单元格与文字之间的距离

6.  Width     宽度

7.  Height     高度

8.  Align   对齐方式,值:left,center,right

9.  Bordercolor  边框颜色

tr表格的行

1.   bgcolor   背景颜色

2.   background   背景

3.   height          高度

4.   align            行的水平对齐方式:

              i.        left(默认),center,right

5.   valign           行的垂直对齐方式

              i.        top,bottom,middle(默认)

td单元格

1.   bgcolor 背景颜色

2.   background 背景

3.   width          宽度

4.   height          高度

5.   align            单元格的水平对齐方式

6.   valign           单元格的垂直对齐方式

7.   rowspan      合并行(垂直合并)

8.   colspan      合并列(水平合并)

 

th 表格的表头标签,具有td的所有属性,默认加粗居中

 

 

列表标签

      有序列表<ol>

1.   <ol>有序列表

a)   Type类型  属性值:A  a I  i  1

b)  start开始  从第几个(数字)开始,

2.   <li> 列表的列表项    

3.    例:<ol type="a"  start="4">

<li>好好学习</li>

<li>天天向上</li>

</ol>

      无序列表

1.  <ul> 无序列表

a)   Type的属性值:disc 点(默认) circle(圆形),square方形

2.  <li> 列表的列表项

3.  例:<ul type="circle">

<li>好好学习</li>

<li>天天向上</li>

  </ul>

  自定义列表

1.   <dt>  列表的标题

2.   <dd> 列表的列表项

3.   例:<dl>

<dt>要求</dt>

<dd>不怕苦不怕类</dd>

</dl>

图像标签

1.   Img    图像标签

a)   Src  图片的路径

b)  Width  图片的宽度

c)   Height    图片的高度

注意:宽度和高度的单位都是px,在html中px可以省略不写,width和height一般只写一个,另一个会等比例改变

d)  alt      文字提示,当图片路径不正确或图片无法正常显示时出现的文字提示

e)   title当鼠标放在图片上时的文字提示

超链接

1.   <a> 超链接  特点:文字有颜色,有下划线,当鼠标放上去会变成小手

a)   href         超链接的路径(相对路径,绝对路径)

                       i.        锚标记,在需要跳转到位置处,目的地:写上<a name=”锚点名字”></a>,开始位置<a  href=”#锚点名字”>内容部分</a>

1.   <a name="top1"></a>

2.   <a href="#top1">点击返回最顶层</a>

b)  target 打开方式  属性值_blank(在新窗口打开),_self(在当前窗口打开),_top(在顶层窗口打开),_parent(在父级窗口打开)

 

     form   表单
action 表单提交路径


input  输入 
type 类型:text  文本框(默认) 
   password   密码框
   radio 单选(必须有name属性,且name值必须相同,checked默认被选中)
   checkbox 复选框(必须有name属性,checked表示默认被选中)
   file 文件域
   submit 表单提交按钮(注意:必须在form标签中,且该form标签必须有action属性)
   reset 重置(注意:必须在form标签中)
   images   图像域(具有提交功能的图片,提交的路径就是action中的路径,作用和submit的作用完全相同)
   button   按钮
   hidden 隐藏域
select   下拉列表框

select 下拉列表框
option  下拉列表框的选项,默认被选中  selected

文本域 textarea
rows  显示多少行,调节高度
cols  显示多少列(一共可以填入的列数,调节宽度)

例:


action  表示提交的路径
method 表示提交的方式,属性值:get  post

<body>
<form action="../images/b.jpg" method="post">
用户名:<input type="text" value="123" name="userName" /><br/>
密码:<input type="password" name="userPass"  />
性别:<input type="radio" name="sex" checked value="男" />男<input type="radio" name="sex" checked  value="女" />女<br/>
<input type="submit" />
</form>
</body>

框架集

框架集  frameset不能和body同时存在

cols  列分裂

rows行分裂

例:

<html>
<head>
<meta charset="utf-8">
<title>框架分割</title>
</head>
<frameset rows="10%,*,10%">
<frame src=""></frame>
<frameset cols="10%,*,10%">
<frame src=""></frame>
<frame src=""></frame>
<frame src=""></frame>
</frameset>
<frame src=""></frame>
</frameset>
</html>


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值