2021-07-13学习技术分析

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的缩写

空格 &nbsp;[一个space键的大小]    两个空格:&emsp; [一个汉字大小写的空格] &ensp;[半个汉字大小的空格]

标题标签 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.特殊符号  &copy; 商标 &reg;
语法:
<ul>
    <li>2</li>
    <li>2</li>
    <li>2</li>
    <li>2</li>    
</ul>
应用场景:新闻列表
自定义列表
语法:
   <li>1</li>
   <li>1</li>
</ol>
应用场景:新闻列表
无序列表

14.特殊符号  &copy; 商标 &reg;
语法:
<ul>
    <li>2</li>
    <li>2</li>
    <li>2</li>
    <li>2</li>    
</ul>
应用场景:新闻列表
自定义列表语法:
<dl>
    <dt>被描述的文字或图片</dt>
    <dd>起到描述性的内容</dd>
</dl>
语法:

                      

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值