2021-11-07

HTML入门学习笔记 第二周

列表标签
容器里面装载着文字或图表的一种形式，叫列表。
列表最大的特点就是 整齐 、整洁、 有序

无序列表 ul （重点）
无序列表标签： < ul>< /ul>
属性：type :三个值，分别为：
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：

• 注意：
  < ul></ ul>中只能嵌套

• ，直接在 标签中输入其他标签或者文字的做法是不被允许的。
  < li>与之间相当于一个容器，可以容纳所有元素。
  无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
  有序列表 ol
  有序列表标签：< ol>
  属性：type：

  1、A、a、I、i（数字、字母、罗马数字）
  列表项：

• </ li>

• 定义列表dl
  \dl>
  名词1
  < dd>名词1解释1
  < dd>名词1解释2
  …
  < dt>名词2
  名词2解释1
  名词2解释2
  …
  </ dl>
  dl>

  名词1
  名词1解释1
  名词1解释2
  … 名词2
  名词2解释1
  名词2解释2
  …
  图片标签
  独立标签
  属性:

  src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）

  width:宽度height:高度border:边框align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）

  alt:图片的文字说明hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近

  链接标签
  文本或图像

  超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

  （不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接）

  文本或图片

  属性：
  href:跳转页面的地址(跳转到外网需要添加协议)；
  name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
  target:_self(自己) _blank(新页面，之前页面存在) _
  __parent top 默认
  self_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。
  如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

  base 标签
  base 可以设置整体链接的打开状态

  base 写到 < head> 之间

  锚点定位 （难点）
  通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接分为两步：

  1.使用a href="#id名>“链接文本"< /a>创建链接文本。

  2.使用相应的id名标注跳转目标的位置

  表格标签

  表格由

  标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由

  标签定义）。

  数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

  字体标签
  < font>< /font>**
  属性： size:设置字体大小**
  color:设置字体颜色
  face:设置字体**

  表格**
  (table,tr,td)

  属性：

  border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度

  在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

  … …

  单元格内的文字

  … …
  1.table用于定义一个表格。

  2.tr 用于定义表格中的一行，必须嵌套在 table /table标签中，在 table /table中包含几对 tr /tr，就有几行表格。

  3.td /td：用于定义表格中的单元格，必须嵌套在tr /tr标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。

  注意：

  < /tr>中只能嵌套< td></t d >
  </ td>标签，他就像一个容器，可以容纳所有的元素
  表头标签(th)
  表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签</ th>替代相应的单元格标签即可。

  表单标签(掌握)
  目的是为了收集用户信息。

  在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

  在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

  表单控件：

  ​ 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

  提示信息：

  ​ 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

  表单域：

  ​ 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

  input 控件(重点)
  在上面的语法中，< input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。

  属性 说明

  type input元素类型

  name input 元素的名称

  value input 元素的值

  size input 元素的宽度

  readonly 是否只读

  maxlength 输入字符的最大长度

  disabled 是否禁用

  文本框：
  在表单中，文本框用来让用户输入字母、数字等等，如用户的姓名，地址等。

  代码格式如下：
  < input type=“text” name="…" size="…" maxlength="…" value="…"/>

  属性解释：
  type=”text”：定义单行文本输入框；

  name属性：定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

  size属性：定义文本框的宽度，单位是单个字符宽度；

  value属性：定义文本框的初始值。

  密码框：
  是一种特殊的文本域，用于输入密码。

  代码格式如下：
  < input type=“password” name="…" size="…" maxlength="…" value="…"/>

  属性解释：

  type=”password”定义密码框；

  name属性：定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

  size属性：定义密码框的宽度，单位是单个字符宽度；

  value属性：定义文本框的初始值。

  隐藏域：
  是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

  代码格式如下：
  < input type=“hidden” name="…" value="…"/>

  属性解释：

  type=”hidden”：定义隐藏域；

  name属性：定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

  value属性：定义文本框的初始值。

  单选按钮：
  当需要用户从有限个选项中选择一个时，使用单选按钮。比如我们在注册的时候选择体重。

  代码格式如下：
  < input type=“radio” name="…" value="…"/>

  属性解释：

  type=”radio”定义单选框；

  name属性：定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须同一个名称；

  value属性：定义单选框的值，同一组中，他们的域值必须是不同的。

  复选框：
  允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个独一的名称。

  代码格式如下：
  < input type=“checkbox” name="…" value="…"/>

  属性解释：

  type=”checkbox”定义复选框；

  name属性：定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

  value属性：定义复选框的值。

  {

  type: 以下为type可能要取的值：
  1.1 text 文本框 输入内容
  1.2 password 密码框 密文或者掩码
  1.3 radio 表示是单选，name必须一致；value：提交给服务器的数据
  表示同一组中只能选中一个( checked =“checked” 表示选中)
  1.4 checkbox 表示多选 ，name必须一致，
  表示同一组中可以选多个，返回值是个数组( checked =“checked” 表示选中)
  1.5 file ：表示上传控件
  以上具有输入性质的必须要有name属性,一开始写value表示是默认值(以后获取输入框的内容要根据name来取)
  以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
  1.6 submit 提交
  1.7 reset 重置
  1.9 image 图片提交按钮
  以上所有input的属性： width 设置宽度，height 设置高度 border 设置边框
  1.10 button 普通按钮
  1.11 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)

  name属性：表单元素名字，只有name属性才能提交给服务器。

  }

  文件上传框：
  代码格式如下：
  <input type=“file’ name=”…"

  注意：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

  说明：multipart 控件是否上传多文件

  属性解释：

  type=”file”：定义文件上传框；

  name属性：定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
  

  label标签(理解)
  label 标签为 input 元素定义标注（标签）。

  作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

  如何绑定元素呢？

  for 属性规定 label 与哪个表单元素绑定。

  < label for=“male”>Male</ label>
  < input type=“radio” name=“sex” id=“male” value=“male”>

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

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

  常用属性：

  1.Action
  在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

  （表示动作，值为服务器的地址，把表单的数据提交到该地址上处理）

  2.method
  用于设置表单数据的提交方式，其取值为get或post。

  3.name
  用于指定表单的名称，以区分同一个页面中的多个表单。

  4.enctype:

  表示是表单提交的类型**

  注意： 每个表单都应该有自己表单域。

  get:
  1.地址栏,请求参数都在地址后拼接 path?name=“张三”&password=“123456”
  2.不安全
  3.效率高
  4.get请求大小有限制，不同浏览器有不同，但是大约是2KB
  使用情况：一般情况用于查询数据。

  post：
  1.地址栏：请求参数单独处理。
  2.安全可靠
  3.效率低
  4.post请求大小理论上无限。
  使用情况：一般用于插入修改等操作

  textarea控件(文本域)
  如果需要输入大量的信息，就需要用到< textarea>< /textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

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

  文本内容

  转自：https://blog.csdn.net/qq_44732593/article/details/107287100?utm_source=app&app_version=4.17.2&code=app_1562916241&uLinkId=usr1mkqgl919blen