静待湾归 發表於 2020-4-7 19:55:00

前端学习——JavaScript&HTML&CSS

<p>以前学习过，有一定的基础，对于之前不清楚的做个快速的梳理，打好基础。</p>
<hr>
<p>查看：https://www.w3school.com.cn/js/index.asp</p>
<h2 id="1-javascript">1 JavaScript</h2>
<h3 id="11-输出">1.1 输出</h3>
<pre><code>&lt;html&gt;
&lt;body&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
document.getElementById("demo").innerHTML = 5 + 6;//访问 HTML 元素
document.write(5 + 6);//一般用于测试
window.alert(5 + 6);//弹出警告框显示数据
console.log(5 + 6);//写入浏览器控制台
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3 id="12-值变量及数据类型">1.2 值、变量及数据类型</h3>
<ul>
<li>字符串是文本，由双引号或单引号包围</li>
<li>用<code>var</code>关键词来声明变量</li>
<li>值可以是多种类型，比如数值和字符串。例如</li>
</ul>
<pre><code>    x = "Bill" + " " + "Gates"; //"Bill Gates"
    x = 3 + 5 + "8"; //"88"
    x = "8" + 3 + 5; //"835"
</code></pre>
<ul>
<li>JavaScript 拥有动态类型。这意味着相同变量可用作不同类型。</li>
<li>超大或超小的数值可以用科学计数法来写。</li>
</ul>
<pre><code>var y = 123e5;      // 12300000
var z = 123e-5;   // 0.00123
</code></pre>
<ul>
<li>null 的数据类型是对象,您可以通过设置值为<code>null</code>清空对象,可以通过设置值为<code>undefined</code>清空对象。</li>
<li></li>
</ul>
<table>
<thead>
<tr>
<th>原始数据</th>
<th>复杂数据</th>
</tr>
</thead>
<tbody>
<tr>
<td>string，number，boolean，undefined</td>
<td>function，object</td>
</tr>
</tbody>
</table>
<ul>
<li>对象也是变量。但是对象包含很多值。</li>
</ul>
<pre><code>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;
}
};
</code></pre>
<ul>
<li>在函数定义中，<code>this</code> 引用该函数的“拥有者”。</li>
<li>如果您不使用<code>()</code>访问方法，则将返回函数定义。</li>
<li>反斜杠转义字符把特殊字符转换为字符串字符：单引号、双引号、反斜杠。</li>
</ul>
<h3 id="13-字符串">1.3 字符串</h3>
<ul>
<li></li>
</ul>
<table>
<thead>
<tr>
<th>代码</th>
<th>结果</th>
<th>代码</th>
<th>结果</th>
<th>代码</th>
<th>结果</th>
</tr>
</thead>
<tbody>
<tr>
<td>\'</td>
<td>单引号</td>
<td>\f</td>
<td>换页</td>
<td>\b</td>
<td>退格键</td>
</tr>
<tr>
<td>\"</td>
<td>双引号</td>
<td>\n</td>
<td>新行</td>
<td>\t</td>
<td>水平制表符</td>
</tr>
<tr>
<td>\\</td>
<td>反斜杠</td>
<td>\r</td>
<td>回车</td>
<td>\v</td>
<td>垂直制表符</td>
</tr>
</tbody>
</table>
<ul>
<li>不要把字符串创建为对象。它会拖慢执行速度。new 关键字使代码复杂化。也可能产生一些意想不到的结果。</li>
<li>当使用<code>==</code>相等运算符时，相等字符串是相等的；当使用<code>===</code>运算符时，相等字符串是不相等的，因为<code>===</code>运算符需要类型和值同时相等。JavaScript 对象无法进行对比。</li>
<li>内建属性<code>length</code>可返回字符串的长度。</li>
<li><code>indexOf()</code> 方法返回字符串中指定文本首次出现的索引（位置）；<code>lastIndexOf()</code> 方法返回指定文本在字符串中最后一次出现的索引。两种方法都接受作为检索起始位置的第二个参数。</li>
<li><code>search() </code>方法搜索特定值的字符串，并返回匹配的位置。<br>
提取部分字符串</li>
<li>有三种提取部分字符串的方法：</li>
</ul>
<pre><code>//省略第二个参数，则将裁剪字符串的剩余部分
slice(start, end);
substring(start, end);
substr(start, length);
</code></pre>
<ul>
<li>替换字符串内容:<code>replace() </code>方法,默认只替换首个匹配（替换所有匹配，请使用正则表达式的 /g ），对大小写敏感（大小写不敏感，正则表达式 /i）。</li>
<li>大写和小写互相转换</li>
</ul>
<pre><code>toUpperCase(); //转大
toLowerCase(); //转小
</code></pre>
<h3 id="14-数组">1.4 数组</h3>
<ul>
<li><code>toString()</code> 把数组转换为数组值（逗号分隔）的字符串。</li>
<li><code>join()</code> 方法也可将所有数组元素结合为一个字符串，可以规定分隔符。</li>
<li><code>Popping() </code>和 <code>Pushing() </code>：从数组弹出项目，或向数组推入项目。(数组结尾)</li>
<li><code>shift() </code>会删除首个数组元素，并把所有其他元素“位移”到更低的索引;<code>unshift() </code>向数组添加新元素，并“反向位移”旧元素。（数组开头）</li>
<li>使用<code>delete </code>来删除，留下的未定义的空洞，使用 pop() 或 shift() 取而代之。</li>
<li><code>splice() </code>方法可用于向数组添加新项。在数组中不留“空洞”的情况下移除元素。</li>
</ul>
<pre><code>var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
</code></pre>
<h3 id="15-表单">1.5 表单</h3>
<h4 id="表单验证">表单验证</h4>
<ul>
<li>如果某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交出：https://www.w3school.com.cn/tiy/t.asp?f=js_validation_js</li>
</ul>
<h4 id="数据验证">数据验证</h4>
<ul>
<li>数据验证指的是确保干净、正确和有用的用户输入的过程。
<ul>
<li>服务器端验证是由 web 服务器执行的，在输入被送往服务器之后。</li>
<li>客户端验证是由 web 浏览器执行的，在输入被送往 web 服务器之前。</li>
</ul>
</li>
<li>HTML约束验证
<ul>
<li><code>checkValidity()</code> 方法，如果输入字段包含无效的数据，显示一条消息。</li>
<li><code>rangeOverflow</code>，设置为 true，如果元素值大约其 max 属性。</li>
<li><code>rangeUnderflow</code>,设置为 true，如果元素值小于其 min 属性。</li>
<li>......</li>
</ul>
</li>
</ul>
<h2 id="2-html">2 Html</h2>
<h3 id="21-html属性">2.1 html属性</h3>
<ul>
<li>HTML 链接 <code>&lt;a href="http://www.w3school.com.cn"&gt;This is a link&lt;/a&gt;</code></li>
<li>创建水平线 <code>&lt;hr /&gt;</code></li>
<li>注释 <code>&lt;!-- This is a comment --&gt;</code></li>
<li>粗体 <code>&lt;b&gt;This text is bold&lt;/b&gt;</code></li>
<li><code>&lt;sub&gt;</code>定义下标字,<code>&lt;sup&gt;</code>定义上标字。</li>
<li>表格（先行后列）</li>
</ul>
<pre><code>table border="1"&gt;
&lt;tr&gt;
&lt;td&gt;row 1, cell 1&lt;/td&gt;
&lt;td&gt;row 1, cell 2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;row 2, cell 1&lt;/td&gt;
&lt;td&gt;row 2, cell 2&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>
<ul>
<li>无序/有序表单</li>
</ul>
<pre><code>&lt;ul&gt;
&lt;li&gt;Coffee&lt;/li&gt;
&lt;li&gt;Milk&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;Coffee&lt;/li&gt;
&lt;li&gt;Milk&lt;/li&gt;
&lt;/ol&gt;

