首先对他们的在界面中的功用做一个说明
HTML来决定界面的结构,CSS保证界面的美化,JS保证界面的效果/动作
HTML
1. HTML介绍
HTML（HyperText Markup Language）：超文本标记语言。
那么什么是超文本呢？超文本就是超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
对于标记语言的理解是：由标签构成的语言，HTML中的标签都是预定义好的。我们之前学过的xml就是标记语言，都是一个个的标签，
主要结构如下:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
基础语法:
1) 标签不区分大小写
2) 语法松散,结束标签可有可无
3) 属性单双引号均可
4) 后缀名可以使.html 也可以是 .htm
2, 基础标签
文本标签:
| 标签 | 描述 |
|---|---|
| <h1> ~ <h6> | 定义标题，h1最大，h6最小 |
| <font> | 定义文本的字体、字体大小、字体颜色 ( 开发中被css取代) |
| <b> | 定义粗体文本 |
| <i> | 定义斜体文本 |
| <u> | 定义文本下划线 |
| <center> | 定义文本居中 |
| <p> | 定义段落 |
| <br> | 定义折行 |
| <hr> | 定义水平线 |
示例如下:
<!-- 标识当前文档是HTML5 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集 -->
<meta charset="UTF-8">
<!-- 浏览器兼容问题 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-基础文本标签</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--
HTML颜色描述:
1. 英文单词: red, green, blue
2. RGB(值1, 值2, 值3): 红色, 绿色, 蓝色 ---- 0-255 (不推荐)
3. #值1值2值3 : 红色, 绿色, 蓝色 ----------- 00-FF (十六进制)
-->
<font color="#00FF00" size="6" face="楷体">HTML,基础标签</font>
<hr>
<center>HTML</center>
<hr>
HTML <br>
<i>HTML</i> <br>
<b>HTML</b> <br>
<u>HTML</u> <br>
<hr>
已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。<br>
而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。
<hr>
<p>已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。</p>
<p>而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。</p>
</body>
</html>
图片音频视频标签
| 标签 | 属性 | 描述 |
|---|---|---|
| <img> | 在页面上引入图片的 | |
| height | 用来定义图片的高度 | |
| width | 用来定义图片的宽度 | |
| src | 规定显示图像的 url（统一资源定位符） | |
| <audio> | 定义音频(支持MP3、MAV、OGG) | |
| src | 规定音频的 url | |
| controls | 显示播放控件 | |
| <video> | 定义视频(支持MP4、WebM、OGG) | |
| src | 规定视频的 url | |
| controls | 显示播放控件 |
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-图片音视频标签</title>
</head>
<body>
<!--
路径:
1. 绝对路径: 绝对磁盘路径 , 绝对网络路径
2. 相对路径:
当前路径: . ./img/01.jpg == img/01.jpg
上级目录: ..
尺寸单位:
1. 像素 px
2. 百分比 %
-->
<!-- <img src="C:\Users\Administrator\Pictures\Camera Roll\1.jpg" > -->
<!-- <img src="https://p2.img.cctvpic.com/photoworkspace/contentimg/2022/09/19/2022091919443292317.jpg" > -->
<img src="img/01.jpg" height="200" width="300">
<audio src="audio/01.mp3" controls></audio>
<video src="video/01.mp4" controls height="200" width="300"></video>
</body>
</html>
超链接表格标签
| 标签 | 属性 | 描述 |
|---|---|---|
| <a> | 定义超链接，用于连接到另一个资源 | |
| href | 指定需要访问的资源的URL | |
| target | _self,默认值，在当前页面打开, _blank在空白页打开 | |
| <table> | 定义表格 | |
| broder | 规定表格边框的粗细 | |
| width | 规定表格的宽度 | |
| cellspacing | 规定单元格之间的空白 | |
| <tr> | 定义表格的行 | |
| align | 定义表格行的内容对齐方式 | |
| <td> | 定义普通单元格 | |
| <th> | 定义表头单元格，会有加粗居中的效果 |
示例:
<hr><hr>
<table width="50%" border="1" cellspacing="0">
<tr>
<th>序号</th>
<th>品牌Logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>001</td>
<td><img src="img/huawei.jpg" height="50" width="70"></td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<tr align="center">
<td>002</td>
<td><img src="img/alibaba.jpg" height="50" width="70"></td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
布局标签
| 标签 | 描述 |
|---|---|
| <div> | 定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局页面。 |
| <span> | 用来组合行内元素。一般用来展示文本 (包裹) |
常用的两种容器
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-布局标签</title>
</head>
<body>
<div>我是div1</div>
<div>我是div2</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
注意:
- div占据一整行，span仅仅占据文本部分
- div的高度想要高一点，可以通过css设置高度