前端学习（一）HTML基础

前端开发需要学习的技术

• Photoshop
• html / html5
• CSS / CSS3
• 布局知识
• Bootstrap
• JavaScript
• JQuery
• Ajax

HTML 超文本标记语言

前情提要：
重点掌握html标签结构、块状元素、行内元素等

相关概念tips:

1. html是标记语言，不是编程语言，不能使用逻辑运算
2. 静态网页和动态网页的区别：静态网页除非修改代码否则页面内容和显示效果不改变；动态网页随着时间、环境等因素改变页面效果
3. 浏览器：解释和执行HTML源码的工具；五大主流浏览器：IE、火狐、谷歌、欧朋、苹果
4. 单标签必须要闭合

块级元素独占一行，宽度自动填满父元素；
行内元素不会独占一行，宽高随元素内容变换，不能设置width和height

W3C规范

标准由结构、表现和行为三部分组成

标签嵌套规则

• 块元素可以嵌套块元素和行内元素，行内元素只能嵌套行内元素
• 块元素不能放在p标签里面
• 标题标签+p+dt标签只能放行内元素
• 块元素和块元素并列，行内元素与行内元素并列

文件命名规范

项目开发时，文件名和目录中尽量不使用文件名，空格和其他特殊符号（尽量英文），一般以字母和下换线开头

表单元素 form

1.input元素

type：

text 默认，文本（可以不写）

属性：
placeholder         提示文字
name                命名，用于前后端通信
minlength/maxlength 最小/最多输入字符
disable             失效
readonly            只读
value               默认值
pattern             正则匹配（建议前端实现不在后台）

password 密码

属性与text一样

radio 单选钮

name                必须有
value               默认值
checked             选中
disable             失效
readonly            只读

checkbox 复选框

name                必须有

button 普通按钮

通常用于调用脚本代码，执行对应逻辑
value               默认值（按钮标题）
disable             失效

image 图片按钮

file 文件上传

submit 提交，用于将表单数据提交到后台

reset 重置按钮，将输入表单内容还原为初始状态

2.textarea元素

文本域，主要用于输入大量内容

3.select元素

下拉列表框，默认为单项选择
option              选项
multiple            实现多选，这时的下拉列表框变成了列表框
size                最大选项数（多了用滚动条实现）

4.button元素

普通按钮，具有提交功能，可以单独使用，不写在form元素中

表单元素通用属性

name、value、readonly、disabled

iframe框架

作用：用于将多个网页文件组合成一个文件

属性：

name
src
srcolling               值：“yes”，“no”，“auto”
width
height
frameborder             是否有边框（1/0）

在实际开发中，尽量减少使用iframe

因为iframe破坏了前进和后退功能，不利于搜索引擎优化

可以用div布局实现iframe