前端学习1

m0_74135768

已于 2022-10-19 16:19:54 修改

阅读量1.7k

点赞数 1

文章标签：前端学习 javascript

于 2022-10-19 16:19:01 首次发布

本文链接：https://blog.csdn.net/m0_74135768/article/details/127378482

版权

001 HTML、CSS系列之导学

略

002什么是HTML和CSS

定义：它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。
HTML
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

003宇宙第一编辑器VS Code

VS Code,全称Visual Studio Code,来自微软，是一个开源的，基于Electron的轻量代码编辑器。
学习编辑器的使用

设置：文件->首选项->设置

创建文件、创建文件夹、重命名和删除
ctrl+s：保存
ctrl+a:全选
ctrl+x、ctrl+c、ctrl+v:剪切、复制、粘贴
ctrl+z、ctrl+y:撤销、前进
shift+end:从头选中一行
shift+home:从尾选中一行
shift+alt+向下箭头：快速复制一行
alt+向上（下）箭头：快速移动一行
tab:向后缩进
tab+shift:向前缩进

004 chrome浏览器

谷歌浏览器是一款可让您更快速、轻松且安全地使用网络的浏览器。

005 深入了解网站开发

UI设计师：设计稿
web前端开发工程师（H5开发）
设计稿-> 代码
数据库里的数据->显示到页面
HTML+CSS
HTML:结构
CSS：样式

web后端开发工程师

006Web前端三大核心技术

HTML:结构
CSS：样式
Javascript：行为

    div{color:red;font-style:italic}
</style>
<div>HTML+CSS</div>
<script>
    let div=document.querySelector("div");
    let time =null;
    div.onmouseover =function(){
        timer=setInterval(()=>{
            if(flag){
                div.style.color="blue";
            div.style.fontstyle="normal";
            }
            else{
                div.style.color="red";
                div.style.fontstyle="italic";

            }
           flag=!flag

        },500);
    };
    div=οnmοuseοut=function(){
        clearInterval(timer);
    };
</script>

007HTML基本结构与属性

HTML:超文本标记语言
超文本内容：文本内容+非文本内容（图片、视频、音频等）
标记（标签）：<单词>
分为单双标签
语言：编程语言
标签的属性：来修饰标签的，设置当前标签的一些功能

008 HTML的初始代码

！+tab键：快速创建html的初始代码

<!DOCTYPE html> 文档声明：告诉浏览器这是一个HTML文件
<html lang='en'>  HTML文件的最外层标签，包裹着所有HTML标签代码
 lang="en"表示英文网站
      <head>
       <meta charset="utf-8">  元信息：是编写网页中的一些赋值信息
       <title>Documnet</title>  设置网页的标题
    </head>
   </body>
          网页内容
   <body>
</html>

009HTML中的注释

<!DOCTYPE html> 
<html lang='en'>  
      <head>
       <meta charset="utf-8">  
       <title>Documnet</title>  
    </head>
   </body>
         <!--hello world-->(注释)
   <body>
</html>

注释的意义：
1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员进行展示。
快捷添加注释与删除注释：
1.ctrl+/
2.shift+alt+a

010HTML语义化

所谓HTML语义化指的是，根据网页中的内容结构，选择合适的HTML标签进行编写。
好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4.便于团队开发和维护。

011标题与段落

标题->双标签：<h1></h1>...<h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用。
h标签 p标签

012文本修饰标签

强调->双标签：<strong></strong>加粗、<en></en>斜体
strong强调性更强，en强调性稍弱
下标：<sub></sub>
上标：<sup></sup>
<del>,<ins>:删除文本、插入文本

013图片标签与图片属性

图片标签
img->单标签
src:引入图片的地址
alt：当图片出现问题的时候，可以显示一段友好的提示文字
title：提示信息
width、height:图片大小

    <head>
        <meta charset="UTF-8">
        <meta name="viewport"content="width=device-widtn,initial-scale=1.0">
        <title>我在VSCode上写网页</title>
    </head>
    <body> 
    <center>你好 world!</center>
    <img src="..."
    alt="网上转载"
    width="..."height="..."
    </body>
</html>

014引入文件的路径地址

相对路径
.在路径中表示当前路径
..在路径中表示上一级路径

    <head>
        <meta charset="UTF-8">
        <meta name="viewport"content="width=device-widtn,initial-scale=1.0">
        <title>我在VSCode上写网页</title>
    </head>
    <body> 
    <center>你好 world!</center>
    <img src="..."
    alt="网上转载"
    width="..."height="..."
    <img src="../img/animal/dog.jpg"
    </body>
</html>

绝对路径