- 以下大多都摘自菜鸟教程：https://www.runoob.com/
HTML
简介
-
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
-
浏览器读取 HTML 文件，使用标签来决定如何展示页面内容
-
前端三剑客
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 控制了网页的行为
-
六大原则之一：开闭原则
- 敏捷开发思想，一开始不用很严谨，是递增的完善
-
发送方式 get、post
- 地址、超链接 get
- 表单 get、post
- ajax 时间 post
-
块、行级 ( 也叫内联 ) 元素
-
display 属性指定
- block 转为块级
- none 隐藏不显示
- inline 块变行
- inline-block 内联元素设高宽
-
块级：按列占，向下排列，每次都换行可以包含块和行
div、p、ul- 但又想放一行里，就用浮动
float:left
-
行内：占满行
- 超链接
a、label、span
- 超链接
-
行内块：块的特性，只不过不占一整行了
img、input、textarea
-
-
<!DOCTYPE html>：表示是用 HTML5 来写的，不区分大小写- 告知浏览器使用了哪种版本
-
<head>：头部元素，包含了文档的元数据，定义非显示的（除了<title>）<meta charset="utf-8" content="......" />不需要成对的 ——> 自闭和标签：不能再往里面嵌加别的标签了；其中 content 属性是给搜索引擎看的- 中文网页需要声明编码，有些是 GBK（如：360浏览器）
- 前端交互、爬虫、内部算法（考虑关键字、内容等）
- 搜索优化 + 竞拍排名
- 通过 meta 标签设置的编码和网页文件在保存时所使用的文档编码（doctype 指定版本强制浏览器按标准渲染）不相同
-
标题 h，段落 p，链接 a
- p 是块级元素，不想产生新段时换行：加
<br>
- p 是块级元素，不想产生新段时换行：加
基础
- 空元素：没有内容的 HTML 元素
- 换行
<br>，开始及关闭 / 没有关闭标签- 但
<br />更保障
- 但
- 水平线
<hr> - 图像标签也是
<img>，只有属性
- 换行
- 连续的空格和换行都会显示为一个空格
- 对文本格式化的要求：https://www.runoob.com/html/html-formatting.html
- 链接
<a>：- 属性：href、target (
_blank新窗口打开；_self当前窗口打开 )、title、rel - 各种链接：
- 文本 href
- 图像，包含
<img > - 锚点
href="#xx"对应跳转到<a name="xx"> - 下载链接
href="xx.pdf"后加属性download
- 页面不显示的、对读者隐藏的书签，加 id
<a id="tips">有用的提示部分</a><a href="#tips">访问有用的提示部分</a>
- 属性：href、target (
<head>：<title>标签<base>所有链接默认的目标地址<meta>描述 HTML 文档的描述，关键字，作者，字符集等等- 描述了一些基本的元数据，不显示于页面，但会被浏览器解析
- 配合属性
name（如：=keywords）与属性content（如：=花，草，树木） - 刷新页面的
http-equiv代替names
<link>定义了文档与外部资源之间的关系<link rel="stylesheet" type="text/css" href="mystyle.css">- 属性 rel （是 relationship 缩写），通常用来描述当前页面与 href 所指定的文档之间的关系，也可见于
<a>标签
<style>其中直接添加样式来渲染 HTML 文档<style type="text/css"> ... </style>
- 可插入
<scripts>脚本，如：JavaScript - 也可以
<p>定义文档页眉（介绍信息）
图像
- 空标签
<img>中 src 是指定图像的 URL 地址 - 属性 alt 是定义一串预备的可替换的文本，为了在图像无法载入时显示这个替代性的文本而不是图像
- 高 height，宽 width
<map>标签定义图像地图<area>定义图像地图中的可点击区域
表格
-
<table> -
tr表示表格的一行 -
th表示表头单元格 -
td表示数据单元格 -
thead表格的标题部分 -
tbody用于定义表格的主题部分<table> <thead> <tr> <th>列标题1</th> </tr> </thead> <tbody> <tr> <td>行1，列1</td> </tr> <tr> <td>行2，列1</td> </tr> </tbody> </table> -
属性 border 表示边框
-
在
td中可以用属性colspan="2"表示横跨两列
列表
-
无序
<ul>内加多个<li> -
有序
<ol>内加多个<li> -
自定义列表以
<dl>标签开始；每个自定义列表项以<dt>开始；每个自定义列表项的定义以<dd>开始<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> <!-- 显示： Coffee - black hot drink Milk - white cold drink --> -
列表之间可以嵌套，如：
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> </ul>
区块
- HTML 可以通过
<div>和<span>将元素组合起来- 块级元素，
<div>可用于组合其他 HTML 元素的容器- 独占一行，默认是以块的形式占据空间
- 内联元素，
<span>元素可用作文本的容器<span>默认只占据内容宽度的空间- 显示时通常不会以新行开始，如：
<h1>、<td>、<a>、<img>
- 块级元素，
布局：
- 使用
<div>元素 - 使用表格
<table> - https://www.runoob.com/html/html-layouts.html
表单
<form>来创建- method 属性指定 get 还是 post
- 默认：
- 值用 value
- 单选用 checked
- 下拉用 selected
- 内
<input />type=- 文本
text - 密码
password - 单选按钮
radio（写多个同 type，name 一样的为一组） - 复选框
checkbox - 文件器
file - 按钮
button - 提交
submit - 恢复默认初始值
reset
- 文本
框架
-
文本框
<textarea> -
下拉列表
<select>- 下拉列表的选项
<option>
- 下拉列表的选项
-
单选框
<radio-buttons> -
复选框
<checkbox> -
框架
<iframe src="url"></iframe>- width + height
- frameborder 属性用于定义 iframe 表示是否显示边框
- ="0" 就是无边框
颜色
- 三种颜色 红，绿，蓝的组合从 0 到 255，一共有 1600 万种不同颜色 ( 256 x 256 x 256 )
- 上图中的 6 位十六进制的颜色值部分可以写为 3 位十六进制的颜色值
- 如：红色的 6 位 #FF0000 ——> 3 位 #F00
- rgba 就是 RGB 拓展了 alpha 透明度
- 如：
background:rgba(255,0,0,0.5);
- 如：
字符实体
-
如：在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签
- 所以按字母缩写作为字符实体：
- lt：less than
- gt：greater than
-
HTML 字符实体
-
HTML 统一资源定位器（Uniform Resource Locators）
- 即 URL，语法规则：
scheme://host.domain:port/path/filename- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 runoob.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
- URL 只能使用 ASCII 字符集
- 即 URL，语法规则：
脚本
-
<script>标签用于定义客户端脚本，如 JavaScript -
<noscript>标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时 -
JavaScript 可以之间在 HTML 输出
document.write("<p>这是一个段落。</p>"); -
JavaScript 时间响应
<button type="button" onclick="myFunction()">点我！</button> -
JavaScript 处理 HTML 样式
document.getElementById("demo").style.color="#ff0000";<script> function myFunction() { x=document.getElementById("demo") // 找到元素 x.style.color="#ff0000"; // 改变样式 } </script> <button type="button" onclick="myFunction()">点击这里</button>
XHTML
-
XHTML：XML 格式编写的 HTML
-
小写字母 a：97
-
大写字母 A：65
-
数字 0：48
- 记住 0、A、a：469、857
JavaScript ( DOM 操作 )
-
直接写入 HTML 输出流
-
对事件的反应
-
改变 HTML 内容
-
改变 HTML 图像
-
改变 HTML 样式
-
验证输入
-
浏览器 <— HTTP 协议 —> 服务器
-
B / S 架构
-
90 年发明万维网
-
95 年 Java、PHP、JavaScript、某桌面编程等编程语言
- Java 詹姆斯高斯林
-
第一家纯软件公司 Oracle，为适应多系统而出多版本
- 之前的软件都是直接绑定到某版的硬件上，附属买卖
-
hao123 集众多网址为一页面，及其方便查找，后被百度收购
- 李兴平
-
-
<script>内编写var a=1;，var 是类型，实际由值决定-
输出 a：
- console.log(a) 控制器输出
- document.write(a) 直接写在页面上
- alert(a) 弹窗显示
-
创建一个对象
<head> <meta charset="utf-8"> <title></title> <script> var obj={ name:"zyz", age:30 } obj.gender="男"; alert(obj) // 弹窗: [object Object] alert(obj.name + "的性别为" + obj.gender) //弹窗: zyz的性别为男 var obj1 = "balabala" alert(obj1) // 运行后弹窗显示 function test(){ alert(obj) } test() // 执行方法 - 弹窗 function test1(func){ func() } test1(test) // 作用相当于直接用test() - 方法功能就是调用 test1(function(){ alert("匿名方法") }) test1() // 匿名函数调用 var test2=test1 // 函数和变量同层级,可以直接赋 // test2(); //同是匿名方法的调用 </script> </head> -
文本 val，块 text，属性 attr("","")，修饰 css("","")
<script> function shapeshifting0(){ var text_bs = document.getElementById("text_big"); alert("innerHTML - 带标签：" + text_bs.innerHTML); alert("innerText - 只文本：" + text_bs.innerText); } function shapeshifting1(){ var a = document.getElementById("mes"); a.innerHTML = "八嘎雅鹿！！！"; // 闭合标签所用 } function shapeshifting2(){ var bs = document.getElementsByTagName("div") // 多个内容 for (var i = 0; i < bs.length; i++) { bs[i].innerHTML = "八嘎雅鹿~~"; bs[i].style.color = "red"; bs[i].style.marginLeft = "50px"; // 要加双引号 } } function shapeshifting3(){ var c = document.getElementById("wenben01"); alert("input取值用value：" + c.value); c.value = "点击了阿妈粽!~"; // 改文本框内容 // 换图就改图片地址: var img = document.getElementById("img1"); img.setAttribute('src','img/bg2.gif'); alert(img.src); // http://127.0.0.1:8848/test01/img/bg2.gif var c1 = document.getElementById("text_small"); alert("非input的话取值用textContent：" + c1.textContent); } </script> </head> <body> <img src="img/bg1.gif" id="img1" /> <input type="text" class="wenben1" id="wenben01" /> <div id="text_big"><p id="text_small">bangbangbang</p></div> <button id="btn" onclick="shapeshifting0()">inner区别</button> <div id="mes">雅鹿~</div> <button id="btn" onclick="shapeshifting1()">变单</button> <div id="fanyi">八嘎</div> <div id="fanyi">八嘎</div> <button id="btn" onclick="shapeshifting2()">变多加左内边框</button> <button id="btn" onclick="shapeshifting3()">阿妈粽看取文本!</button> </body>
-
jQuery
-
jQuery 是一个 JavaScript 函数库，一个轻量级的"写的少，做的多"的 JavaScript 库，jQuery 库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
- 提示：除此之外，jQuery 还提供了大量的插件
-
下载引用，或者引用公共的
-
从 jquery.com 下载 jQuery 库
<script src="/js/jquery.js" ></script>
-
从 CDN （内容分发网络）中载入 jQuery, 如从 Google 中加载 jQuery
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>- 百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery
-
可浏览器查看当前用的版本
-
-
基础语法： $(selector).action()
-
所有 jQuery 函数位于一个 document ready 函数中：
-
文档就绪事件：
$(document).ready(function(){});
-
-
注意！！id 的话一定要加上#，标签的话什么都不用加，class 的就是点 .
-
jQuery 实现：
<script> $(document).ready(function(){ $("#btn").click(function(){ alert("不加参数显示值：" + $("#mes").text()); $("#mes").text("加参数就是修改参数(方法重载) - 非文本框用text"); $("#mes").css("margin-bottom","50px") $("#wenben").val("文本框用val"); // alert($("#img1").attr("src")); // 显图片路径 $("#img1").attr("src", "img/bg2.gif"); // 换图片 }); $("#btn_more").click(function(){ $("div").text("baga~"); }) }); </script> </head> <body> <img src="img/bg1.gif" id="img1" /> <input id="wenben" /> <p id="mes">雅鹿~</p> <button id="btn">改单值、换图片、加文本下内边距</button> <div id="fanyi">八嘎</div> <div id="fanyi">八嘎</div> <div id="fanyi">八嘎</div> <button id="btn_more">多个值改变</button> </body> -
拓展功能：
-
鼠标指向、导航栏获取焦点时变色
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <title>test01练习</title> <style> #menu{ /* 消去无序列表前面的黑点 */ list-style: none; } /* 组合选择器，可能会含有多个，如：#menu li .xx div ...... menu 中的li标签统一修饰 */ #menu li{ /* 横向排列设置浮动 */ float: left; /* 作为背景的话，就是以文字为主体，图片会不全 */ background: url(img/bg1.gif); /* 可以选择查看图片本身的大小 */ width: 103px; height: 33px; /* 加一点间隔 */ margin-left: 2px; /* 文本居中 */ text-align: center; line-height: 33px; /* 行高和背景图一致就是垂直居中 */ color: #fff; /* 白f, 黑0 */ /* font-weight: bold; */ font-size: 14px; } #menu .selected{ /* 虽然 .select 就可以，但为了对象选中时有正确的显示，就提高此选择器权重大小，从而提高其内属性的优先级 */ background: url(img/bg2.gif); color: yellow; font-weight: bold; } </style> <script> $(document).ready(function(){ $("#menu li").mouseover(function(){ // // 光标移入 // // $("#menu li").css("background", "url(img/bg2.gif)"); // 表示所有的对象了 // // $(this).css("background", "url(img/bg2.gif)"); // 用this表示当前事件作用的对象 // $(this).css("color", "yellow"); //字体颜色也改变 // $(this).css("font-weight", "bold"); //字体加粗 $(this).addClass("selected"); // 给选中对象增加class,就像是动态在标签后写了class="selected"一样 }) $("#menu li").mouseout(function(){ $(this).removeClass("selected"); }) }); // 简便方式 —— 单纯变色: // $("#img1").mouseover(function(){ // $(this).attr("src","img/bg2.gif") // }) // $("#img1").mouseout(function(){ // $(this).attr("src","img/bg1.gif") // }) </script> </head> <body> <ul id="menu"> <li>阿威十八式</li> <li>老汉推车</li> <li>x出</li> </ul> </body> </html>-
页面右击检查，在其中，在指向一个对象时，浏览器就会加以解释前端代码，渲染出效果：
-
权重：id 为 100；class 为 10；标签为 1。在组合选择器与其他选择器的重合部分，就是相加看权重大小，大的属性覆盖小的
-
-
CSS3
-
HTML 4 开始使用的 CSS3
-
使用方式：
- 内联样式，元素中使用
style属性，多个用分号隔开 - 内部样式表，
<head>中使用<style>来包含<style type="text/css">
- 外部引用，
<head>中使用外部 CSS（最好的方式）<link rel="stylesheet" type="text/css" href="mystyle.css">- 属性
stylesheet定义一个外部加载的样式表
- 内联样式，元素中使用
-
颜色：
- 背景颜色
background-color - 字体颜色
color
- 背景颜色
-
选择器
- 优先级 style > id > 类 > 标签
- 外部样式表与内部样式表同级，按先后顺序来决定，所以一般都是外部样式表
<link>放开头- 标签
- 类 class="def" —— .def
- id="abc" —— #abc
- 优先级不是按照整个选择器进行覆盖的，而是重复修饰的属性进行优先级的覆盖
-
left、right、top、bottom
- 外边距 margin，内边距 padding
- 相对于一个标签来说其 style，外边距是不享有其修饰的，内边距是享有 style 修饰的，不过是纯修饰无法加内容
- 上下左右，上下 + 左右，顺时针上 + 右 + 下 + 左
- 外边距 margin，内边距 padding