HTML_School

1. span

红色*号

<span>*</span>

2. table

get方法, 将数据放在Url中

<form id="">
</form>

enctype

域标签

field, 没有属性

定义域和域标题

<form>
    <fileeset>
        <legen align="left|right|bottom|top">标题内容</legen>
        form elements
    </fileeset>
</form>

对表单进行归类

3. 表单元素_form

块元素, 行内块元素

input, 行内块元素

行内块元素特点

1, 可以定义宽高

2, 不独占一行

表单控件

input

列表框元素select

文本域元素textarea

input可以变换成10种, 根据type

<input type/>

属性

1, type

2, name, 表单元素的名称

text, 文本域, 单行

password, 密码域

radio, 单选框

hidden, 隐藏域, 用来发脚本之类的东西

3.1 text

<input  />

name,

maxlength,

size,

value, 输入框右侧的提示, 输入什么

raadonly,

<input name="school" 

3.2 password

属性和文本框类似

3.3 radio

<input name="radioName" type="raido"

同一组name值, 需要相同

value, 传递给数据库的值

3.4 复选框

3.5 submit_提交

3.6 reset_重置

属性和submit的一样

3.7 button_普通按钮

可以通过绑定js事件或运行脚本, 来进行表单的处理

name,

value,

onclick

3.8 image

图像按钮

把图片作为按钮

name, src

3.9 文件选择框file

name,

accept, 文件传输的mime类型

3.10 隐藏域hidden

页面中不可见, 目的是在表单中手机和发送信息

<input name="btnName" type="hidden" value="value" />

4. textarea元素

多行文本框

适合用户填写观点, 意见, 看法等大量文本信息

input, text, 是当行文本框

属性

rows,

clos,

wrap, , 提交表单时, 文本框中东文本如何换行

virtual, 不会自动换行

physical, 自动换行

5. select元素

下拉列表

平时只显示一个选项

2组标签组合

option,列表项

value, 往后台传输

multiple, 可以多选

option. 中 selected, 默认选中项

<form>
    <field>
        <legend>
           个人注册 
        </legend>
        
        <table>
            <tr></tr>
            <tr></tr>
            <tr></tr>
        </table>
    </field>
</form>

6. HTML5&CSS3

html5, 也适用于 手机, 手机浏览器

html5, 新增标签, 新增属性

<>

html5, 不区分大小写, 为兼容xhtml, 建议 小写

keygen, wbr, html5标签

可以省略引号

<input type="text" />

具有布尔值的属性

diaabled, readonly

<input type="checkbox" checked />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="" />

html5中可以省略属性值的属性

checked, readonly, ismap,

7. html5中, 表单新增的

input, 新增的输入类型

form

action=url

select, 和 Option

textarea, 多行文本输入框

表单控件, 分组

fileldset, 分组或字段域; legend, 分组或字段域的标题

8. input新增的输入类型

8.1 email

<input type="email" name="email_name" />

email, 自动验证email域的值, 是否复合邮件地址格式

8.2 url,

表单提交时, 自动验证

<input type="url" />

8.3 number

<input type="number"

8.4 range

<input type="range"

8.5 Data pickers

8.6 search

手机端, 会换出搜索框

8.7 color

8.8 tel

手机端, 会跳出 虚拟键盘

网页, 体验不出来

9. form新增的属性

9.1 autocomplete

用于指定表单是否有自动完成功能

2个值, on, off

html5, 默认值 on

不仅适用于form, 还支持 Input中 text, search, url, tel, email, password, date pickers, range , color

9.2 novalidate

关闭整个表单的验证

<form novalidate="novalidate">
    
</form>

10. input新增的属性

10.1 autofocus

<input autofocus=""

10.2 multiple

select中, 添加这个, 可以多选

input中使用这个属性

和email, 就可以输入多个email地址

和file, 就可以添加多个文件

10.3 placeholder

文本框中提示信息, 当要填的时候, 这些文字就消失了

<input type="emial" palceholser="输入正确的email地址"

10.4 requid

要求输入框中内容为空,

11. 新增的表单元素(html5中)

11.1 datalist

需要配合input使用

不同于select(正能选择)

<input type="text" list="datalistid"/>
<datalist>
    
</datalist>

