从零开始学java（2）--- Html基本知识-优快云博客

Day2

今天学习用webstorm工具。。

webstorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

一些特殊符号

空格:1&nbsp;2
大于号:&gt;
小于号:&lt;
左边扩折号:&laquo;
右边扩折号&raquo;
版权号:&copy;
双引号:&quot;

空格: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>