ui设计【页面的切图】 前端【实现ui设计图的界面,与后端的交互】
后端【实现相对应的功能:登录】 测试【测试程序是否存在bug】
一个界面的构成:html【骨架] +css【样式】+js【行为】 (html+css=w3c),(js=ecma)
vscode使用和安装【安装插件:chinese(转为中文)open in brow(在浏览器中打开)live serve(实时刷新)
如何打开文件夹:【文件=>打开文件夹】
新建文件夹/文件【】;如何新建一个网页打开的文件【文件的后缀名为html】
html基本结构
<!--
<!DOCTYPE html>
文档类型 html
<html>
<hend>
<meta charset="utf-8">
设置编码方式为utf-8 【国际统一标准】
<title>标题</title>
网页中显示的内容
<body>
</html>
常用的标签
换行 <br> break的缩写
空格 [一个space键的大小] 两个空格:  [一个汉字大小写的空格]  [半个汉字大小的空格]
标题标签 h1~h6 特点:从h1到h6逐渐减小,自动换行,有行高,为双标签
段落标签 p 特点:自动换行,双标签,有行高
文本格式化标签 加粗/倾斜 b,strong/i,em
特点:双标签 不能实现换行
10.超链接 a
属性:href 跟链接跳转的网址
title 设置鼠标悬停时的提示信息
target 设置网页的打开方式 _slef[在当前页面打开] _blank[在新的界面中打开]
延申知识点:base标签
语法:<base target="设置的打开方式"> 注意这个是在head里面设置的
11.图片
语法:<img src="图片的路径">
属性:
src 图片的路径【A.相对路径:
a.图片和html文件在同一文件夹中时【直接用图片的名称即可】
b.图片位于html文件的下一级或者多级文件时,去除掉路径的相同部分,然后保留图片不同的部分,最后加上图片的名字
c.图片位于html文件的上一级或者多级文件时,../找到上一级,直到用../找到与图片的上级文件位于同一文件夹时,
去除掉路径的相同部分,然后保留图片不同的部分,最后加上图片的名字
B.绝对路径】
width 设置宽度
height 设置高度
title 设置鼠标悬停时提示的信息
alt 设置图片走丢之后的提示信息
border 设置边框
12.图片超链接
嵌套标签的使用 注意标签的位置
13.列表
有序列表
语法:
<ol>
<li>1</li>14.特殊符号 © 商标 ®
语法:
<ul>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
应用场景:新闻列表
自定义列表
语法:
<li>1</li>
<li>1</li>
</ol>
应用场景:新闻列表
无序列表
14.特殊符号 © 商标 ®
语法:
<ul>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
应用场景:新闻列表
自定义列表语法:
<dl>
<dt>被描述的文字或图片</dt>
<dd>起到描述性的内容</dd>
</dl>
语法: