从零开始学java(2)

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:链接到的内容新建窗口打开(一般默认在当前窗口打开)

发布了13 篇原创文章 · 获赞 2 · 访问量 587

猜你喜欢

转载自blog.csdn.net/Muyaaa/article/details/103777271