HTML+css+js学习

天下有敌 發表於 2026-1-20 18:39:00

<blockquote>
<p>供个人使用，学习自<code>菜鸟教程</code><br>
为了博客自定义设计，来系统学习下相关的HTML+css+js语法<br>
只是一个简单的语法了解</p>
</blockquote>
<hr>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>HTML语法学习<ul><li>基础</li><li>元素</li><li>属性</li><li>标题</li><li>文本格式化</li><li>链接</li><li>头部</li><li>css</li><li>脚本</li></ul></li><li>CSS学习<ul><li>CSS语法</li><li>id和class<ul><li>id 选择器</li><li>class 选择器</li></ul></li><li>css创建<ul><li>外部样式表</li><li>内部样式表</li><li>内联样式</li></ul></li><li>链接</li><li>边框</li><li>定位</li></ul></li><li>js学习<ul><li>输出</li><li>简单语法</li><li>变量</li><li>数据类型</li><li>对象<ul><li>访问对象</li></ul></li><li>函数</li><li>事件</li><li>语法<ul><li>ifelse</li><li>switch</li><li>for</li><li>while</li><li>break、continue</li><li>typeof</li></ul></li><li>错误</li></ul></li></ul></div><p></p>
<h1 id="html语法学习">HTML语法学习</h1>
<hr>
<p>html5(HyperText Markup Language/超文本标记语言)<br>
<strong>网页的[结构]和[内容]</strong> (网页的骨架)<br>
后缀<code>html</code>,<code>htm</code><br>
<img src="https://www.runoob.com/wp-content/uploads/2013/06/02A7DD95-22B4-4FB9-B994-DDB5393F7F03.jpg" alt="img" loading="lazy"></p>
<h2 id="基础">基础</h2>
<pre><code class="language-html"><h1>这是一个标题</h1>
<p>这是一个段落</p>
<a href="https://www.cnblogs.com/shenleblog/">这是一个链接</a>
<img src="https://www.runoob.com/wp-content/uploads/2013/06/02A7DD95-22B4-4FB9-B994-DDB5393F7F03.jpg" width="300" />

</code></pre>
<h2 id="元素">元素</h2>
<p>HTML 标签对大小写不敏感：</p><p> 等同于 </p><p>。</p>
<pre><code class="language-html"><p>这是第一个段落,p元素定义</p>

<body>
<p>这是第一个段落，body元素定义html文档主体</p>
</body>

<html>
<body>
<p>这是第一个段落，html元素定义html文档</p>
</body>
</html>

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
</code></pre>
<h2 id="属性">属性</h2>
<p>双引号，单引号都可</p>
<pre><code class="language-html"><a href='https://www.runoob.com'>链接</a>
<div id="header">标识符</div>
<p class="text highlight">类名</p>
<p style="color: blue; font-size: 14px;">css样式</p>
<abbr title="HyperText Markup Language">提示信息</abbr>
<div data-user-id="12345">存储自定义数据</div>
</code></pre>
<h2 id="标题">标题</h2>
<pre><code class="language-html"><h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
<h4>这是一个标题。</h4>
<h5>这是一个标题。</h5>
<h6>这是一个标题。</h6>
</code></pre>
<p><code><hr></code>等于md的<code>- - -</code>,分割水平线</p>
<h2 id="文本格式化">文本格式化</h2>
<pre><code class="language-html"><b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</code></pre>
<h2 id="链接">链接</h2>
<pre><code class="language-html"><a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="https://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
<a href="https://www.example.com" target="_blank" rel="noopener">新窗口打开 Example</a>
</code></pre>
<p>_blank: 在新窗口或新标签页中打开链接。<br>
_self: 在当前窗口或标签页中打开链接（默认）。<br>
_parent: 在父框架中打开链接。<br>
_top: 在整个窗口中打开链接，取消任何框架。</p>
<h2 id="头部">头部</h2>
<p><code><head></code> 元素包含了所有的头部标签元素。在 <code><head></code>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。</p>
<p>可以添加在头部区域的元素标签为: <code><title></code>, <code><style></code>, <code><meta></code>, <code><link></code>, <code><script></code>, <code><noscript></code>, <code><base></code>。</p>
<h2 id="css">css</h2>
<ol>
<li>内联样式，使用style属性</li>
</ol>
<pre><code class="language-html"><p style="color:blue;margin-left:20px;">这是一个段落。</p>
</code></pre>
<ol start="2">
<li>内部样式表，在head元素使用style标签</li>
</ol>
<pre><code class="language-html"><head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
</code></pre>
<ol start="3">
<li>外部样式表，使用link标签引入外部css文件</li>
</ol>
<pre><code class="language-html"><head>
<link rel="stylesheet" href="styles.css">
</head>
</code></pre>
<h2 id="脚本">脚本</h2>
<p><code><script></code> 标签用于定义客户端脚本，比如 JavaScript。<br>
<code><script></code> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。<br>
<code><noscript></code> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。</p>
<pre><code class="language-html"><script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
</code></pre>
<h1 id="css学习">CSS学习</h1>
<blockquote>
<p>先学一些基础点，大头之后查找相关文档即可</p>
</blockquote>
<hr>
<h2 id="css语法">CSS语法</h2>
<p>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:<br>
<img src="https://www.runoob.com/wp-content/uploads/2013/07/632877C9-2462-41D6-BD0E-F7317E4C42AC.jpg" alt="img" loading="lazy"><br>
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:</p>
<pre><code class="language-css">p
{
color:red;
text-align:center;
/*这是一个注释*/
}
</code></pre>
<h2 id="id和class">id和class</h2>
<h3 id="id-选择器">id 选择器</h3>
<p>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。<br>
CSS 中 id 选择器以 "#" 来定义。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
</code></pre>
<h3 id="class-选择器">class 选择器</h3>
<p>class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：</p>
<pre><code class="language-css">.center {text-align:center;}/*所有拥有 center 类的 HTML 元素均为居中。eg：<h1 class="center">标题居中</h1>*/

