html基本基础——图片元素表单元素

编程入门行业动态更新时间:2024-10-25 20:18:42

html基本基础——图片<a href=https://www.elefans.com/category/jswz/34/1771401.html style= 元素表单元素"/>

html基本基础——图片元素表单元素

HTML基本结构

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body></html>

声明——设置当前html的版本
根标签——有且仅有一个
< head>——设置当前html的信息

搜索引擎抓取HTML顺序
一、< title>
二、< meta name=”keywords”>
三、< h1>

语义化——当前标签的含义，使用当前含义带来的默认css样式

HTML标签/元素/标记
HTML属性
分类——私有属性、标准属性、事件属性
格式——<标签名属性名=“属性值”>

HTML

路径问题（地址）

绝对路径——查找的开始位置是固定的
相对路径——查找的开始位置是变化的（在实际开发中使用更多），向上跳转一级使用”../”
完整的地址
| http:// | localhost：| 8080 | /day02 | #name
网络协议 IP地址端口号相对路径锚点
localhost=127.0.0.1表示本机
- 网络访问——和互联网有关系
- 本地访问——和网络无关，file:///……

链接元素

第一个作用：从当前页面跳转到指定页面；
链接元素的第二个作用——通过href属性设置当前链接跳转的地方
- 格式：设置href属性值，格式——#+name属性值，实现跳转后的地址（锚点效果）
- 作用：并不是从当前页面跳转到指定页面，而是当前页面中跳转。
- 既要实现锚点效果，但是不希望地址出现变化，这就是阻止默认行为！以后可以使用javascript来解决。
链接元素的第三个作用（了解）——实现发送邮件
- 设置href属性值：“mailto:邮件地址”
- 当时在实际开发中，这种方式用的越来越少！
  一、邮件使用较少；
  二、电脑中必须有邮件软件；

图片元素

< img >空标签，没有结束标签

必要属性：
- src属性——类似于标签中的href属性，设置需要显示在浏览器中的图片的地址
- alt属性——设置当前浏览器无法显示图片后显示的文本内容。
  - 不显示的可能：路径不对，找不到图片；浏览器不支持< img >标签。
可选属性：
- width属性——设置图片的显示宽度
- height属性——设置图片的显示高度
- 单位
  - 默认情况下，我们使用的是像素值px（绝对值）；
  - 百分值——0%~100%，（相对值）相对的是浏览器页面的百分比。
注意：如果同时设置宽和高的时候，可能图片会被拉伸，显示图片尽量按照图片的原比例设置。
浏览器加载图片问题：在加载过程中需要从浏览器中跳出，所以我们浏览器中加载图片越多，浏览器加载时间越长。每次跳出跳入时间还是由图片大小决定，越大会越慢的。

表格元素

概念：具有行和列（单元格）
- 行：水平方向（多个单元格）
- 列：垂直方向（多个单元格）
- 表头：目前第一行的内容就是表头，行内单元格不使用td,而是使用th设置表头；表头效果：字体加粗，居中显示；
- 表示表格头，在整个表格第一行； < thead>；表示中间 < tbody>；表格结尾，显示在表格的最后一行； < tfoot>。这些都要放到< tr>标签的外面
属性：
- border默认效果是0，可以设置宽度；如果值较大时，只变化最外层的边框，里面的单元格边框是不会变化的。
- width设置单元格的宽度；想设置每个列所占整体宽度的比例的话，只需要设置第一行中的所有单元格所占的宽度即可。最好使用百分值来设置列宽。
效果：最基本的效果上是没有线的（边框）
作用：
- 表格的语义化 - 配合 CSS 可以实现漂亮的表格效果；
- 利用表格的行和列的概念 - 实现页面元素的布局。
表格的跨行和跨列
- colspan——跨列，将横向几列进行合并
- rowspan——跨行，将纵向几行进行合并
- 当定义好合并的行和列之后，不要忘记将需要合并的行列单元格进行取消。

HTML表单

< form >标签

语义化——表示为表单；
容器元素——没有任何效果的

定义表单< form>标签只是定义表单容器；

必要属性：
- action属性——设置提交表单的服务器端地址。类似于< a>标签的href属性，写地址的，但是这个地址要编写的是服务器端的某个资源；
- method属性——设置当前表单提交方式
  - GET
    提交表单后的地址内容：”提交地址?name=value&name=value”
    将表单内数据内容添加到地址中，但是有缺点：
    1、数据不够安全
    2、数据的大小有限制，通常不能超过1KB。
  - POST
    没有将表单内的数据添加到地址中。
标准属性：
- ID属性——设置当前标签的标识，必须是唯一的，不能重复
- name属性——为当前标签设置名称，允许重复
  需要表单中所使用的输入框、按钮等组件；
常见组件一：< input>标签
必要属性：type
- text——文本框（输入框）
- password——密码框，实际开发中的密码框都是由文本框来实现的。
- button——登录按钮，可以设置value，设置按钮上显示描述。
- submit——提交按钮，将用户添加的信息提交给action中的服务器地址
- 定义表单的组合
  容器使用< form>标签，配合< input type=”submit”>提交按钮
常见的组件二：< input type=”类型”>
- 输入框：
```
    文本框<input type="text">输入框<input type="password">
```
- 按钮
```
   <input type="button" value="基本按钮"><input type="button" value="提交按钮"><input type="button" value="重置按钮">注意：默认显示效果一致，语义化不同
```
- 图片：
```
   <input type="image" src="×.jpg">——主要应用在表单的内部<img src="×.jpg">
```
- 单选框:
  默认情况下，单选框之间是没有任何关系的；
  一般情况下，将以下三个单选框设置为一组:通过为单选框设置相同的name属性;
  一组单选框，怎么知道被选中的是谁？——checked属性
  checked属性：通过设置该属性，默认当前单选框被选中；用户动态选中某个单选框时，判断当前单选框是否具有checked属性。
```
   <input type="radio" name="like">html<input type="radio" name="like">css<input type="radio" name="like">javascript<input type="radio">node.js<hr><br>
```
- 复选框
  设置相同的name属性值为一组；
  复选框在设置成一组时，是看不出来效果的；
  默认选中也是checke=“checked”；
```
<input type="checkbox" name="like1">html<input type="checkbox" name="like1">css<input type="checkbox" name="like1">node.js<input type="checkbox" name="like1">JS<hr><br>
```
- 文本域
  作用：允许在页面中来选中本地文件，文件类型没有任何要求；
  使用场景：文件上传
  在默认情况下，每次只能选择一个文件。想要每次选择多个文件——multiple属性
```
<input type="file" multiple>
```
  - 隐藏域：
    作用：一般来设置一些不想被用户所看到的数据内容。
    目前的实际开发中比较少用。
```
<input type="hidden" value="值">
```
- input标签中的特殊属性
- readonly属性——只读不能写，一般已经提供了默认内容，不允许修改的；他只针对输入框有效果。
- disabled属性——不可用。除了输入框以外，其他的都使用< input>组件。
- 使用方式：属性名和属性值相同。这种属性，可以只设置属性名，不写属性值。

表单元素中的下拉选项

下拉列表——下拉单选
- < select>标签——下拉列表的容器元素
  - name属性——名称
  - ID属性——唯一标识
- < option>标签——下拉列表中的项，默认显示第一个< option>内的内容
  - value——表示当前生成的值
  - selected属性——表示当前值是否被选中
下拉多选
- < select>标签
- multiple属性——表示多选，默认只能选中四个选项；设置所有选项都显示：size属性——设置当前显示的选项个数