在线制作网站,青岛做网站电话,28招商加盟网,东营列表网一、前端介绍
技术描述HTML用于构建网站的基础结构的CSS用于美化页面的#xff0c;作用和化妆或者整容作用一样JS实现网页和用户的交互Vue主要用于将数据填充到html页面上的Element主要提供了一些非常美观的组件
二、工具软件
VsCode
在前端领域#xff0c;有一个公认好用…一、前端介绍
技术描述HTML用于构建网站的基础结构的CSS用于美化页面的作用和化妆或者整容作用一样JS实现网页和用户的交互Vue主要用于将数据填充到html页面上的Element主要提供了一些非常美观的组件
二、工具软件
VsCode
在前端领域有一个公认好用的开发软件叫VsCode他就相当于IDEA
① 双击安装包选择我同意此协议再点击下一步 ② 选择安装路径点击下一步其它的页面都默认就行一直点下一步 ③ 安装完成运行VS Code ④ 插件安装 VS Code提供了非常丰富的插件功能根据你的需要安装对应的插件可以大大提高开发效率。我们安装下面几个 Chinese (Simplified) Language Pack 适用于 VS Code 的中文简体语言包 Code Spell Checker拼写检查器 VueHelpervue代码提示插件 Vetur语法高亮智能提示emmet错误提示格式化自动补全 IntelliJ IDEA Keybindings仿IDEA快捷键 open in browser浏览器打开
⑤ 切换皮肤 ⑥创建项目
新建一个文件夹类似于Java中的工程 ⑦创建模块
在项目中新建一个文件夹类似于Java中的模块 ⑧编写代码
在模块下创建一个index.html文件然后编写内容点击浏览效果 三、HTML规范 !使用此符号快速创建一个HTML的骨架结构!DOCTYPE html声明HTML文档html langen声明语言规范head 标签是文档的头部里面存放了文档的元信息编码titlehtml的标题body 标签是文档的主体里面存放了文档的内容页面展示的所有元素都写在body部分下
HTML规范1.HTML分成两个部分1-html标签有特殊含义的标签会被浏览器解析呈现出不同的效果2-html文本原样输出文本2.HTML的标签按分类单标签自闭和标签只需要写一个hr双标签由开始和结束标签组成div/div3.HTML标签都有属性通过属性修饰标签添加额外的展示效果 例如: hr colorred4.HTML标签不区分大小写 hr和HR效果一样!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title我的页面/title
/head
body你好hrHR
/body
/html
四、基础标签
4.1 标题
作用用于将普通文字变成标题
语法 hn普通文字/hn n表示范围1~6n6默认为正文
特点数值越大字体越小 标题自带换行效果
属性 align对齐方式 取值left默认值左对齐 、 center居中 、 right右对齐
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title标题/title
/head
bodyh1 aligncenter一级/h1h2 alignright二级/h2h3三级/h3h4四级/h4h5五级/h5h6六级/h6h7七级/h7h8八级/h8
/body
/html
4.2 水平线
作用在页面上生成一条横线
语法 hr/
属性 color颜色 用于设置颜色线条颜色通过英文字母或者RGB表示 英文单词: red blue green pink purple yellow black white RGB: #FFFFF
width宽度 用于设置线条的长度可以是用绝对像素或者百分百设置 绝对: 100px 相对: 百分比
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title水平线/title
/head
bodyh1测试不同的横线/h1hr colorpurplehrhr color#9EEEF0hr colorpinkhr colorgreen width700pxhr colorblue width50%
/body
/html
4.3 段落和换行
换行 br/ 分段 p一段内容使用这个标签的效果是一段文字的上下会留出空白/p 空格: emsp;(中文) nbsp;(英文) 一个 emsp效果 三个nbsp效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title段落和换行/title
/head
bodypemsp;emsp;传智专修学院是一所为互联网、人工智能、工业4.0培养高精尖科技人才的应用型大学。br学校经江苏省宿迁市教育局批准由江苏传智播客教育科技股份有限公司投资创办。/ppnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;当今世界已进入人工智能、机器人时代人工智能、机器人已成为未来30年、甚至50年科技革命最重要的发展方向。世界各国越来越重视我国政府也高度关注人工智能的发展无论是党的十八大、十九大还是2017、2018、2019的政府工作报告均提出要重点发展人工智能、机器人并提升到国家战略层面。/ppemsp;emsp;技术发展首要是人才而我国这方面人才非常紧缺。根据国家相关部门测算目前我国人工智能人才的缺口就已经超过了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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文字效果/title
/head
bodyp你看,这行文字加粗了:b乾坤未定,你我皆是黑马/b/pp你看,这行文字倾斜了:i乾坤未定,你我皆是黑马/i/pp你看,这行文字有个下划线呢:u乾坤未定,你我皆是黑马/u/ppcenter你看,这行文字可以居中:乾坤未定,你我皆是黑马/center/pp stylecolor: aquamarine;你来给这行文字设置下字体、大小和颜色呗!/ppcenterfont face楷体 size8 colorpink你来给这行文字设置下字体、大小和颜色呗!/font/center/p
/body
/html
4.5 超链接
作用用于给文字添加超链接效果点击文字是跳转一个目标页面 语法 a文字/a
属性 href用于指定超链接的跳转地址支持绝对路径和相对路径两种写法 绝对地址: https://www.baidu.com/ 相对地址: ./ 当前文件所在目录 ../ 当前文件上层目录 target用于指定页面打开方式 _self 在当前页签打开目标页面(默认) _blank 在新页签打开打开目标页面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title超链接/title
/head
bodya hrefhttps://www.csdn.net/CSDN-专业开发者社区/a bra hrefhttps://www.csdn.net/ target_blankCSDN-专业开发者社区/a br!--./ 当前文件所在目录 --a href./02-水平线.html02-水平线/a br!--../ 当前文件上层目录--a href../01-基本标签/04-文字效果.html01-基本标签/04-文字效果/a
/body
/html
4.6 图像
用于在HTML页面中引入一个图片
语法 img/
属性 src用于指定图片资源的路径支持绝对路径和相对路径两种写法 alt用于在指定咋图片丢失时要显示的文字提示 width用于设置图片宽度浏览器会根据设置的宽度按照比例自动调整高度 title: 设置鼠标悬停时展示的文字内容
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title图像/title
/head
bodyimg width500px srcD:\Desktop\微信图片_20240730192854.jpg title这是我家果果brimg height500px src alt这里本该是果果的可爱照片br/body
/html
4.7 音频和视频
audio定义音频。支持的音频格式MP3、WAV、OGG
video定义视频。支持的音频格式MP4, WebM、OGG src规定音频的 URL controls显示播放控件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title音频和视频/title
/head
bodyh3音频/h3audio src../img/jq.mp3 controls/audioh3视频/h3video width500px src../img/ds.mp4 controls/video
/body
/html
五、布局标签
5.1 无序列表 ul li列表项/li li列表项/li /ul !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title无序列表/title
/head
bodyh3你喜欢的水果/h3ulli芒果/lili樱桃/lili桃子/lili提子/lili香蕉/li/ulh3友情链接/h3ulli百度/lili新浪/lili搜狐/lili网易/li/ul
/body
/html
5.2 有序列表 ol li列表项/li li列表项/li
/ol !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title有序列表/title
/head
bodyolli农业农村部部长堂人间被查/lili农业农村部部长堂人间被查/lili农业农村部部长堂人间被查/li/ol
/body
/html
5.3 定义列表
dl dt大/dt dd小/dd dd小/dd
/dl !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title定义列表/title
/head
bodydldt线下门店/dtdd小米之家/dddd服务网点/dddd授权体验店/专区/dd/dl
/body/html
5.4 基础表格 table定义表格 border规定表格边框的宽度 width规定表格的宽度 cellspacing: 外边距 cellpadding: 内边距
tr定义行 align定义表格行的内容对齐方式
td定义单元格
th定义表头单元格 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title基础表格/title
/head
body!-- 实现一个 3行*3列 的单元格 --table border1px aligncenter cellspacing0px width200px height 200pxtrth编号/thth姓名/thth年龄/th/trtr bgcolorgreen aligncenterth1/thth明明/thth23/th/trtr aligncentertd2/tdtd白白/tdtd23/td/trtr aligncentertd3/tdtd红红/tdtd20/td/tr/table
/body
/html
5.5 合并单元格
rowspan 用于指定单元格纵向跨越的行数
colspan 用于指定单元格横向跨越的列数 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title合并单元格/title
/head
body!--合并需求:1. 合并1-2和1-3为一个2. 合并2-1和3-1为一个 --table width300px height200px aligncenter border1 cellpadding0 cellspacing0trtd1-1/tdtd colspan21-2/td/trtrtd rowspan22-1/tdtd2-2/tdtd2-3/td/trtrtd3-2/tdtd3-3/td/tr/table
/body
/html
5.6 容器
作用存储内容的容器盒子通常与css技术结合使用完成页面的布局和美化
语法div块级元素,独自占用一行/div span行内元素,内容有多大就占用多少/span
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlediv和span/title
/head
bodydiv stylebackground-color: aquamarine;1/divspan stylebackground-color: rgb(243, 141, 8);我是span/span
/body
/html
