HTML的学习笔记

来源：互联网发布：前端工程师知乎编辑：程序博客网时间：2024/06/07 04:13

表格:

作用：进行数据展示

表格标签<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">

</ol>

无序列表

1. <ul> 无序列表

a) Type的属性值：disc 点（默认） circle（圆形），square方形

2. <li> 列表的列表项

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

</ul>

自定义列表

1. <dt> 列表的标题

2. <dd> 列表的列表项

3. 例：<dl>

<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行分裂

例：

阅读全文

0 0