黑马程序员技术交流社区

标题: HTML小结 [打印本页]

作者: x531661 时间: 2019-6-1 14:52
标题: HTML小结
HTML：超文本标记语言
概念：是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html，xml
* 标记语言不是编程语言
标签学习:
字体标签：<font>
属性：color-颜色 size-大小(1-7) face-字体

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

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

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

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

超链接标签：<a>
属性：href-跳转路径 target-打开方式(_slef当前页面 _blank新窗口)

表格标签：<table>
属性：border-边框  width-宽度 height-高度  align-位置(left居左  center居中  right居右)  bgcolor-背景颜色 background-背景图片
行标签：<tr>
列标签：<td>
合并行：rowspan
和并列：colspan
* th：定义表头单元格
* <caption>：表格标题
* <thead>：表示表格的头部分
* <tbody>：表示表格的体部分
* <tfoot>：表示表格的脚部分

表单标签：
* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
表单标签：<form>
属性：action-提交路径 method-提交方式(get post)
get：提交的数据会显示到url地址栏中。数据不安全，提交的数据在请求行中
post：提交的数据不会显示到url地址栏中。数据安全，提交的数据在请求体中
      * 表单项中的数据要想被提交：必须指定其name属性
表单项：<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属性

CSS:层叠样式表
和HTML结合的方式：
第一种：行内样式
第二种：页面内样式
第三种：外部样式
选择器：
基础选择器：
id选择器：
#id值{样式控制}
类选择器：
.类名{样式控制}
元素选择器：
标签名{样式控制}
扩展选择器：
并集选择器：
元素1,元素2,...{样式控制}
子元素选择器：
父元素子元素{样式控制}
父元素选择器：
父元素>子元素{样式控制}
属性选择器：
标签名[属性名=属性值]{样式控制}

JavaScript:动态效果
和HTML结合方式：
第一种：页面内样式
第二种：引入外部文件
JS核心组成部分：
ECMAScript BOM    DOM

ECMAScript：
数据类型：
原始数据类型：
number：数字类型
string：字符串
boolean：布尔值
null：空对象
undefined：未定义
引用数据类型：对象
基本对象：
Function 方法对象
Array
Math
Date
定义变量/对象格式：var 变量/对象名 = 变量值/对象;

BOM:浏览器对象模型
浏览器对象：navigate
屏幕对象：screen
窗口对象：window
方法：
alert()
confirm()
propmt()

open()
close()

setTimeOut(参数1,参数2) 参数1：js代码  参数2：毫秒值
clearTimeOut()

setInterval(参数1,参数2) 参数1：js代码  参数2：毫秒值
clearInterval()
地址栏对象：location
方法：
刷新页面：reload()
属性：
跳转url地址：href
历史记录对象：history
方法：
forward() 前进
back()    后退
go()       前进或后退
属性：
获取历史记录页面的个数：length

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

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

事件：
         1. 点击事件：
            1. onclick：单击事件
            2. ondblclick：双击事件

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

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