(本博客参考百度百科以及其他网络,多处可能出现相似处!本人只为业余学习用途!若侵犯版权请联系本人删除!本人邮箱:[email protected],本人IT小白!最近发现自己有很多误区和盲区若有IT大佬可否多指点一下qwq~望见谅!)
小白入坑日记目录
列表主要分为三种!分别是无序列表;有序列表;自定列表.
无序列表的各个列表项之间没有顺序级别之分 是并列的
其基本语法格式如下:
<ul>
<li>形成无序列表li>
ul>
比如 新闻就是没有顺序的 不用排队 先到先得 后发布 先显示
1.
中只能嵌套
,直接在
标签中输入其他标签或者文字的做法是不被允许的
2.之间相当于一个容器 可以容纳所有元素
与
3.无序列表会带有自己样式属性 有时候可以放下那个样式 一会让CSS来修饰
比如我们常见的奥运会的奖牌排名等
有序列表即为有排列顺序的列表 其各个列表项按照一定的顺序排列定义 有序列表的基本语法格式如下:
<ol>
<li>形成有序列表li>
ol>
自定义列表常用语对术语或名词进行解释和描述 定义列表的列表项钱没有任何项目符号 基本语法如下:
<dl>
<dt>形成自定列表(主语/名词)dt>
<dd>形成自定列表(解释/说明)dd>
dl>
存在即合理 表格现在还是比较常用的一种标签, 但不是用来布局的 常见处理, 显示表格式数据
在HTML网页中 要想创建表格 就需要使用表格相关的标签 创建表格的基本语法如下:
<table>
<tr>
<th>单元格内的文字th>
<th>单元格内的文字th>
tr>
<tr>
<td>单元格内的文字td>
<td>单元格内的文字td>
tr>
table>
在上面的语法中包含三队HTML 标签 分别为
他们是创建表格的基本标签,缺一不可,下面我们来一一进行具体解释
- table 用于定义一个表格
- tr用于定义表格中的一行 必须嵌套在 table标签中 在table中包含几对 tr 就有几行表格
- td /td: 用于定义表格中的单元格 必须嵌套在 标签中 , 一对中包含几对 就表示该行中有多少列(或多少个单元格)
注意:
中只能嵌套
标签 他就像一个容器 可以容纳所有的元素
属性 | 含义 | 常用属性 |
---|---|---|
border | 设置表格边框 | 像素值(默认为0) |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为2) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1) |
width | 设置单元格宽度 | 像素值 |
height | 设置单元格高度 | 像素值 |
align | 设置表格在网页中的水平对其方式 | left;center;right |
表头一般位于表格的第一行或第一列 其中文本加粗居中 设置表头非常简单 只需要用表头标签
替代相应的单元格标签
即可
在使用表格进行布局时,可以将表格划分为头部 主题 和页脚(页脚因为有兼容性问题,我们不在赘述),具体 表示如下
: 用于定义表格的头部 必须位于
标签中,一般包含网页的 Logo
和导航等头部信息: 用于定义表格的主体 位于
标签中
一般包含网页中除头部和底部之外的其他内容
表格的标题: caption
定义和用法: caption 元素定义表格标题
<table>
<caption> 我是表格标题 caption>
<tr>
<th>单元格内的文字th>
<th>单元格内的文字th>
tr>
<tr>
<td>单元格内的文字td>
<td>单元格内的文字td>
tr>
table>
caption 标签必须紧随 table 标签之后 您只能对每个表格定义一个标题 通常这个标题会被居中于表格之上
跨行合并: rowspan 跨列合并 : colspan
合并单元格的思想:
将多个内容合并的时候, 就会有多余的东西, 把它删除 例如 把3个 td 合并成一个 那就多余了2个 需要删除
公式 : 删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左 例如:
<table>
<caption> 我是表格标题 caption>
<tr>
<th rowspan="2">单元格内的文字th>
<th>单元格内的文字th>
<th colspan="2">单元格内的文字th>
tr>
<tr>
<td>单元格内的文字td>
<td>单元格内的文字td>
<td>单元格内的文字td>
tr> <tr>
<td>单元格内的文字td>
<td>单元格内的文字td>
<td>单元格内的文字td>
<td>单元格内的文字td>
tr>
table>
总结表格:
- 表格提供了HTML中定义表格式数据的方法
- 表格中由行中的单元格组成
- 表格中没有元素 列的个数取决于行的单元格个数
现实中的表单 类似我们去银行办理信用卡填写的单子
目的是为了收集用户信息
在HTML中 一个完整的表单通常有表单控件(也称为表单元素) 提示信息和表单域3个部分构成
表单控件: 包含了具体的表单功能项,如单行文本输入框 密码输入框 复选框 提交按钮 重置按钮等
提示信息: 一个表单中通常还需要包含一些文字说明 提示用户进行填写
表单域: 相当于一个容器 用来容纳所有表单控件赫尔提示信息,可以通过他定义处理表单数据所用程序的URL地址,以及数据提交到服务器的方法,如果不定义表单域,表单中的数据就无法传送到后台服务器
在上面的语法中, 标签为单标签 type 属性为其最基本的属性 其取值有多重 用于指定不同控件类型 除了 type 属性之外
标签还可以定义很多其他属性 其常用属性如下表所示 :
属性 | 属性值 | 描述 | |
---|---|---|---|
1 | type | text | 单行文本输入框 |
2 | type | password | 密码输入框 |
3 | type | button | 搜索框 |
4 | type | radio | 单选按钮 |
5 | type | checkbox | 复选框 |
6 | type | button | 普通按钮 |
7 | type | submit | 提交按钮 |
8 | type | reset | 重置按钮 |
9 | type | image | 图像形式提交按钮 |
10 | type | file | 文件域 |
全局 | name | 由用户自定义 | 控件命名 |
全局 | value | 由用户自定义 | input默认文本值 |
全局 | size | 正整数 | input控件在页面中的显示宽度 |
全局 | checked | checked | 定义被默认选中的项 |
全局 | maxlength | 正整数 | 控件最大允许输入的最多字符位数 |
新全局 | placeholder | 由用户自定义 | 占位符,表单缺失时替代内容 |
- 单选框 如果是一组 我们通过相同的 name 值 来实现
- 复选框 可以同时选择多个
- 默认选中项 只需要在属性中添加 checked=“checked” 默认选中性别女
- input 按钮组type=“button” 按钮中的字应该用value="…"
- 最多字符数和文本值 maxlength = " 6 " 最多字符数为 6
- value = “789” 在input框中的显示为789
举例:
ID:<input type="text" name="usr" value="9527" />
用户:<input type="text" name="usr" placeholder="请输入用户" />
密码:<input type="password" name="usr" maxlength="6" />
性别:<input type="radio" name="sex" />男
<input type="radio" name="sex" checked="checked" />女
爱好:<input type="checkbox" name="hobby" />唱
<input type="checkbox" name="hobby" />跳
<input type="checkbox" name="hobby" />rap
<input type="file" />
<input type="button" value="安排" />
<input type="submit" />
<input type="reset" />
label 标签为 input 元素定义标注 (标签)
作用: 用于绑定一个表单元素 当点击 label 标签的时候 被绑定的表单元素就会获得输入焦点,for可以跳转到相应的id获得输入焦点.
那么 我们如何绑定元素呢?
for 属性规定 label 与哪个表单元素绑定
- 用label直接进行包裹input标签
- 如果label里面有多个表单 想定位到某个地方 可以通过for id 的格式来进行
<label>
输入账号: <input type="text" />
label>
<label for="two">
输入账号: <input type="text" />
<input type="text" id="two"/>
label>
如果需要输入大量的信息,例如博客评论区, 就需要用到标签 通过textarea控件可以轻松的创建多行文本输入框 其基本语法格式如下 :
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
textarea>
使用 select 控件定义下拉菜单的基本语法格式如下 :
<select>
<option> 选项1 option>
<option> 选项2 option>
<option> 选项3 option>
...
select>
注意 :
中至少应包含一对
- 在option中定义 selected=“selected” 时, 当前项即为默认选中项
在 HTML 中 form标签被用于定义表单域 即创建一个表单 以实现用户信息的收集和传递 form 中的所有内容都会被提交给服务器 创建表单的基本语法格式如下 :
<form action="url地址" method="提交方式" name="菜单名称">
各种表单控件
form>
常用属性 :
Action
在表单收集到信息后, 需要将信息传递给服务器进行处理action
属性用于指定接收并处理表单数据的服务器程序的url
地址method
用于设置表单数据的提交方式 其取值为GET
或POST
或dialog
name
用于指定表单的名称 以区分同一个页面中的多个表单
注意 : 每个表单都应该有自己的表单域
小白入坑日记目录