</code></pre>
<ul>
<li><code>&lt;div&gt;</code> 元素是块级元素，它是可用于组合其他 HTML 元素的容器，没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，可用于对大的内容块设置样式属性。另一个常见的用途是文档布局。【例子】</li>
<li><code>&lt;span&gt; </code>元素是行内元素，能够用作文本的容器.【例子】</li>
</ul>
<h3 id="22-html框架">2.2 HTML框架</h3>
<p>通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。</p>
<pre><code>&lt;frameset cols="25%,75%"&gt;
   &lt;frame src="frame_a.htm"&gt;
   &lt;frame src="frame_b.htm"&gt;
&lt;/frameset&gt;
</code></pre>
<h2 id="3-css">3 CSS</h2>
<p>层叠样式表 (Cascading Style Sheets)</p>
<h3 id="31-基础">3.1 基础</h3>
<h4 id="语法">语法</h4>
<ul>
<li>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。</li>
</ul>
<pre><code>h1 {color:red; font-size:14px;}
h1,h2,h3,h4,h5,h6 {color: green;}
</code></pre>
<ul>
<li>根据 CSS，子元素从父元素继承属性。子元素将继承最高级元素（如 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd），不需要另外的规则。若创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则。</li>
</ul>
<h3 id="32-选择器">3.2 选择器</h3>
<h4 id="321-派生选择器">3.2.1 派生选择器</h4>
<ul>
<li>通过依据元素在其位置的上下文关系来定义样式。</li>
</ul>
<pre><code>li strong {
    font-style: italic;
    font-weight: normal;
}
</code></pre>
<pre><code>&lt;p&gt;&lt;strong&gt;我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;我是斜体字。这是因为 strong 元素位于 li 元素内。&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;我是正常的字体。&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
<h4 id="322-id选择器">3.2.2 id选择器</h4>
<ul>
<li>为标有特定 id 的 HTML 元素指定特定的样式。以 "#" 来定义。</li>
</ul>
<pre><code>#red {color:red;}
#green {color:green;}
</code></pre>
<pre><code>&lt;p id="red"&gt;这个段落是红色。&lt;/p&gt;
&lt;p id="green"&gt;这个段落是绿色。&lt;/p&gt;
</code></pre>
<ul>
<li>id 选择器常常用于建立派生选择器。以下样式只会应用于出现在 id 是 sidebar 的元素内的段落。</li>
</ul>
<pre><code>#sidebar p {
        font-style: italic;
        text-align: right;
        margin-top: 0.5em;
        }
