前端学习——JavaScript&HTML&CSS

以前学习过，有一定的基础，对于之前不清楚的做个快速的梳理，打好基础。

查看：https://www.w3school.com.cn/js/index.asp

1 JavaScript

1.1 输出

<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;//访问 HTML 元素
document.write(5 + 6);//一般用于测试
window.alert(5 + 6);//弹出警告框显示数据
console.log(5 + 6);//写入浏览器控制台
</script>
</body>
</html>

1.2 值、变量及数据类型

  • 字符串是文本，由双引号或单引号包围
  • 用var关键词来声明变量
  • 值可以是多种类型，比如数值和字符串。例如
    x = "Bill" + " " + "Gates"; //"Bill Gates"
    x = 3 + 5 + "8"; //"88"
    x = "8" + 3 + 5; //"835"
  • JavaScript 拥有动态类型。这意味着相同变量可用作不同类型。
  • 超大或超小的数值可以用科学计数法来写。
var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123
  • null 的数据类型是对象,您可以通过设置值为null清空对象,可以通过设置值为undefined清空对象。
原始数据 复杂数据
string，number，boolean，undefined function，object
  • 对象也是变量。但是对象包含很多值。
var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //	把 z 声明为 Boolean 对象

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
  • 在函数定义中，this 引用该函数的“拥有者”。
  • 如果您不使用()访问方法，则将返回函数定义。
  • 反斜杠转义字符把特殊字符转换为字符串字符：单引号、双引号、反斜杠。

1.3 字符串

代码 结果 代码 结果 代码 结果
\' 单引号 \f 换页 \b 退格键
\" 双引号 \n 新行 \t 水平制表符
\\ 反斜杠 \r 回车 \v 垂直制表符
  • 不要把字符串创建为对象。它会拖慢执行速度。new 关键字使代码复杂化。也可能产生一些意想不到的结果。
  • 当使用==相等运算符时，相等字符串是相等的；当使用===运算符时，相等字符串是不相等的，因为===运算符需要类型和值同时相等。JavaScript 对象无法进行对比。
  • 内建属性length可返回字符串的长度。
  • indexOf() 方法返回字符串中指定文本首次出现的索引（位置）；lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引。两种方法都接受作为检索起始位置的第二个参数。
  • search() 方法搜索特定值的字符串，并返回匹配的位置。
    提取部分字符串
  • 有三种提取部分字符串的方法：
//省略第二个参数，则将裁剪字符串的剩余部分
slice(start, end); 
substring(start, end); 
substr(start, length);
  • 替换字符串内容:replace() 方法,默认只替换首个匹配（替换所有匹配，请使用正则表达式的 /g ），对大小写敏感（大小写不敏感，正则表达式 /i）。
  • 大写和小写互相转换
toUpperCase(); //转大
toLowerCase(); //转小

1.4 数组

  • toString() 把数组转换为数组值（逗号分隔）的字符串。
  • join() 方法也可将所有数组元素结合为一个字符串，可以规定分隔符。
  • Popping() 和 Pushing() ：从数组弹出项目，或向数组推入项目。(数组结尾)
  • shift() 会删除首个数组元素，并把所有其他元素“位移”到更低的索引;unshift() 向数组添加新元素，并“反向位移”旧元素。（数组开头）
  • 使用delete 来删除，留下的未定义的空洞，使用 pop() 或 shift() 取而代之。
  • splice() 方法可用于向数组添加新项。在数组中不留“空洞”的情况下移除元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

1.5 表单

表单验证

数据验证

  • 数据验证指的是确保干净、正确和有用的用户输入的过程。
    • 服务器端验证是由 web 服务器执行的，在输入被送往服务器之后。
    • 客户端验证是由 web 浏览器执行的，在输入被送往 web 服务器之前。
  • HTML约束验证
    • checkValidity() 方法，如果输入字段包含无效的数据，显示一条消息。
    • rangeOverflow，设置为 true，如果元素值大约其 max 属性。
    • rangeUnderflow,设置为 true，如果元素值小于其 min 属性。
    • ......

2 Html

2.1 html属性

  • HTML 链接 <a href="http://www.w3school.com.cn">This is a link</a>
  • 创建水平线 <hr />
  • 注释 <!-- This is a comment -->
  • 粗体 <b>This text is bold</b>
  • <sub>定义下标字,<sup>定义上标字。
  • 表格（先行后列）
table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
  • 无序/有序表单
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
  • <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器，没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，可用于对大的内容块设置样式属性。另一个常见的用途是文档布局。【例子】
  • <span> 元素是行内元素，能够用作文本的容器.【例子】

2.2 HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

3 CSS

层叠样式表 (Cascading Style Sheets)

3.1 基础

语法

  • CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。
h1 {color:red; font-size:14px;}
h1,h2,h3,h4,h5,h6 {color: green;}
  • 根据 CSS，子元素从父元素继承属性。子元素将继承最高级元素（如 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd），不需要另外的规则。若创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则。

3.2 选择器

3.2.1 派生选择器

  • 通过依据元素在其位置的上下文关系来定义样式。
li strong {
    font-style: italic;
    font-weight: normal;
  }

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

3.2.2 id选择器

  • 为标有特定 id 的 HTML 元素指定特定的样式。以 "#" 来定义。
#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
  • id 选择器常常用于建立派生选择器。以下样式只会应用于出现在 id 是 sidebar 的元素内的段落。
#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

3.2.3 类选择器

  • h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
.center {text-align: center}

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>
  • 也可被用作派生选择器
.fancy td {
	color: #f60;
	background: #666;
	}

3.2.4 属性选择器

  • 为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
[title]{color:red;}

[title~=hello] { color:red; }
[lang|=en] { color:red; }

3.2.5 后代选择器

h1 em {color:red;}

3.2.6 子元素选择器

h1 > strong {color:red;}

3.2.7 相邻兄弟选择器

  • 需要选择紧接在另一个元素后的元素，而且二者有相同的父元素
h1 + p {margin-top:50px;}

3.2.7 伪类

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

3.3 如何创建 CSS

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

3.3.1 外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

3.3.2 内部样式表

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

3.3.3 内联样式

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

4 如何设计一个导航栏

<!DOCTYPE html>
<html>
<head>
<style>
ul
{ //从列表中去掉圆点和外边距
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
 //让所有链接拥有相等的宽度，浮动 <li> 元素并规定 <a> 元素的宽度
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
 posted on 2020-04-07 19:55  捞起月亮的渔民  阅读(340)  评论(0)  编辑  收藏  举报