前端技术day01-HTML入门

一、前端介绍

技术	描述
HTML	用于构建网站的基础结构的
CSS	用于美化页面的，作用和化妆或者整容作用一样
JS	实现网页和用户的交互
==Vue==	主要用于将数据填充到html页面上的
==Element==	主要提供了一些非常美观的组件

二、工具软件

VsCode

在前端领域，有一个公认好用的开发软件叫VsCode，他就相当于IDEA

① 双击安装包，选择我同意此协议，再点击下一步

② 选择安装路径，点击下一步，其它的页面都默认就行，一直点下一步

③ 安装完成，运行VS Code

④ 插件安装

VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。我们安装下面几个：

Chinese (Simplified) Language Pack：适用于 VS Code 的中文（简体）语言包
Code Spell Checker：拼写检查器
VueHelper：vue代码提示插件
Vetur：语法高亮，智能提示，emmet，错误提示，格式化，自动补全
IntelliJ IDEA Keybindings：仿IDEA快捷键
open in browser：浏览器打开

⑤ 切换皮肤

⑥创建项目

新建一个文件夹，类似于Java中的工程

⑦创建模块

在项目中新建一个文件夹，类似于Java中的模块

⑧编写代码

在模块下创建一个index.html文件，然后编写内容，点击浏览效果

三、HTML规范

复制代码

  "!"使用此符号，快速创建一个HTML的骨架结构
    <!DOCTYPE html>声明HTML文档
    <html lang="en">声明语言规范
    head 标签是文档的头部，里面存放了文档的元信息（编码）
        title：html的标题
    body 标签是文档的主体，里面存放了文档的内容
        页面展示的所有元素都写在body部分下

    HTML规范：
    1.HTML分成两个部分
        1-html标签：有特殊含义的标签，会被浏览器解析，呈现出不同的效果
        2-html文本：原样输出文本
    2.HTML的标签按分类：
        单标签：自闭和标签，只需要写一个，<hr>
        双标签：由开始和结束标签组成，<div></div>
    3.HTML标签都有属性：通过属性修饰标签，添加额外的展示效果 例如: <hr color="red">
    4.HTML标签不区分大小写： <hr>和<HR>效果一样

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的页面</title>
</head>
<body>
    你好！
    <hr>
    <HR>   
</body>
</html>

四、基础标签

4.1 标题

作用：用于将普通文字变成标题

语法： <hn>普通文字</hn> n表示范围：1~6，n>6默认为正文

特点：数值越大，字体越小标题自带换行效果

属性： align：对齐方式取值：left（默认值，左对齐）、 center（居中）、 right（右对齐）

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>

<body>
    <h1 align="center">一级</h1>
    <h2 align="right">二级</h2>
    <h3>三级</h3>
    <h4>四级</h4>
    <h5>五级</h5>
    <h6>六级</h6>
    <h7>七级</h7>
    <h8>八级</h8>
</body>

</html>

4.2 水平线

作用：在页面上生成一条横线

语法： <hr/>

属性： color：颜色，用于设置颜色线条颜色，通过英文字母或者RGB表示

英文单词: red blue green pink purple yellow black white

RGB: #FFFFF

width：宽度，用于设置线条的长度，可以是用绝对像素或者百分百设置

绝对: 100px 相对: 百分比

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平线</title>
</head>

<body>
   
    <h1>测试不同的横线</h1>
    <hr color="purple">
    <hr>
    <hr color="#9EEEF0">
    <hr color="pink">
    <hr color="green" width="700px">
    <hr color="blue" width="50%">
</body>
</html>

4.3 段落和换行

换行： <br/>

分段： <p>一段内容，使用这个标签的效果是一段文字的上下会留出空白</p>

空格: &emsp;(中文)  (英文)

一个 &emsp效果 = 三个&nbsp效果

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落和换行</title>
</head>

<body>
    
    <p>
        &emsp;&emsp;传智专修学院是一所为互联网、人工智能、工业4.0培养高精尖科技人才的应用型大学。
        <br>学校经江苏省宿迁市教育局批准，由江苏传智播客教育科技股份有限公司投资创办。
    </p>
    <p>
        
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当今世界已进入人工智能、机器人时代，人工智能、机器人已成为未来30年、甚至50年科技革命最重要的发展方向。世界各国越来越重视，我国政府也高度关注人工智能的发展，无论是党的十八大、十九大，还是2017、2018、2019的政府工作报告，均提出要重点发展人工智能、机器人，并提升到国家战略层面。
    </p>
    <p>
        &emsp;&emsp;技术发展首要是人才，而我国这方面人才非常紧缺。根据国家相关部门测算，目前我国人工智能人才的缺口就已经超过了500万，国内的供求比例仅为1:10，供需比例严重失衡。并且随着社会信息革命的进一步深入，相应人才的缺口会越来越大。但在这些新技术面前，目前我国关于这方面人才的规模化培养，无论是高校还是科研机构，均没有成熟的培养体系和方案，都还处于摸索阶段。
    </p>
   
</body>

</html>

4.4 文字效果

<b>文字</b>：加粗标签

<i>文字</i>：斜体标签

<u>文字</u>：下划线标签，在文字的下方有一条横线

<center>文字</center>: 文字居中显示

<font>文字</font>: 定义文字字体(face)，大小(size:1-7)，颜色(color)

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字效果</title>
</head>