</code></pre>
<h4 id="323-类选择器">3.2.3 类选择器</h4>
<ul>
<li>h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。</li>
</ul>
<pre><code>.center {text-align: center}
</code></pre>
<pre><code>&lt;h1 class="center"&gt;
This heading will be center-aligned
&lt;/h1&gt;

&lt;p class="center"&gt;
This paragraph will also be center-aligned.
&lt;/p&gt;
</code></pre>
<ul>
<li>也可被用作派生选择器</li>
</ul>
<pre><code>.fancy td {
        color: #f60;
        background: #666;
        }
</code></pre>
<h4 id="324-属性选择器">3.2.4 属性选择器</h4>
<ul>
<li>为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。</li>
</ul>
<pre><code>{color:red;}
</code></pre>
<pre><code> { color:red; }
{ color:red; }
</code></pre>
<h4 id="325-后代选择器">3.2.5 后代选择器</h4>
<pre><code>h1 em {color:red;}
</code></pre>
<h4 id="326-子元素选择器">3.2.6 子元素选择器</h4>
<pre><code>h1 &gt; strong {color:red;}
</code></pre>
<h4 id="327-相邻兄弟选择器">3.2.7 相邻兄弟选择器</h4>
<ul>
<li>需要选择紧接在另一个元素后的元素，而且二者有相同的父元素</li>
</ul>
<pre><code>h1 + p {margin-top:50px;}
</code></pre>
<h4 id="327-伪类">3.2.7 伪类</h4>
<pre><code>a:link {color: #FF0000}                /* 未访问的链接 */
a:visited {color: #00FF00}        /* 已访问的链接 */
a:hover {color: #FF00FF}        /* 鼠标移动到链接上 */
a:active {color: #0000FF}        /* 选定的链接 */
</code></pre>
<pre><code>a.red : visited {color: #FF0000}
&lt;a class="red" href="css_syntax.asp"&gt;CSS Syntax&lt;/a&gt;
</code></pre>
<h3 id="33-如何创建-css">3.3 如何创建 CSS</h3>
<p>如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。</p>
<h4 id="331-外部样式表">3.3.1 外部样式表</h4>
<pre><code>&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="mystyle.css" /&gt;
&lt;/head&gt;
</code></pre>
<h4 id="332-内部样式表">3.3.2 内部样式表</h4>
<pre><code>&lt;head&gt;
&lt;style type="text/css"&gt;
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
&lt;/style&gt;
&lt;/head&gt;
</code></pre>
<h4 id="333-内联样式">3.3.3 内联样式</h4>
<pre><code>&lt;p style="color: sienna; margin-left: 20px"&gt;
This is a paragraph
&lt;/p&gt;
</code></pre>
<h2 id="4-如何设计一个导航栏">4 如何设计一个导航栏</h2>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
ul
{ //从列表中去掉圆点和外边距
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
//让所有链接拥有相等的宽度，浮动 &lt;li&gt; 元素并规定 &lt;a&gt; 元素的宽度
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;
}

&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#news"&gt;News&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre><br><br>
来源：https://www.cnblogs.com/20199321zjy/p/12654881.html
頁: [1]
查看完整版本: 前端学习——JavaScript&HTML&CSS