HTML+Day2 HTML+Day2 表格（标签:tr td th caption thead tbody tfoot

HTML+Day2 表格（标签:tr td th caption thead tbody tfoot ) ,属性:width hight align cellspacing =0 cellpadding边框与文字的距离。rowspan colspan ）

列表:(无序列表 ul li ，有序列表 ol. li，自定义列表 dl dt dd）

表单（input 标签）

	（属性 type( radio,checkbox,password,text,button,image,submit reset file),name, checked,）

select请选择省份 form表单

Day2 表格列表表单注册页面。三个表

<一>表格

1.表格：用来展示数据，更规范。不要用来布局。 tr 行 tr里面只能是td td里面可以包含其他标签。 td单元格

合并单元格，用来展示数据，

行，列

姓名	年龄	性别
小明	18	男
张三	18	男

2.表格属性，

边框是1 width

Height

Align 对齐方式 left. Right center

Cellspacing 单元格与单元格之间的距离。

cellpadding 文字与边框的距离。

表头单元格标签 th 第一行或者第一列都会加粗显示。表头单元格还可以居中文字。

表头单元格， caption 表格的标题

2.表格合并单元格 rowspan colspan

1.先确定是跨行，还是夸列。 2.先上后下先左后右原则找到目标单元格，然后写上合并方式， 3.删除单元格。

<table border="1" cellspacing = "0" width = "700" align="center">
    <caption><h3>刘德华的简历</h3></caption>
    <tr>
        <td>刘德华</td>
        <td>男</td>
        <td>18</td>
        <td rowspan="2">照片</td>
    </tr>
    <tr>
        <td>身高180</td>
        <td>汉族</td>
        <td>已婚</td>
    </tr>
    <tr>
        <td>个人作品</td>
        <td colspan="3">个人作品</td>
    </tr>
    <tr>
        <td>个人简历</td>
        <td colspan="3">个人简历</td>
    </tr>
</table>

3.表格 thead tbody tfoot 头身体和脚表格结构更清晰。thead 里面必须有tr标签，

<二>列表

列表：用来布局，页面布局整齐。列表是一个容器，样式一致的文字或图标的一种形式叫列表。组合自由度更高。

无序列表，

自定义列表。

没有顺序，无序。

无序列表

你喜欢的水果有哪些？

苹果
苹果
苹果
苹果
苹果

概念是一样的。

可以放其他的标签。无序列表的这种样式，后面会用css来去掉，使用自己定义的。

表格与列表的不同？列表更灵活，可以一行有不同的布局。

有序列表，跟无序列表用法一致，但是使用中，比无序列表少。

自定义列表： dl dt dd dt dd 是并列关系。一般页面的帮助中心，自定义列表。

中国: 香港; 台湾

Ul ol

<三>表单

表单：表单用来收集用户信息。包括表单元素+提示文本+表单域组成。

1.表单标签：单标签 input :type 决定标签的类型。输入框密码: 密码框

用户名:

2.表单属性： type = value = name = 根据name 查找对应的表单。

性别: 男女单选相同的名字，同一组。

爱好:多选按钮睡觉1 睡觉2 睡觉3 睡觉4 睡觉5

Checked 默认选中。

label textarea select

按钮组：button submit reset. Image

button:普通按钮需要写value的值。 submit:value值可以修改值，默认不写也可以。 reset重置默认也是有value值的。 Image 里面必须包含src属性。 file 文件组，上传图片，头像等等。

2.表单 label label标签主要用来：当鼠标点击label文字的时候，光标会定位到指定的表单里面。 label标签的第一种用法，就是点击文字，input也可以得到焦点。

1.第一种用法，直接包起来，label把input包起来使用。点击label input可以获得焦点。密码:

2.通过for关联id来控制的性别: 男女

3.表单文本域 textare文本域双标签。

4.表单选择表单标签我们使用的很少，有的人用的是

模拟出来的。 select必须有一个option. --请选择省份-- 默认选中。 --请选择省份-- 选项1 选项2 选项3 选项4

5.form表单域收集信息提交给服务器。

action:手机的数据提交到一个地址，login.php. 服务器。

method :get post

Get提交之后会在地址栏能看到数据。 http://127.0.0.1:5500/demo1.html?username=%E8%AF%B7%E8%BE%93%E5%85%A5%E7%94%A8dada%E6%88%B7%E5%90%8D&nickname=%E8%AF%B7%E8%BE%93%E5%85%A5dasda&pwd=&sex=on&hobby=on

多个表单域 name 定义name

6.注意：⚠️ 元素属性值使用双引号语法元素属性值可以写上的都写上。js用单引号，html属性用双引号。

小说排行榜
排名	关键词	趋势	今日搜索	最近七日	相关链接
1	鬼吹灯		345	123	贴吧图片百科
1	鬼吹灯		345	123	贴吧图片百科

HTML+Day2

无序列表

小说排行榜