Day2
今天学习用webstorm工具。。
webstorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
一些特殊符号
空格:1 2
大于号:>
小于号:<
左边扩折号:«
右边扩折号»
版权号:©
双引号:"
空格:1 2
大于号:>
小于号:<
左边扩折号:«
右边扩折号»
版权号:©
双引号:"
表单元素
表单的根标签:”form<form></form>
表单由多个表单元素组成。
form表单属性介绍
action=“表单提交的地址”;//交给后端 特点跟超链接的href相似
method=“表单提交的方式”;// 有get和post两种
get:提交数据值到后端通过url(网址传值),由于网址的长度限制,所以一般用来提交少量数据制后端(4kb左右).
post:提交数据不是通过url传值,地址栏看不到数据,通过http请求传输数据,理论是没有大小限制.
<form action="#" method="get"></form>
form表单元素的介绍
input标签类
type="text"
:单行文本输入框
type="password"
:密码输入框
type="radio"
:单选按钮
type="checkbox"
:复选按钮
type="file"
:文件上传
type="submit
" :提交按钮
type="reset
" :重置按钮
type="button
":普通按钮
注:对于name
一类取一个名字。
非input标签
select-option:下拉列表
<select>
<option></option>
<option ></option>
<option ></option>
</select>
textarea:多行文本
<textarea></textarea>
button:按钮
<button></button>
扩展一
1.对于一些表单输入框,比如密码输入框,单行文本输入框对应的文字提示:
placeholder="请输入XX"
2.对于复选按钮及单选按钮 ,设置按钮的默认选中项:
checked属性
对于下拉列表默认选中项:
selected属性
3.表单元素失效的属性设置:
disabled的属性
4.只读(标签不可以编辑):
readonly(可以给任何输入框使用)
扩展二:h5新标签或新属性
禁止提交空数据:required
邮箱:type="email"
数字输入框:type="number"
其中
max="#"最大值
min="#"最小值
step="#"步长
时间:
年月日:type="date"
时分秒:type="time"
年月日时分秒:type="datetime-local"
注:一些浏览器不支持,chrome一般都会支持
表格
表格标签:<table></table>
表格的行:<tr></tr>
表格的列:<td></td>
表格标题:<caption></caption>
表格由什么组成?
表格由多个行组成
表格的行由什么组成?
表格的行由多个列组成
表格常用属性介绍:
width:设置表格的宽度
height:设置表格的高度
border:设置表格的边框宽度
单位是px;
表格居中的属性设置:align=“left/center/right”; 还可以设置块级别标签内容居中(包括块级别标签里面的图片)。
style属性值的回顾
font-size:设置字体大小
font-style:设置是否为斜体 italic
color:设置字体颜色
text-align:设置标签中的文字居中
background:设置背景颜色
td属性介绍
跨行:rowspan (rowspan=“2” 跨2行操作)
跨列:colspan (colspan=“3” 跨3列操作)
音视频文件插入
音频:
<audio controls autoplay loop>
<source src="">
</audio >
视频:
<video controls autoplay loop>
<source src="">
</video>
背景音乐:
<audio autoplay loop>
<source src="">
</audio >
iframe框架
将其他html页面引入要制作的html页面
<iframe src="" width="" height="" frameborder="">
</iframe>
src:子页面地址 可以是本地的页面地址,也可以外部的页面地址(写入外部页面的网址);
width:设置宽度;
height:设置高度;
frameborder:设置边框的宽度,0px代表去掉边框。
图片超链接
<p align="center">
<a href="" target="showIndex">
<img src="">
</a>
<a href="" target="_blank">
<img src="">
</a>
</p>
<hr>
<iframe src="" frameborder="0px" width="100%" height="600px" name="showIndex">
</iframe>
其中:
target:设置连接到的内容显示在什么地方。。。
_blank:链接到的内容新建窗口打开(一般默认在当前窗口打开)