元素表单元素"/>
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
没有将表单内的数据添加到地址中。
- GET
标准属性:
- 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>标签——下拉列表的容器元素
- 下拉多选
- < select>标签
- multiple属性——表示多选,默认只能选中四个选项;设置所有选项都显示:size属性——设置当前显示的选项个数
更多推荐
html基本基础——图片元素表单元素
发布评论