（前端）（第一章）HTML（超文本标记语言）的基本代码编写

最新推荐文章于 2024-09-14 08:09:14 发布

今天肚书谁跟！

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量1.7k

点赞数 24

文章标签： html 前端

本文链接：https://blog.csdn.net/tangdoubx95/article/details/140724091

版权

书本教的用VScode，但我用的是pycharm，都行，你能在html文件写代码就行，注意了是html，不是js！！！！那个大纲就别看了，反正12345都写的蛮规矩的，偷个懒，就不写了。

1、当你想强调的时候

<em>this text is emphasized.</em> this text is not.

2、其他的格式化文本（斜体、加粗、变小、删除线、下划线、高亮强调）

注意了这个 是换行，这是一个标签

<em>this text is emphasized.</em>
this is <em>emphasized</em><br>
this is <i>italic</i><br>
this is <strong>strong</strong><br>
this is <b>bold</b><br>
this is <small>small</small><br>
this is <del>deleted</del><br>
this is <ins>inserted</ins><br>
this is <u>underlined</u><br>
this is <mark>marked</mark><br>

有些输出的结果很相像，比如和斜体都是斜体输出了，粗体、斜体和下划线被认为比一般的标签，比如强调或者着重的作用要小。因为如果浏览器无法生成斜体字符，那么要求以斜体显示的请求不会生效。

另外可以大小或者小写or大小写组合，比如和和这三个标签显示的结果都是一样的。

3、标签可以嵌套

<em>this is emphasized <strong>this is strong and emphasized</strong></em>

4、显示<（小于号）和>（大于号）

&lt是<，应该缩写是less than（注意了这是LLLLLL，不是iiiiiii）

&gt是>，应该缩写是greater than

this is a less than: &lt;symbol and this is a greater than &gt; symbol

5、&符号的显示

&amp

this is an ampersand: &amp;

6、在这个网站可以找到符号和名称的列表：https://dev.w3.org/html5/html-author/charref

比如

&Eacute;<br>

&eacute;<br>

显示：

以上html会显示大写的E和小写e版本的eacute。

7、添加表情符号

Happy face: &#128540;<br>

我是偷懒在文件预览上面截图，正常html显示应该是黄色的happyface。还是不偷懒了。

表情符号网站：The Ultimate Emoji Guide: Meanings, Pictures, Codes and Cheatsheets

8、以段落形式编排文本

和可以包围起来一个段落的文本
比如

<p>hello





world</p>

有开始和结束符号即可。

但是这个有行距。和 标签有不一样的地方。比如：

<p>this is 1 duan</p>
<p>this is 2 duan</p>

是有行距吧！

9、创建标题

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>hahahahhahaha</p>

10、使用预格式化文本

有时，一些内容可能已经格式化完成了，在这种情况下可以用<pre>标签来告诉浏览器不要进行任何布局。

<pre>
    this text
        is rendered
            exactly how i wrote it.
</pre>

<pre>标签所包含的文本由浏览器显示，格式没有任何改变。

浏览器在显示预设格式化文本时使用等宽字体，在等宽字体中，所有字符的宽度都是一样的。许多字体，包括用于打印本段的字体，是按比例排列的，这意味着每个字符都有特定的宽度，例如I字符比m字符小得多，然而，对于ASCII艺术等文本来说，所有的字符都排成一行是很重要的。如果不用等宽字体来显示，就会看起来很奇怪。

另外如果你的ASCII艺术字是有<（小于号）或者>（大于号），请按照以上的&lt和&gt来编写代码。

比如这是我的艺术字：