11.2 keygen

表单的密钥生成器

一个私钥,存储在客户端

一个公钥, 它被送到服务器, 验证用户的客户端证书

发送的信息, 用 公钥加密

11.3 output

12. HTLM5结构性标签

标识html5, 结构

传统 div+css

新的 html5, 结构标签

header,

nav

article, section, aside侧边栏

footer页脚(版权)

也需要定义各种属性

12.1 selection

12.2 article

通常可以包含header,

12.3 nav

12.4 aside

侧边栏

用来装载, 非正文的内容

12.5 header

定义文档的也没, 通常是一些引导和导航信息

可以包含h1, h6, hgrup, 表格内容, 表示logo

12.6 footer

版权

<footer>Copyrigeht</footer>

可以在一个页面中多次使用

也可以在

article, section中添加footer, 相当于该区段的footer

13. 分组标签

13.1 figure&figcaption

这2个是一组的

IE8及以前, 不支持

13.2 hgroup

分组标签

将标题或者子标题分组

通常和h1, h6组合使用

13.3 dialog

主要用于人与人之间的对话

该标签中, hiahia包括dt, dd

dt, 表示说话者

dd, 说话者内容

dt, dd, 用于自定义列表

<dialog>
    <dt></dt>
</dialog>

14. 页面交互标签

主要用于功能性内容

14.1 details&summary

描述文档互殴哦文档

14.2 menu

定义命令的列表或菜单

<menu type="toobar">
    
</menu>

14.3 command

用户能调用的命令

<menu>
    <commmand></commmand>
</menu>

15. 行内语义性标签

16. meter

定义度量衡, 为已知范围

IE, 不支持

<meter></meter>

17. progress

显示任务的进度或进程

17.1 video

17.2 audio

音频

controls,

18. html5的全局属性

18.1 contenteditalbe

规定标签的内容是否可编辑

18.2 hidden

对元素进行隐藏

存在, 只是看不见

18.3 spellcheck

拼写检查

18.4 draggable

定义元素是否可以拖动

true

像实现圆拖动功能, 需要配合 JS

19. JS

描述性脚本语言

JS运行在客户端, 从而课减轻服务器端的负担

脚本语言, 不需要编译

解释性语言

给予对象的语言, 许多功能来自于于脚本环境中的对象

简单性, 基本语句和控制Luis简单而紧凑, 变量类型采用弱类型

跨平台, 依赖于浏览器, 和硬件环境和操作系统无关

应用

验证数据, 格式

页面特效, 轮播图

数值计算, 购物车中计算, 真正付钱的时候, 需要和服务器, 数据库连接

动态页面效果

text/javascript, 好多情况下, type属性可以省略, 会自动识别

3种使用方式

1, html中嵌入JS脚本, head, body中

2, link

3, javascript

脚本和事件结合

19.1 js语法

语句, 语句块

空白符, 包含 空格符, 换行符, 制表符等

js会忽略

js区分大小写

19.2 数据类型

js, 是一种

19.2.1 基本数据类型

基本数据类型, 复合数据类型, 特殊数据类型

1, 数值型

NaN, 非数值

Infinity, 正无穷大

-Infinity, 负无穷大

2, 字符串

String

字符串型, 是有限个Unicode字符组成的序列

单引号 或 双引号

js常用的转义字符

\b, 退格

3, 布尔型

19.2.2 复合数据类型

1, 数组型

未赋值的数组, undefined

2, 对象型

19.2.3 特殊数据类型

1, 空值null

2, 未定义的类型undefined

调试脚本

1, 浏览器控制台, 就可以

2, cosole.log()

19.2.4 常量和变量

css中, 类选择器, 名称 不能以数字开头命名

js变量命名规则

只能以字母或下划线开头

var variablename;

程序运行过程中, 变量的类型可变

var area = 5 * 20;

area = “text” +100;

19.2.5 表达式&运算符

== 和 ===

==, 先进行类型转换 再测试是否相等

===, 也可以比较2个操作数是否相等, 但不进行类型转换

字符串运算符

逻辑运算符

条件运算符

三目运算符

操作数1 ? 操作数2 : 操作数3

19.2.6 控制结构

殊勋结构, 选择结构,

getDate(), 获取时间

常用内部对象