<body>
    <p>
        你看,这行文字加粗了:<b>乾坤未定,你我皆是黑马</b>
    </p>
    <p>
        你看,这行文字倾斜了:<i>乾坤未定,你我皆是黑马</i>
    </p>
    <p>
        你看,这行文字有个下划线呢:<u>乾坤未定,你我皆是黑马</u>
    </p>
    <p>
        <center>
            你看,这行文字可以居中:乾坤未定,你我皆是黑马
        </center>
    </p>
    <p style="color: aquamarine;">
        你来给这行文字设置下字体、大小和颜色呗!
    </p>
    <p>
        <center>
            <font face="楷体" size="8" color="pink">
                你来给这行文字设置下字体、大小和颜色呗!
            </font>
        </center>
    </p>

</body>

</html>

4.5 超链接

作用：用于给文字添加超链接效果，点击文字是跳转一个目标页面

语法： <a>文字</a>

属性： href：用于指定超链接的跳转地址，支持绝对路径和相对路径两种写法

绝对地址: https://www.baidu.com/

相对地址: ./ 当前文件所在目录

../ 当前文件上层目录

target：用于指定页面打开方式

_self 在当前页签打开目标页面(默认)

_blank 在新页签打开打开目标页面

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接</title>
</head>

<body>
  
    <a href="https://www.csdn.net/">CSDN-专业开发者社区</a> <br>
    <a href="https://www.csdn.net/" target="_blank">CSDN-专业开发者社区</a> <br>
    <!--
        ./ 当前文件所在目录  
    -->
    <a href="./02-水平线.html">02-水平线</a> <br>
     <!--
        ../ 当前文件上层目录
    -->
    <a href="../01-基本标签/04-文字效果.html">01-基本标签/04-文字效果</a>

</body>

</html>

4.6 图像

用于在HTML页面中引入一个图片

语法： <img/>

属性： src：用于指定图片资源的路径，支持绝对路径和相对路径两种写法

alt：用于在指定咋图片丢失时要显示的文字提示

width：用于设置图片宽度（浏览器会根据设置的宽度按照比例自动调整高度）

title: 设置鼠标悬停时展示的文字内容

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像</title>
</head>

<body>
    <img width="500px" src="D:\Desktop\微信图片_20240730192854.jpg" title="这是我家果果">
    <br>
    <img height="500px" src=""  alt="这里本该是果果的可爱照片">
    <br>
    
</body>
</html>

4.7 音频和视频

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

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

src：规定音频的 URL

controls：显示播放控件

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频和视频</title>
</head>

<body>
    <h3>音频</h3>
    <audio src="../img/jq.mp3" controls></audio>
    <h3>视频</h3>
    <video width="500px" src="../img/ds.mp4" controls></video>
</body>
</html>

五、布局标签

5.1 无序列表

<ul>

</ul>

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>

<body>
   
    <h3>你喜欢的水果？</h3>
    <ul>
        <li>芒果</li>
        <li>樱桃</li>
        <li>桃子</li>
        <li>提子</li>
        <li>香蕉</li>
    </ul>
    <h3>友情链接</h3>
    <ul>
        <li>百度</li>
        <li>新浪</li>
        <li>搜狐</li>
        <li>网易</li>
    </ul>

</body>
</html>

5.2 有序列表

<ol>

</ol>

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>

<body>
   
    <ol>
        <li>农业农村部部长堂人间被查</li>
        <li>农业农村部部长堂人间被查</li>
        <li>农业农村部部长堂人间被查</li>
    </ol>

</body>

</html>

5.3 定义列表

<dl>

</dl>

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义列表</title>
</head>

<body>
    <dl>
        <dt>线下门店</dt>
        <dd>小米之家</dd>
        <dd>服务网点</dd>
        <dd>授权体验店/专区</dd>
    </dl>

</body>

</html>

5.4 基础表格

<table>：定义表格

border：规定表格边框的宽度

width：规定表格的宽度

cellspacing: 外边距

cellpadding: 内边距

<tr>：定义行

align：定义表格行的内容对齐方式

<td>：定义单元格

<th>：定义表头单元格

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>基础表格</title>
</head>

<body>
   <!-- 实现一个 3行*3列 的单元格 -->
   <table border="1px" align="center" cellspacing="0px" width="200px" height = "200px">
         <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
         </tr>
         <tr bgcolor="green" align="center">
            <th>1</th>
            <th>明明</th>
            <th>23</th>
         </tr>
         <tr align="center">
            <td>2</td>
            <td>白白</td>
            <td>23</td>
         </tr>
         <tr align="center">
            <td>3</td>
            <td>红红</td>
            <td>20</td>
         </tr>
   </table>
</body>
</html>

5.5 合并单元格

rowspan 用于指定单元格纵向跨越的行数

colspan 用于指定单元格横向跨越的列数

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>合并单元格</title>
</head>

<body>
   <!--
       合并需求:
           1. 合并1-2和1-3为一个
           2. 合并2-1和3-1为一个 
   -->
   <table width="300px" height="200px" align="center" border="1" cellpadding="0" cellspacing="0">
      <tr>
         <td>1-1</td>
         <td colspan="2">1-2</td>
        
      </tr>
      <tr>
         <td rowspan="2">2-1</td>
         <td>2-2</td>
         <td>2-3</td>
      </tr>
      <tr>
   
         <td>3-2</td>
         <td>3-3</td>
      </tr>
   </table>
</body>

</html>

5.6 容器

作用：存储内容的容器（盒子），通常与css技术结合使用，完成页面的布局和美化

语法：<div>块级元素,独自占用一行</div>

<span>行内元素,内容有多大，就占用多少</span>

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div和span</title>
</head>

<body>
    <div style="background-color: aquamarine;">
        1
    </div>
    <span style="background-color: rgb(243, 141, 8);">
        我是span
    </span>
</body>
</html>