<p>my logo</p>
<pre>
     _          _                                        __  __                          _
    / \      __| |  _ __  (_)   __ _   _ __     __ _    |  \/  |  _   _   _ __   _ __   | |__    _   _
   / _ \    / _` | | '__| | |  / _` | | '_ \   / _` |   | |\/| | | | | | | '__| | '_ \  | '_ \  | | | |
  / ___ \  | (_| | | |    | | | (_| | | | | | | (_| |   | |  | | | |_| | | |    | |_) | | | | | | |_| |
 /_/   \_\  \__,_| |_|    |_|  \__,_| |_| |_|  \__,_|   |_|  |_|  \__,_| |_|    | .__/  |_| |_|  \__, |
                                                                                |_|              |___/
</pre>

我的艺术字是没有<和>的，所以不用转，但是如果你想要，而且有，就要转换一下。

11、注意格式。（标签的错误）

总的来是就是镶嵌标签的时候，注意包围范围不要包括了另外一个标签。

就内嵌了。

正确的如下：

<em>Emphasized <strong>strongly emphasized</strong></em><strong> just strong</strong>

正确的显示结果：

12、为HTML文档添加注释

用

<!-- this is zhushi -->

就变成灰色了。

13、在网页中添加图像

<img src="xxxx.jpg">
<img src="xxxx.jpg" alt="hahahahhahaahahhaha">

但是确保把图像文件保存在服务器上，否则图像无法显示。

另外alt的意思是，如果浏览器找不到图片，会显示alt里面的文本信息。

可以使用html布局标签排版，结合<h1></h1>和和这种，做成一个漂亮的页面。

14、图像像素宽高。

用width和height即可。

<img src="xxxx.jpg" alt="hahahahhahaahahhaha" width="400">

但是可能会造成限制，一个页面应该在任何设备商以有用的方式显示。一张400像素的图片对于小型设备来说可能没问题，但是在大型显示器中显示，图片就会变得很小。

15、HTML文档

<!DOCTYPE html><!--这里表示的是一个html文档-->
<html lang="en"><!--带有语言属性的HTML标签-->
<head><!--网页标题的开头-->
    <meta charset="UTF-8"><!--格式-->
    <title>Title</title><!--标题-->
</head><!--网页标题的结束-->
<body><!--网页正文的开始-->

</body><!--正文的结束-->
</html><!--html文档的结束-->

浏览器会在开头找<!DOCTYPE html>序列，以确认它在读HTML文件哈。</html>标签包含lang属性，制定了页面的语言，语言"en"为英语。其他的自己看上面的注释。

16、链接html文档

html文档可以包含链接到其他文档的元素。其他文档既可以在同一个服务器上，也可以完全在另外一个服务器上。链接是使用<a>标签创建的，该标签有一个包含目标页面URL的href属性：

Click on <a href="otherpage.html">this link</a>to open another page.

<a>标签中的文本是浏览器将高亮显示为链接的文本。this link是可链接的文本，会让页面上的文本看起来像下面这样：

浏览器点击了该链接就会打开一个本地文件，这里的案例是openpage.html的文件，该文件将会被显示。链接的可以是另一个网站上的完全不同的页面：

<p>Click on <a href="https://blog.csdn.net/tangdoubx95?spm=1000.2115.3001.5343">this link</a> to go to my blog.</p>

17、创建交互式网页（比如按钮、读取用户的输入...）

JavaScript程序可以与html页面设计元素共存。在第一章，用浏览器中的开发者视图来看hello.html网页中的隐藏程序，就可以看到。那个html文件包含一个script元素，里面有些JavaScript代码，可以用控制台来运行一个JavaScript函数。现在通过点击按钮来触发函数。

①用按钮

这个html代码创建了一个包含say hello文本的按钮：

<button onclick="doSayHello();">Say Hello</button>

这个按钮有onclick属性。JavaScript有个好处就是名字在大多数都有意义，onclick属性指定了当按钮被点击时要调用的函数。在这个例子里onclick属性制定了一个名为doSayHello的JavaScript函数。一个JavaScript函数是一连串被命名的JavaScript语句（第七章中将详细介绍函数）。

function doSayHello() {
    alert("Hello");
}

这里函数只执行一个动作，当它被调用的时候，会显示一个对用户说“Hello”的提示框。显示提示的那一行JS被称为语句，语句的结尾用分号标记。一个函数可以包含许多语句，每个语句都以分号；结束。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ch02-06 Buttons</title>
</head>


<body>
<h1>Buttons</h1>
<p>
  <button onclick="doSayHello();">Say Hello</button><!--这里是按钮啦-->
</p>
<script>
  function doSayHello(){<!--这里具体的doSayHello函数的JS语句-->
    alert("Hello");<!--点击了按钮就会显示Hello-->
  }
</script>
</body>
</html>

注意了这个<script>元素位于文档正文的底部，也就是body这一块里面的最底部。

② 读取用户的输入

button标签在网页中创建一个响应用户动作的元素。我们需要从用户那边获得输入。用input标签即可：

<input type="text" id="alertText" value="Alert!">

type:属性告诉浏览器正在读取的输入的类型。在前面的代码中，我们正在读取文本，所以属性类型被设置为text。如果把type属性设置为password，那么在输入的时候，输入的内容就会替换成其他的字符：*或者.

id:属性给元素一个独特的名称，这个名称可以在js代码中被用来定位这个元素。如果我们有两个输入元素，那么每个元素将有不同的名字。我们把这个元素命名为alertText,因为可以反映它的用途。

value:属性指定了元素标签中的值。这就是我们如何用文本预填充一个输入。当这个输入元素被显示时，就有文本“Alert”显示，就是默认初始值吧你可以这么想。如果想这个输入在现实的时候是空白，就可以设置为空字符串。

偷懒用了上面的代码修改了一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>


<body>
<h1>Buttons</h1>
<p>
    <input type="text" id="alertInputText" value="Alert!"><!--读取用户的输入-->
    <button onclick="doShowAlert();">Show Alert</button><!--这里是按钮啦-->
</p>
<script>
  function doShowAlert(){<!--这里具体的doShowAlert函数的JS语句-->
    var element = document.getElementById("alertInputText");alert(element.value);
  }
</script>
</body>
</html>

这个网页包含了输入元素，一个调用函数来显示提示框的按钮元素以及在提示框中使用输入文本的函数。用户可以在输入框中输入自己的文本，然后按下ShowAlert按钮，让文本显示在提示框中。

18、HTML和JavaScript

JS程序需要和它所属的html文档进行交互，这个交互操作由方法提供，这些方法是文档对象模型（DOM）的一部分，浏览器为表示它向用户显示的HTML文档而创建DOM。DOM是一个软件对象，保存在计算机的内存中。DOM包含的方法与构成页面的HTML元素并列。我们的程序用getElementByID方法来获得页面元素的引用，然后它从这个元素中获取文本，并在提示框中显示这个文本。

简单的来说， getElementByID方法是JS程序询问文档（html）中某个元素在哪里的手段，ID是独特的，元素可以被赋予ID，每个人都只有一个身份证对吧？那么通过身份证可以找到我们。

var element = document.getElementById("alertInputText");

在前面语句的右侧，用getElementByID来获得具有alertInputText ID的文本元素的位置，语句的左侧创建了一个变量来保存这个位置。var这个词创建了一个JS变量，变量是一个呗命名的位置，用来存储程序内一些重要的信息。

element是我为正在创建的变量创造的名字，因为是文档中的一个元素，它的值是文本输入元素的位置。这个操作被称作为赋值，因为程序正在给一个变量赋值。赋值操作用等号=来表示。

再比如，程序有个叫element的变量，其中包含对输入的引用，我们可以从这个元素中提取文本中，并且存储在一个名为message的变量中：

var message = element.value;

现在，名为message的变量包含用户输入的文本（我们在html文档中把它设置为Alert!）。程序现在可以在提示框中显示这个文本；

alert(message);

等号（=）意味着“将这个变量设置为数值”。

代码分析

①doShowAlert函数

function doShowAlert(){<!--这里具体的doShowAlert函数的JS语句-->
    var element = document.getElementById("alertInputText");
    var message = element.value;
    alert(message);
  }

doShowAlert函数要求getElementById找到一个alertInputText ID的元素，如果这个契约因为元素的名字比对而被破坏，比如alertInput-Text，那么getElementById方法将无法提供结果，你连名牌号都是错的我怎么找到正确的地址，就这个意思，这样的情况下，getElementById方法会返回一个名为null的特殊值，意味着找不到。这将导致doShowAlert函数的其余部分失效。

19、显示文本输出

js程序可以使用对一个对象的引用来改变元素的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<h1>Paragraph Update</h1>
<p>
    <input type="text" id="inputText" value=""><!--读取用户的输入 也就是输入文本元素-->
    <button onclick="doUpdateParagraph();">Update the Paragraph</button><!--调用doUpdateParagraph的按钮-->
    <p id="outputParagraph"></p><!--输出段落-->
</p>
<script>
    function doUpdateParagraph() {<!--更新段落的函数-->
        var inputElement = document.getElementById("inputText");<!--获取对输入的引用-->
        var outputElement = document.getElementById("outputParagraph");<!--获取对输出的引用-->
        
        var message = inputElement.value;<!--读取输入的文本-->
        outputElement.textContent = message;<!--将文本写入输出中-->
    }
</script>
</body>
</html>

        var inputElement = document.getElementById("inputText");<!--获取对输入的引用-->
        var outputElement = document.getElementById("outputParagraph");<!--获取对输出的引用-->
        
        var message = inputElement.value;<!--读取输入的文本-->
        outputElement.textContent = message;<!--将文本写入输出中-->

前两行设置了指向输入和输出元素的变量，第三行获取要显示的信息，第四行将此信息放到网页上。

20、使用对象属性

①textContent属性。

这是我们程序中的语句，它获得了对文档中outputParagraph的引用。我们现在有一个叫outputElement的变量，指向输出段落。可以用使用新的变量来证明这一点

var outputElement = document.getElementByID("outputParagraph")
outputElement.textContent = "fred";

重新查看这个网页就可以看到fred这个词已经出现了，因为是通过设置这个段落的TextContent属性的值，可以改变段落中的文本。JS程序既可以读取属性，也可以书写属性。

alert(outputElement.textContent);

随后将出现一个提示框，里面是“fred”（因为那是outputElement指向的元素的textContent）。

但是如果写错了textContent这个词会怎么样

outputElement.tetContent="test";

比如改成了tetContent，段落里并没有tetContent属性，但是是没有错的，test这个结果也是可以显示，因为js为outputElement变量创建了一个新的属性，这个新的属性成为tetContent，值被设置为test，可以通过输入以下内容证明。

alert(outputElement.tetContent);

②计时器

假如要设置一个五分钟的计时器，可以用setTimeout的JS函数来做到这一点。

setTimeout(doEndTimer,1000);

煮蛋定时器用两个函数，第一个函数在用户点击按钮启动计时器被调用。

function doStartTimer() {
    setTimeout(doEndTimer,5*60*1000);<!--为什么这里是1000，是因为超时长度以千分之一秒为单位的-->
}

function doEndTimer() {
    alert("your egg is ready");<!--当结束了这里就会显示-->
}

doStartTimer函数和一个按钮相连接，让用户可以启动计时器，计时结束的时候doEndTimer就会被调用。五分钟=5个60秒，而1000的值是一秒钟的延迟。如果是想要7分钟就把5改成7即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TIMER</title>
</head>


<body>
<h1>timer</h1>
<p>
  <button onclick="doStartTimer();">Start the Timer</button><!--这里是按钮啦-->
</p>
<script>
  function doStartTimer() {
    setTimeout(doEndTimer,5*60*1000);<!--为什么这里是1000，是因为超时长度以千分之一秒为单位的-->
}

    function doEndTimer() {
    alert("your time is ready");<!--当结束了这里就会显示-->
}
</script>
</body>
</html>

加个声音：

<audio id ="alarmAudio">
    <source src="everythingSound.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

audio元素包含了另一个src元素，来指定了音频数据的来源，在本例中，音频被存储在一个名为 everythingSound.mp3的文件，这个文件被存储在服务器中，如果浏览器不支持播放音频，就会显示type里面的文本，给这个元素一个ID，以便doEndTimer函数中的代码可以找到音频元素，并且要求播放MP3文件。

function doEndTimer() {
        alarmSoundElement= document.getElementById("alarmAudio");
        alarmSoundElement.play()
}

音频元素提供了播放音频的play方法。

那么如何控制音频的播放呢，加一个control吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>control audio</title>
</head>
<body>
<audio controls>
    <source src="everythingSound.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
</body>
</html>

21、图像显示程序

这种技术可以实现幻灯片放映，也可以让用户选择图像来显示。一定要加ID。

<p><img src="seaside1.JPG" id="pageImage"></p>

这个Img元素是显示seaside.jpg李的文件的，js程序可以修改src属性来改变现实的图片，使其指向不同的图片文件：

var pic = document.getElementbyId("pageImage");
pic.src = "HAHAHAHAHAH.JPG";

这两条语句获得了对图像的引用，让img元素的src属性设置为引用hahahah.jpg的图像。

参考文献：

[英]Rob Miles. 轻松学会JavaScript, 2022.

今天肚书谁跟！

关注

24
点赞
踩
40

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