湖北做网站教程哪家好哪些浏览器可以看禁止访问的网站
一、前端介绍
| 技术 | 描述 |
|---|---|
| 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>效果一样
<!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（右对齐）
<!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 相对: 百分比
<!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效果 = 三个 效果
<!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>  传智专修学院是一所为互联网、人工智能、工业4.0培养高精尖科技人才的应用型大学。<br>学校经江苏省宿迁市教育局批准，由江苏传智播客教育科技股份有限公司投资创办。</p><p> 当今世界已进入人工智能、机器人时代，人工智能、机器人已成为未来30年、甚至50年科技革命最重要的发展方向。世界各国越来越重视，我国政府也高度关注人工智能的发展，无论是党的十八大、十九大，还是2017、2018、2019的政府工作报告，均提出要重点发展人工智能、机器人，并提升到国家战略层面。</p><p>  技术发展首要是人才，而我国这方面人才非常紧缺。根据国家相关部门测算，目前我国人工智能人才的缺口就已经超过了500万，国内的供求比例仅为1:10，供需比例严重失衡。并且随着社会信息革命的进一步深入，相应人才的缺口会越来越大。但在这些新技术面前，目前我国关于这方面人才的规模化培养，无论是高校还是科研机构，均没有成熟的培养体系和方案，都还处于摸索阶段。</p></body>
</html>4.4 文字效果
<b>文字</b>：加粗标签
<i>文字</i>： 斜体标签
<u>文字</u>：下划线标签，在文字的下方有一条横线
<center>文字</center>: 文字居中显示
<font>文字</font>: 定义文字字体(face)，大小(size:1-7)，颜色(color)
<!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 在新页签打开打开目标页面
<!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: 设置鼠标悬停时展示的文字内容
<!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：显示播放控件
<!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>
<li>列表项</li>
<li>列表项</li>
</ul>
<!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>
<li>列表项</li>
<li>列表项</li>
</ol>
<!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>
<dt>大</dt>
<dd>小</dd>
<dd>小</dd>
</dl>
<!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>：定义表头单元格
<!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 用于指定单元格横向跨越的列数
<!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>
<!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>