p.center {text-align:center;}/*所有的 p 元素使用 class="center" 让该元素的文本居中:*/
</code></pre>
<hr>
<h2 id="css创建">css创建</h2>
<ol>
<li>外部样式表(External style sheet)</li>
<li>内部样式表(Internal style sheet)</li>
<li>内联样式(Inline style)</li>
</ol>
<hr>
<p>（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式</p>
<hr>
<h3 id="外部样式表">外部样式表</h3>
<p>改变一个文件来改变整个站点的外观。每个页面使用 <code><link></code> 标签链接到样式表。 <code><link></code> 标签在（文档的）头部</p>
<pre><code class="language-html"><head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</code></pre>
<h3 id="内部样式表">内部样式表</h3>
<p>使用 <code><style></code> 标签在文档头部定义内部样式表</p>
<pre><code class="language-html"><head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
</code></pre>
<h3 id="内联样式">内联样式</h3>
<p>使用 <code>style</code> 属性为单个元素定义样式。</p>
<pre><code class="language-html"><p style="color:blue;margin-left:20px;">这是一个段落。</p>
</code></pre>
<h2 id="链接-1">链接</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link {color:#000000;text-decoration:none;background-color:#B2FF99;}    /* 未访问链接*/
a:visited {color:#00FF00;text-decoration:none;background-color:#FFFF85;}/* 已访问链接 */
a:hover {color:#FF00FF;text-decoration:underline;background-color:#FF704D;}/* 鼠标移动到链接上 */
a:active {color:#0000FF;text-decoration:underline;background-color:#FF704D;}/* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>
</code></pre>
<h2 id="边框">边框</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框</p>
</body>

</html>
</code></pre>
<h2 id="定位">定位</h2>
<h1 id="js学习">js学习</h1>
<h2 id="输出">输出</h2>
<p>使用 window.alert() 弹出警告框。<br>
使用 document.write() 方法将内容写到 HTML 文档中。<br>
使用 innerHTML 写入到 HTML 元素。<br>
使用 console.log() 写入到浏览器的控制台。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
<script>
document.write(Date());
</script>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>
</code></pre>
<h2 id="简单语法">简单语法</h2>
<table>
<thead>
<tr>
<th>语句</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>break</td>
<td>用于跳出循环。</td>
</tr>
<tr>
<td>catch</td>
<td>语句块，在 try 语句块执行出错时执行 catch 语句块。</td>
</tr>
<tr>
<td>continue</td>
<td>跳过循环中的一个迭代。</td>
</tr>
<tr>
<td>do ... while</td>
<td>执行一个语句块，在条件语句为 true 时继续执行该语句块。</td>
</tr>
<tr>
<td>for</td>
<td>在条件语句为 true 时，可以将代码块执行指定的次数。</td>
</tr>
<tr>
<td>for ... in</td>
<td>用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。</td>
</tr>
<tr>
<td>function</td>
<td>定义一个函数</td>
</tr>
<tr>
<td>if ... else</td>
<td>用于基于不同的条件来执行不同的动作。</td>
</tr>
<tr>
<td>return</td>
<td>返回结果，并退出函数</td>
</tr>
<tr>
<td>switch</td>
<td>用于基于不同的条件来执行不同的动作。</td>
</tr>
<tr>
<td>throw</td>
<td>抛出（生成）错误。</td>
</tr>
<tr>
<td>try</td>
<td>实现错误处理，与 catch 一同使用。</td>
</tr>
<tr>
<td>var</td>
<td>声明一个变量。</td>
</tr>
<tr>
<td>while</td>
<td>当条件语句为 true 时，执行语句块。</td>
</tr>
</tbody>
</table>
<h2 id="变量">变量</h2>
<ul>
<li>var：ES5 引入的变量声明方式，具有函数作用域。</li>
<li>let：ES6 引入的变量声明方式，具有块级作用域。</li>
<li>const：ES6 引入的常量声明方式，具有块级作用域，且值不可变。</li>
</ul>
<h2 id="数据类型">数据类型</h2>
<ul>
<li>值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。</li>
<li>引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。</li>
</ul>
<h2 id="对象">对象</h2>
<pre><code class="language-js">let person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
</code></pre>
<h3 id="访问对象">访问对象</h3>
<ul>
<li><code>person.lastName;</code>,</li>
<li><code>person["lastName"]; </code>.</li>
</ul>
<hr>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<pre><code class="language-js">var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
   return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</code></pre>
<h2 id="函数">函数</h2>
<pre><code class="language-html"><p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
</code></pre>
<pre><code class="language-html">
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</code></pre>
<h2 id="事件">事件</h2>
<p>HTML 事件是发生在 HTML 元素上的事情。<br>
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。</p>
<ul>
<li><code><some-HTML-element some-event='JavaScript 代码'></code></li>
<li><code><some-HTML-element some-event="JavaScript 代码"></code></li>
</ul>
<hr>
<pre><code class="language-html">
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

<button onclick="this.innerHTML=Date()">现在的时间是?</button>
</code></pre>
<table>
<thead>
<tr>
<th>事件</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>onchange</td>
<td>HTML 元素改变</td>
</tr>
<tr>
<td>onclick</td>
<td>用户点击 HTML 元素</td>
</tr>
<tr>
<td>onmouseover</td>
<td>鼠标指针移动到指定的元素上时发生</td>
</tr>
<tr>
<td>onmouseout</td>
<td>用户从一个 HTML 元素上移开鼠标时发生</td>
</tr>
<tr>
<td>onkeydown</td>
<td>用户按下键盘按键</td>
</tr>
<tr>
<td>onload</td>
<td>浏览器已完成页面的加载</td>
</tr>
</tbody>
</table>
<h2 id="语法">语法</h2>
<h3 id="ifelse">ifelse</h3>
<pre><code class="language-js">if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
document.write("<b>今天好</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
</code></pre>
<h3 id="switch">switch</h3>
<pre><code class="language-js">var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:
x="期待周末";
}
document.getElementById("demo").innerHTML=x;
</code></pre>
<h3 id="for">for</h3>
<pre><code class="language-js">for (var i=0; i<5; i++)
{
   x=x + "该数字为 " + i + "<br>";
}
</code></pre>
<pre><code class="language-js">//循环遍历对象 "person" 的属性
var person={fname:"Bill",lname:"Gates",age:56};

for (x in person)// x 为属性名
{
txt=txt + person;
}
</code></pre>
<h3 id="while">while</h3>
<pre><code class="language-js">while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
</code></pre>
<pre><code class="language-js">do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
</code></pre>
<h3 id="breakcontinue">break、continue</h3>
<pre><code class="language-js">for (i=0;i<10;i++)
{
if (i==3) break;
x=x + "The number is " + i + "<br>";
}
</code></pre>
<pre><code class="language-js">for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";
}
</code></pre>
<h3 id="typeof">typeof</h3>
<p>typeof 操作符来检测变量的数据类型。</p>
<table>
<thead>
<tr>
<th>表达式</th>
<th>返回值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>typeof undefined</td>
<td>"undefined"</td>
<td>未定义的值</td>
</tr>
<tr>
<td>typeof true</td>
<td>"boolean"</td>
<td>布尔值</td>
</tr>
<tr>
<td>typeof 42</td>
<td>"number"</td>
<td>所有数字类型</td>
</tr>
<tr>
<td>typeof "text"</td>
<td>"string"</td>
<td>字符串</td>
</tr>
<tr>
<td>typeof</td>
<td>"object"</td>
<td>对象、数组、null</td>
</tr>
<tr>
<td>typeof function(){}</td>
<td>"function"</td>
<td>函数</td>
</tr>
<tr>
<td>typeof Symbol()</td>
<td>"symbol"</td>
<td>ES6新增符号类型</td>
</tr>
<tr>
<td>typeof BigInt(10)</td>
<td>"bigint"</td>
<td>ES2020新增大整数类型</td>
</tr>
</tbody>
</table>
<h2 id="错误">错误</h2>
<ol>
<li>try 语句测试代码块的错误。</li>
<li>catch 语句处理错误。</li>
<li>throw 语句创建自定义错误。</li>
<li>finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。</li>
</ol>
<pre><code class="language-js">//finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
//throw 语句允许我们创建自定义错误。
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "值是空的";
if(isNaN(x)) throw "值不是一个数字";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "错误: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
</code></pre><br><br>
来源：https://www.cnblogs.com/shenleblog/p/19503919

頁: [1]

琼殿技术论坛's Archiver

HTML+css+js学习