HTML、CSS、JavaScript

原创

已于 2024-03-31 16:54:30 修改 · 1.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

于 2024-03-13 21:14:38 首次发布

W3C标准：网页主要由三部分组成

➢结构：HTML

➢表现：CSS

➢行为：JavaScript

HTML

HTML是一门语言，所有的网页都是用HTML这语言编写出来的

HTML(Hyper' Text Markup Language)：超文本标记语言

➢超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

➢标记语言：由标签构成的语言

HTML运行在浏览器上，HTML标签由浏览器来解析

HTML标签都是预定义好的。例如:使用<img> 展示图片

快速入门

新建文本文件，后缀名改为.html

编写HTML结构标签

在<body>中定义文字

标签	描述
<HTML>	定义HTML文档
<head>	定义关于文档的信息
<title>	定义文档的标题
<body>	定义文档的主体

<html>
    <head>
        <title> </title>
    </head>
    </body>

    <body>
</html>

特点

HTML文件以.htm或. html为扩展名
不区分大小写
HTML标签属性值单双引皆可
HTML语法松散

基础标签

标签	描述
<h1> - <h6>	定义标题, h1最大，h6最小
<font>	定义文本的字体、字体尺寸、字体颜色
<b>	定义粗体文本
<i>	定义斜体文本
<u>	定义文本下划线
<center>	定义文本居中
<p>	定义段落
<br>	定义折行
<hr>	定义水平线

<!-- html5标识-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--页面的字符集-->
    <meta charset="UTF-8">
    <title>TEST</title>
</head>
<body>

<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>

<hr>

<font size="5" color="#b22222">Hello!</font> <!--font标签不建议使用，其功能可以用CSS完成-->

<hr>
<center><b>赤壁赋</b><br><i>唐 苏轼</i></center>  <!--center标签不建议使用，其功能可以用CSS完成-->
<p>壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。<u>浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。</u></p>
<p>于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉；余音袅袅，不绝如缕。<u>舞幽壑之潜蛟，泣孤舟之嫠妇。</u></p>

</body>
</html>

**转义字符**
HTML原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	"	引号
®	®	已注册
©	©	版权
™	™	商标
		不断行的空白

图片、音频、视频标签

标签	描述
<img>	定义图片
<audio>	定义音频
<video>	定义视频

img：定义图片

➢src：规定显示图像的URL (统一资源定位符)

➢height：定义图像的高度

➢width：定义图像的宽度

audio：定义音频。支持的音频格式：MP3、WAV、 OGG

➢src：规定音频的URL

➢controls：显示播放控件

video：定义视频。支持的音频格式：MP4、 WebM、OGG

➢src：规定视频的URL

➢controls：显示播放控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    资源路径:
        1.绝对路径：完整路径
        2.相对路径：相对位置关系
            ./ 表示当前目录,可忽略不写
            ../表示上一级目录
    尺寸单位:
        1. px:像素
        2.百分比:
-->
<img src="a.jpg" width="400" height="400" alt="">

<audio src="b.mp3" controls></audio>

<video src="./c.mp4" controls width="400" height="400"></video>
</body>
</html>