HTML小白入坑日记~qwq

Web&HTML小白入坑の日记！（第四天）

（本博客参考百度百科以及其他网络，多处可能出现相似处！本人只为业余学习用途！若侵犯版权请联系本人删除！本人邮箱：kingnas@yeah.net，本人IT小白！最近发现自己有很多误区和盲区若有IT大佬可否多指点一下qwq~望见谅！）

小白入坑日记目录

列表

列表主要分为三种!分别是无序列表;有序列表;自定列表.

无序列表

无序列表的各个列表项之间没有顺序级别之分 是并列的

其基本语法格式如下:

<!-- 有序列表 -->
<ul>
  <li>形成无序列表</li>
</ul>

比如 新闻就是没有顺序的 不用排队 先到先得 后发布 先显示

1.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
2.<li>与</li>之间相当于一个容器 可以容纳所有元素
3.无序列表会带有自己样式属性 有时候可以放下那个样式 一会让CSS来修饰

有序列表ol

比如我们常见的奥运会的奖牌排名等
有序列表即为有排列顺序的列表 其各个列表项按照一定的顺序排列定义 有序列表的基本语法格式如下:

<!--有序列表-->
<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></table> <tr></tr> <td></td> 他们是创建表格的基本标签,缺一不可,下面我们来一一进行具体解释

1. table 用于定义一个表格
2. tr用于定义表格中的一行 必须嵌套在 table标签中 在table中包含几对 tr 就有几行表格
3. td /td: 用于定义表格中的单元格 必须嵌套在 标签中 , 一对中包含几对 就表示该行中有多少列(或多少个单元格)

注意:
<tr></tr> 中只能嵌套 <td></td>
<td></td> 标签 他就像一个容器 可以容纳所有的元素

属性	含义	常用属性
border	设置表格边框	像素值(默认为0)
cellspacing	设置单元格与单元格边框之间的空白间距	像素值(默认为2)
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值(默认为1)
width	设置单元格宽度	像素值
height	设置单元格高度	像素值
align	设置表格在网页中的水平对其方式	left;center;right

表头标签

表头一般位于表格的第一行或第一列 其中文本加粗居中 设置表头非常简单 只需要用表头标签<th></th>替代相应的单元格标签<td></td>即可

表格结构

在使用表格进行布局时,可以将表格划分为头部 主题 和页脚(页脚因为有兼容性问题,我们不在赘述),具体 表示如下
<thead></thead>: 用于定义表格的头部 必须位于<table></table>标签中,一般包含网页的 Logo
和导航等头部信息 <tbody></tbody>: 用于定义表格的主体 位于<table></table>标签中
一般包含网页中除头部和底部之外的其他内容

表格标题

表格的标题: 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>

总结表格:

1. 表格提供了HTML中定义表格式数据的方法
2. 表格中由行中的单元格组成
3. 表格中没有元素 列的个数取决于行的单元格个数

表单标签

现实中的表单 类似我们去银行办理信用卡填写的单子
目的是为了收集用户信息
在HTML中 一个完整的表单通常有表单控件(也称为表单元素) 提示信息和表单域3个部分构成
表单控件: 包含了具体的表单功能项,如单行文本输入框 密码输入框 复选框 提交按钮 重置按钮等
提示信息: 一个表单中通常还需要包含一些文字说明 提示用户进行填写
表单域: 相当于一个容器 用来容纳所有表单控件赫尔提示信息,可以通过他定义处理表单数据所用程序的URL地址,以及数据提交到服务器的方法,如果不定义表单域,表单中的数据就无法传送到后台服务器

input控件

在上面的语法中, <input /> 标签为单标签 type 属性为其最基本的属性 其取值有多重 用于指定不同控件类型 除了 type 属性之外 <input /> 标签还可以定义很多其他属性 其常用属性如下表所示 :

	属性	属性值	描述
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	由用户自定义	占位符,表单缺失时替代内容

1. 单选框 如果是一组 我们通过相同的 name 值 来实现
2. 复选框 可以同时选择多个
3. 默认选中项 只需要在属性中添加 checked=“checked” 默认选中性别女
4. input 按钮组type=“button” 按钮中的字应该用value="…"
5. 最多字符数和文本值 maxlength = " 6 " 最多字符数为 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" />

lable标签

label 标签为 input 元素定义标注 (标签)
作用: 用于绑定一个表单元素 当点击 label 标签的时候 被绑定的表单元素就会获得输入焦点,for可以跳转到相应的id获得输入焦点.
那么 我们如何绑定元素呢?
for 属性规定 label 与哪个表单元素绑定

1. 用label直接进行包裹input标签
2. 如果label里面有多个表单 想定位到某个地方 可以通过for id 的格式来进行

<label> 
	输入账号: <input type="text" /> 
</label>
<label for="two"> 
	输入账号: <input type="text" /> 
	<input type="text" id="two"/> 
</label>

textarea控件

如果需要输入大量的信息,例如博客评论区, 就需要用到<textarea></textarea>标签 通过textarea控件可以轻松的创建多行文本输入框 其基本语法格式如下 :

<textarea cols="每行中的字符数" rows="显示的行数">
	文本内容
</textarea>

select控件

使用 select 控件定义下拉菜单的基本语法格式如下 :

<select>
	<option> 选项1 </option>
	<option> 选项2 </option>
	<option> 选项3 </option>
	...
</select>

注意 :

1. <select></select>中至少应包含一对<option></option>
2. 在option中定义 selected=“selected” 时, 当前项即为默认选中项

form表单域

在 HTML 中 form标签被用于定义表单域 即创建一个表单 以实现用户信息的收集和传递 form 中的所有内容都会被提交给服务器 创建表单的基本语法格式如下 :

<form action="url地址" method="提交方式" name="菜单名称">
 各种表单控件
</form>

常用属性 :

1. Action 在表单收集到信息后, 需要将信息传递给服务器进行处理 action 属性用于指定接收并处理表单数据的服务器程序的 url 地址
2. method 用于设置表单数据的提交方式 其取值为 GET或 POST 或 dialog
3. name 用于指定表单的名称 以区分同一个页面中的多个表单
   注意 : 每个表单都应该有自己的表单域

小白入坑日记目录