黑马程序员技术交流社区

标题: HTML+CSS+JavaScript [打印本页]

作者: 段孟钊 时间: 2019-6-1 15:24
标题: HTML+CSS+JavaScript
HTML：超文本标记语言
字体标签：<font>
属性：color-颜色 size-大小(1-7)（从小到大） face-字体

排版标签：
标题标签：<h1> ~ <h6>（从大到小）
段落标签：<p>
加粗标签：<b>
斜体标签：<i>
下划线标签：<u>
居中标签：<center>

特殊标签：
换行：<br/>(<br>)
空格： 
水平线：<hr/>
属性：color-颜色  width-宽度  size-高度
<:  <
>:  >

图片标签：<img>
属性：src-图片路径  width-宽度  height-高度 alt-图片找不到显示的内容

列表标签：
有序列表：<ol>(order list)
列表项：<li>
属性：type-(数字  字母罗马字符) start-起始位置
无序列表：<ul>
列表项：<li>
属性：type-(实心圆disc、空心圆circle、实心框square)

超链接标签：<a>
属性：href-跳转路径 target-打开方式(_slef当前页面 _blank新窗口)
设置a标签没有下划线：text-decoration:none;
设置a标签不跳转页面有点击效果：href = "#"或"javascript:void(0);";

表格标签：<table>
属性：border-边框  width-宽度 height-高度  align-位置(left居左  center居中  right居右)  bgcolor-背景颜色 background-背景图片
border: 1px; 代表给表里的每一个tr和td都加上了border边框属性
行标签：<tr>
列标签：<td>
合并行：rowspan，参数为正整数，就代表合并几个
和并列：colspan，参数为正整数，就代表合并几个

表单标签：
表单标签：<form>
属性：action-提交路径 method-提交方式(get post)
get：提交的数据会显示到url地址栏中。地址栏的长度大小有限，数据不安全，提交的数据在请求行中
post：提交的数据不会显示到url地址栏中。数据安全，提交的数据在请求体中，长度大小没有限制
表单项：<input> <textarea> <select>
文本输入框：<input type="text"/>
placeholder = ""; 可以给每一个输入框加上灰色提示信息
密码输入框：<input type="password"/>
邮箱输入框：<input type="email"/>
颜色取色框：<input type="color"/>
文件上传框：<input type="file"/>
图片提交按钮：<input type="image"/>
//src="submit.gif" alt="Submit"
必须把 src 属性和 alt 属性与 <input type="image"> 结合使用。
提交按钮：<input type="submit"/>
重置按钮：<input type="reset"/>
隐藏域：<input type="hidden"/>：用来给表单附带一些默认信息
日期框：<input type="date"/>
单选框：<input type="radio"/>
每一个单选框的name值要相同，并且要给value属性赋值
复选框：<input type="checkbox"/>
每一个复选框的name值要相同，并且要给value属性赋值
按钮：<input type="button"/>
数字框：<input type="number"/>

文本域：<textarea>
属性：rows-行数 cols-列数（用来表示长和宽）

下拉框：<select>
列表项：<option>
提交表单需要给name和每一个option的value赋值

注意：
1.表单项中的数据如果想被提交，必须有name属性
2.单选和复选，必须有相同的name属性值
3.单选和复选，可以有默认被选中的效果。通过checked属性
4.下拉框，可以有默认被选中的效果。通过selected属性

CSS:层叠样式表
和HTML结合的方式：
第一种：行内样式 <a href="#" style = "color:red";>点击</a>
第二种：页面内样式 <style></style>写在head标签体内
第三种：外部样式 <link rel="stylesheet" type="text/css" href="css文件路径">
选择器：
基础选择器：
id选择器：
#id值{样式控制}
类选择器：
.类名{样式控制}
元素选择器：
标签名{样式控制}
扩展选择器：
并集选择器：
元素1,元素2,...{样式控制}
子元素选择器：
父元素子元素{样式控制}
父元素选择器：
父元素>子元素{样式控制}
属性选择器：
标签名[属性名=属性值]{样式控制}

JavaScript:动态效果
和HTML结合方式：
第一种：页面内样式
第二种：引入外部文件
JS核心组成部分：
ECMAScript（基础js） BOM（浏览器对象模型）    DOM（文档对象模型）

ECMAScript：
数据类型：
原始数据类型：
number：数字类型
string：字符串
boolean：布尔值
null：空对象
undefined：未定义
引用数据类型：对象
基本对象：
Function 方法对象
var fun = new Function(形式参数列表,方法体);
function 方法名称(形式参数列表){
                  方法体
                  }
var 方法名 = function(形式参数列表){
                        方法体
                     }
Array
Math
Date
定义变量/对象格式：var 变量/对象名 = 变量值/对象;

BOM:浏览器对象模型
浏览器对象：navigate
屏幕对象：screen
窗口对象：window
方法：
alert():弹出警告框
confirm()：弹出信息提示确认按钮框，点击确认返回true
propmt()：弹出输入框，点击确认返回输入的内容

open(url)：可以给定要打开的url地址，返回一个新窗口对象
close()：一般关闭新窗口对象，新窗口对象.close();
//执行一次的定时器
setTimeOut(参数1,参数2) 参数1：js代码  参数2：毫秒值
返回一个定时器唯一标识，
clearTimeOut()：clearTimeOut(定时器唯一标识)
//执行循环的定时器
setInterval(参数1,参数2) 参数1：js代码  参数2：毫秒值
返回一个定时器唯一标识，
clearInterval()：clearInterval(定时器唯一标识)
地址栏对象：location
方法：
刷新页面：reload()
属性：
跳转url地址：href  ：location.href = "url";
历史记录对象：history
方法：
forward() 前进
back()    后退
go()       前进或后退：go(整数)：负数代表后退几个历史记录，整数代表前进几个历史记录
属性：
获取历史记录页面的个数：length

DOM:文档对象模型
Document：
获取方法：
通过id来获取指定元素对象：getElementById()
通过class属性来获取元素对象数组：getElementsByClassName()
通过name属性来获取元素对象数组：getElementsByName()
通过元素名来获取元素对象数组：getElementsByTagName()
创建方法：
创建元素：createElement()
创建属性：createAttribute()
创建文本：createTextNode()
Element：
设置属性：setAttribute(属性名,属性值);通过元素对象使用
删除属性：removeAttribute(属性名);

Node：
添加元素：appendChild()
删除元素：removeChild()
获取父级元素对象：parentNode;通过子级元素对象来获取

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2