您的位置：首页 > Web前端 > HTML

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

2017-05-21 08:37 113 查看

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属性——设置当前显示的选项个数

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航