|
二、HTML HTML概念 Hyper Text Markup Language 超文本标记语言 超文本: 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.标记语言: 由标签构成的语言。<标签名称> 如 html，xml 标记语言不是编程语言 标签分为 1. 围堵标签：有开始标签和结束标签。如 <html> </html> 2. 自闭和标签：开始标签和结束标签在一起。如 <br/> 标签文件标签：构成html最基本的标签 * html:html文档的根标签 * head：头标签。用于指定html文档的一些属性。引入外部的资源 * title：标题标签。 * body：体标签 * <!DOCTYPE html>：html5中定义该文档是html文档 文本标签：和文本有关的标签 * 注释：<!-- 注释内容 --> * <h1> to <h6>：标题标签 * h1~h6:字体大小逐渐递减 * <p>：段落标签 * <br>：换行标签 * <hr>：展示一条水平线 * 属性： * color：颜色 * width：宽度 * size：高度 * align：对其方式 * center：居中 * left：左对齐 * right：右对齐 * <b>：字体加粗 * <i>：字体斜体 * <u> :下划线 * <font>:字体标签 * <center>:文本居中 * 属性： * color：颜色 * size：大小 * face：字体 图片标签： * img：展示图片 * 属性： * src：指定图片的位置 *alt：图片找不到所显示内容 列表标签： * 有序列表： * ol:type=编号类型 start=起始位置 * li: * 无序列表： * ul:type=实心空心类型 * li: 链接标签： * a:定义一个超链接 * 属性： * href：指定访问资源的URL(统一资源定位符) * target：指定打开资源的方式 * _self:默认值，在当前页面打开 * _blank：在空白页面打开 div和span： * div:每一个div占满一整行。块级标签 * span：文本信息在一行展示，行内标签 内联标签 语义化标签：html5中为了提高程序的可读性，提供了一些标签。 1. <header>：页眉 2. <footer>：页脚 表格标签： * table：定义表格 * width：宽度 * border：边框 * cellpadding：定义内容和单元格的距离 * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、 * bgcolor：背景色 * align：对齐方式 * tr：定义行 * bgcolor：背景色 * align：对齐方式 * td：定义单元格 * colspan：合并列 * rowspan：合并行 * th：定义表头单元格 * <caption>：表格标题 * <thead>：表示表格的头部分 * <tbody>：表示表格的体部分 * <tfoot>：表示表格的脚部分 表单标签： 表单标签：<form> 属性：action-提交路径 method-提交方式(get post) get：提交的数据会显示到url地址栏中。数据不安全，提交的数据在请求行中 post：提交的数据不会显示到url地址栏中。数据安全，提交的数据在请求体中 表单项：<input> <textarea> <select> 文本输入框：<input type="text"/> 密码输入框：<input type="password"/> 邮箱输入框：<input type="email"/> 颜色取色框：<input type="color"/> 文件上传框：<input type="file"/> 图片框：<input type="image"/> 提交按钮：<input type="submit"/> 重置按钮：<input type="reset"/> 隐藏域：<input type="hidden"/> 日期框：<input type="date"/> 单选框：<input type="radio"/> 复选框：<input type="checkbox"/> 按钮：<input type="button"/> 数字框：<input type="number"/> 文本域：<textarea> 属性：rows-行数 cols-列数 下拉框：<select> 列表项：<option> 注意： 1.表单项中的数据如果想被提交，必须有name属性 2.单选和复选，必须有相同的name属性值 3.单选和复选，可以有默认被选中的效果。 通过checked属性 4.下拉框，可以有默认被选中的效果。 通过selected属性 CSSCSS:层叠样式表 和HTML结合的方式： 第一种：行内样式 第二种：页面内样式 在head标签内，定义style标签，style标签的标签体内容就是css代码 第三种：外部样式 定义css资源文件<link rel="stylesheet" href="css/a.css"> 选择器： 基础选择器： id选择器： #id值{样式控制} 类选择器： .类名{样式控制} 元素选择器： 标签名{样式控制} 扩展选择器： 选择所有： *{} 并集选择器： 元素1,元素2,...{样式控制} 子元素选择器： 父元素 子元素{样式控制} 父元素选择器： 父元素>子元素{样式控制} 属性选择器： 标签名[属性名=属性值]{样式控制} 伪类选择器： 元素:状态{} 如： <a> * 状态： * link：初始化的状态 * visited：被访问过的状态 * active：正在访问状态 * hover：鼠标悬浮状态 属性 1. 字体、文本 * font-size：字体大小 * color：文本颜色 * text-align：对齐方式 * line-height：行高 2. 背景 * background： 3. 边框 * border：设置边框，复合属性 4. 尺寸 * width：宽度 * height：高度 5. 盒子模型：控制布局 * margin：外边距 * padding：内边距 * 默认情况下内边距会影响整个盒子的大小 * box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小 float：浮动 left right JavaScript一门客户端脚本语言 JavaScript:动态效果 和HTML结合方式： 第一种：页面内样式 ， 定义<script>，标签体内容就是js代码，可以定义在html页面的任何地方 第二种：引入外部文件，定义<script>，通过src属性引入外部的js文件 JS核心组成部分： ECMAScript BOM DOM ECMAScript： 数据类型： 原始数据类型： number：数字类型 string：字符串 boolean：布尔值 null：空对象 undefined：未定义，则会被默认赋值为undefined 引用数据类型：对象 基本对象： Function 方法对象 Array Math Date RebExp：正则表达式对象，比较输入的内容是否符合要求 Global：全局对象，编码解码用 encodeURI():url编码 decodeURI():url解码 encodeURIComponent():url编码,编码的字符更多 decodeURIComponent():url解码 定义变量/对象格式：var 变量/对象名 = 变量值/对象; 比较运算符 ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false BOM、DOMBOM:浏览器对象模型 浏览器对象：navigator 屏幕对象：screen 窗口对象：window 方法： alert() 弹出警告窗 confirm()显示带有一段消息以及确认按钮和取消按钮的对话框，如果用户点击确定按钮，则方法返回true 如果用户点击取消按钮，则方法返回false propmt()显示可提示用户输入的对话框。基本不用 open()打开一个新的浏览器窗口 close()关闭浏览器窗口 定时器 setTimeOut(参数1,参数2) 参数1：js代码 参数2：毫秒值 clearTimeOut() setInterval(参数1,参数2) 参数1：js代码 参数2：毫秒值 clearInterval() 可获取其他BOM对象 获取DOM对象document 地址栏对象：location 方法： 刷新页面：reload() 属性： 跳转url路径地址：href 历史记录对象：history 方法： forward() 前进 back() 后退 go() 前进或后退 属性： 获取历史记录页面的个数：length DOM:文档对象模型 Document：文档对象 获取方法： 通过id来获取指定元素对象：getElementById() 通过class属性来获取元素对象：getElementsByClassName() 通过name属性来获取元素对象：getElementsByName() 通过元素名来获取元素对象：getElementsByTagName() 创建方法： 创建元素：createElement() 创建属性：createAttribute() 创建文本：createTextNode() 创建注释：createComment() Element：元素对象 设置属性：setAttribute(属性名,属性值); 删除属性：removeAttribute(属性名); Node：节点对象 添加元素：appendChild() 删除元素：removeChild() 获取父级元素对象：parentNode; 用新节点替换一个子节点：replaceChild() innerHTML 改变内容：对象名.innerHTML=“内容”； 追加内容：对象名.innerHTML += “内容”； 样式控制： 第一种：对象名.style.样式属性 = 属性值； 第二种：对象名.className = css样式控制选择器名称；
| 
收藏
淘帖
踩
