form表单属性:
action ----- 跳转的路径(分为绝对路径-从盘符开始找到你所需要的文件的路径 路径
+文件的名称 和相对路径-当前源文件和目标文件的相对位置)
method ------
用来明确表单提交的方式(
get post
)默认值是
get(get会直接暴露用户信息)
name -----
表单的名称
表单元素
表单元素(文本框,密码框,下拉列表框等等)
input标签
如下:
<input
type
=
"
元素的类型
"
name
=
"
元素的名称
"
value
=
"
元素的值
"
>
type的取值:text ----- 文本框 password ---- 密码框 radio ----- 单选按钮 checkbox ----
多选按钮
submit ------ 提交按钮 reset ----- 复位按钮 button ---- 普通按钮 image -----
图像按钮
file ------ 文本域(上传文件的按钮)hidden ---- 隐藏域 email ------ 邮箱 color ---- 颜色域 date ----- 日期
time ----- 时间
datetime-local -----
日期
+时间 range ------
进度条
input的属性:
checked -----默认选择 readonly -----
只读 字段只可以读不能修改
disabled ------ 表示禁用 不可以点击 autofocus ------ 默认光标的位置 required-----
不能为空白提交
实例如下:
<body><form action = "" >用户名: <input type = "text" name = "username" value = "zhangsan" readonly ><br>用户名: <input type = "text" name = "username" value = "lisi" disabled ><br>密码框: <input type = "password" name = "password" autofocus required ><br>请选择你的性别: <input type = "radio" value = " 男 " name = "gender" checked > 男<input type = "radio" value = " 女 " name = "gender" > 女<p>选择您的爱好:<input type = "checkbox" name = "aihao" > 唱歌<input type = "checkbox" name = "aihao" > 跳舞<input type = "checkbox" name = "aihao" > rap<input type = "checkbox" name = "aihao" > 打篮球</p><input type = "submit" ><input type = "reset" ><input type = "button" value = " 普通 " ><!-- <input type="image" src=" 图片 1.png"> --><input type = "file" ><input type = "hidden" value = "123456" ><br>请填写自己的邮箱: <input type = "email" name = "email" value = " 请填写邮箱 " ><input type = "color" ><input type = "date" ><input type = "time" ><input type = "datetime-local" ><input type = "range" ></form></body>
select标签
下拉列表框
:
一般
option
标签进行连用
selected
属性
:
默认被选中的选项
multiple="multiple"
属性
:
以列表形式显示
实例如下:
<body><form action = "" >请选择您的地址:<select name = "" id = "" multiple = "multiple" ><option value = "" > 北京 </option><option value = "" > 上海 </option><option value = "" selected > 重庆 </option><option value = "" > 西安 </option></select></form></body>
textarea标签
用来实现文本域
cols="30" 表示多少列,表示文本域的宽度
rows="10"表示
多少行,表示文本域的高度
实例如下:
<body><form action = "" ><textarea name = "" id = "" cols = "70" rows = "70" > 这几伙很懒,什么都没有留下!(默认文字)</textarea></form></body>
常见的属性
a
标签
:
超链接
实例如下(跳转百度):
<a href = "https://www.baidu.com/" > 点我 </a>
href" "中间为所跳转网页的链接
vlink :
访问过的超文本链接的颜色
Alink :
激活超文本链接的颜色
link :
超链接文本的颜色
text :
文本的颜色
bgcolor :
背景颜色
background :
背景图片
注:若在使用vlink,Alink时a标签内容颜色无变化则需要在使用前清楚浏览数据。
颜色表示法:
1.
英文单词
red green
2. #rrggbb
3. rgba() a
表示透明度
实例如下:
<body link = "red" vlink = "green" alink = "blue" bgcolor = "pink" background = " 图片 1.png"text = "red" ><a href = "https://www.baidu.com/" > 点我 </a></body>
img标签
用于插入图片(目前图片的格式:GIF JPG PNG BMP等等)
常见的属性
src
属性:
指的是图片的路径(绝对路径和相对路径)
alt
属性:
代替图片的文本内容(路径错误或者因为浏览器的原因图片显示不出来的时候,用
一段或者一个词描述一下这个图片)
width :
宽度 height:高度
单位是
px(
像素
) % border:边框 默认值是
0
align :
位置 (图片和文字的位置)
取值:
top -
上对齐 middle -居中对齐 bottom - 下对齐 (默认值) right -右对齐 left -左对齐
使用格式如下:
<body><img src = "..\images\ 图片 1.png" alt = " 哆啦 " width = "200px" height = "10%"border = "2" ><br>哆啦 A 梦默认对齐 <img src = "..\images\ 图片 1.png" width = "200px" height = "190px"border = "1" ><br>哆啦 A 梦上对齐 <img src = "..\images\ 图片 1.png" width = "200px" height = "190px"border = "1" align = "top" ><br>哆啦 A 梦居中对齐 <img src = "..\images\ 图片 1.png" width = "200px" height = "190px"border = "1" align = "middle" ><br>
title(图片标题)-用来显示描述图片的问题 鼠标悬浮于图片上不动时显示哆啦A梦
使用格式如下:
<img src = "..\images\ 图片 1.png" title = " 哆啦 A 梦 " >
多媒体标签
audio
标签:
音频
video
标签
:
视频
autoplay="autoplay":
自动播放(浏览器要支持
H5
标准才能使用这个属性)
controls="controls" :
表示播放器的组件
使用格式如下:
<body><audio src = "..\images\bgm.mp3" autoplay = "autoplay" controls = "controls" ></audio><video src = "..\images\ 花园宝宝 1.mp4" controls autoplay ></video></body>