菜鸟0基础快速学习web前端之html第二天

今天学习什么？

表格 ★★

用来做什么的？

table表格：用来展示数据 或者存储数据

table 、tr、td、（th）、表格、行、单元格构成 表头：th 标体：td 表格标题：caption

–> tr – > th

–> tr – > td

常用的属性

border 边框
width  宽度
height  高度
cellspacing  单元格与单元格之间的距离
cellpadding  内容与单元格之间的距离
align  表格的对齐方式  left 左对齐  center 居中  right 右对齐
bgcolor 背景颜色

表格的标题标签： caption 要放在table里面

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
合并单元格顺序：先上后下、先左后右

合并单元格 三步骤：

1.确定是跨行 rowspan 还是 跨列 colspan

2.找到目标元素，按照从上至下 从左至右的方式，在目标元素身上去设置属性

3.删除多余的单元格

如果是跨行：删除下面对应行数的对应的单元格
如果是跨列：删除本行后面的对应格式的单元格

表格的结构 ：

thead 头部

tbody 身体

tfoot 脚部
快写按键： eg： tr4>td4 +tab键

<table>

<thead>
<tr>
<th>
<tbody>
<tr>
<td>
<tfoot>
<tr>
<td>

列表
用来布局，非常整齐、自由。

无序列表 ★★★
ul里面只能嵌套li，只有在列表才有意义，li里面可以放任何元素
ul > li

有序列表 ★
排有顺序的列表
ol > li 有序列号的

自定义列表 ★★
进行描述和解释
dl > dt + dd
（地区） eg：

//围绕dt解释说明（并列关系——夫妻关系）
…

需要大家知道 列表的语法

**表单 **①表单域 ②表单 ③ 提示信息

input 标签 ★★★
《控件》单标签 ：

<input type ="属性值" value=" "/>

表单元素：与用户交互，然后收录用户信息
属性

type 定义表单的类型

name 给元素设置名字，用来分组，或者是后台的交互

value 给表单设置默认值

placeholder 设置提示文本，表单元素的提示框

type里面的值 表单的类型

text 文本输入框

password 密码框

button 普通按钮 要配合 value属性

submit 提交按钮 默认是提交

reset 重置按钮 默认是重置 都要配合 form表单域来实现

image 图片按钮 要配合 src的属性使用

file 文本域 用来做文件上传的

radio 单选框【单选按钮】 需要设置相同的name属性 eg：

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

checkbox 复选框 eg：

<input type=" checkboxs" name="sex">

设置同个name名

checked 设置 radio 和checkbox的默认选中状态

label ★★

作用： 用来提升用户体验，让用户点击文本内容就可以定位到指定的文本输入框

1.包起来

<label >用户名: <input type='text' /> </label>

2.利用 for id的方式

for写在 lable里面 id写在对应的input身上

<label for='username'>用户名</label>

<input type='text' id='username' />

textarea 文本域 与文本框的区别 ★★

textarea 可以输入多行文字

input 只能是一行文字

select 下拉框 ★

select 下拉列表
缺点：不能修改样式，浏览器显示不一样

— option

如果想要哪个默认被选择 需要在对应的option身上设置 selected =‘selected’ （相同可只写一个）

**form表单域标签：**收集用户信息，打包到服务器后台
eg：

<form action ="url地址" method="提交方式(get/post)" name="表单名"> </form >

action 提交路径 url 提交的地址

转译 URLEncording 编码 □ 【网址转换不能识别中文】

锚点定位

用来跳到当前 页面指定的位置

1.给目标元素设置 id属性

2.给a标签的href属性设置对应的 #id名

base标签，用来统一指定a标签的打开方式 写在 head里面

<base target='_blank'>

pre 预文本格式化

会原封不动的那里面的内容显示在页面上

特殊字符

空格 &nbsp

<

>