网页 = 页面样式(html) + 样式(css) + 用户交互(js)
1. HTML
2. CSS
3. Javascript
1. HTML
1、HTML:Hyper Text Markup Language,超文本标记语言
2、Form 表单属性
method 方法:get、post
action 动作:将表单数据提交给某个文件处理
onsubmit 提交:提交表单时,处理js事件,返回True/False
True 则 action 执行,False 则 action 不执行
3、表单控件
(1)input 控件类型,格式:<input type="" name="" value="" />
- text 单行文本框:<input type="text" name="" placeholder="请输入用户名" />
- textarea 多行文本框:<input type="textarea" name="" placeholder="请输入用户名" />
- password 密码框:<input type="password" name="" />
- radio 单选框:
性别:<input type="radio" name="sex" value="male" checked />男
- checkbox 复选框:
爱好:<input type="checkbox" name="hobby" value="music" checked />音乐
- file 选择文件:
<input type="file" name="picture" accept="image/png" multiple/>
accept 设置默认的文件类型,multiple 多选
- 新增控件类型:color、number、range、tel、email、url、search、
data pickers(date/time/datetime/datatime-local/month/week)
(2)select 下拉列表
(3)a 超链接
(4)button 按钮
- html:Hyper Text Markup Language,超文本标记语言。
- html 标签分为开始标签(开放标签)和结束标签(闭合标签),不区分大小写。
- html 结构:html - head - body - html
- 文本元素:
块 | p、div |
---|
文本 | font、span |
加粗 | b、strong |
下划线 | u |
斜体 | i、em |
换行 | <br /> |
标题 | h1~h6 |
水平分割线 | <hr width size align color /> |
图片标签 | img |
---|
高度、宽度 | |
地址 | src |
提示 | alt |
边框 | border |
对齐方式 | align:middle、top、bottom |
超链接 | <a href> |
---|
锚链接 | <a href="#A"></a> |
目标位置 | <a name="A"></a> |
邮箱链接 | <a href="mailto:邮箱"></a> |
滚动标签 | marquee |
---|
滚动延迟 | scrolldelay |
滚动方向 | direction:right |
反复滚动 | behavior |
滚动范围 | width、height |
对齐方式 | align |
表格标签 | table、td、tr |
---|
标题 | caption |
表头 | thead |
表内容 | tbody |
尾部 | tfoot |
表格属性 | table |
---|
rowspan(跨行) | colspan(跨列) |
cellpadding(内,单元格填充) | cellspacing(外,单元格间距) |
border(边框厚度) | bordercolor(边框颜色) |
background(背景) | bgcolor(背景色) |
width、height(宽高) | align(对齐方式) |
无序 | <ul type><li> |
---|
有序 | <ol type start><li> |
表单 | <form action=url method=get/post></form> |
---|
输入框、单选框、多选框、上传文件 | <input type> |
多行输入框 | <textarea name cols rows> |
按钮 | <button type=button/submit/reset> |
选择器 | <select name><option value selected> |
input | 属性 |
---|
类型 | type |
名称 | name |
初始值 | value |
初始宽度 | size |
最多字符个数 | maxlength |
选中 | checked |
input | type属性 |
---|
文本 | text |
密码 | password |
多选框 | checkbox name checked |
单选框 | radio name checked |
上传文件 | <input type="file" /> |
input | <input id="a" /> |
---|
label | <label for="a" /> |
2. 页面样式(css)
-
css:Cascading Style Sheet,层叠样式表,用于控制网页样式,允许将样式信息与网页内容分离的一种标签语言。
-
css 结构:<head><style type="text/css"></style></head>
-
样式选择:html 选择器、class 选择器、id 选择器
-
样式应用:行内样式表、内嵌样式表、外部样式表(多个样式,就近原则)
外部样式表:<link href rel="stylesheet" type="text/css">
-
常用文本样式
字体大小 | font-size |
---|
字体 | font-family |
字体粗细 | font-weight |
字体样式 | font-style |
文本颜色 | color |
对齐方式 | text-align |
边框 | border |
---|
边框样式 | border-style |
边框宽度 | border-width |
边框颜色 | border-color |
背景色 | background-color |
---|
背景图片 | background-image : url() |
如何重复背景图像 | background-repeat |
| repeat(默认)、repeat-x(水平)、repeat-y(垂直)、no-repeat(仅显示一次) |
背景声音 | <bgcolor src loop / > |