前端技术教学第一周 10.15

查苏宸查苏宸

已于 2022-10-20 13:28:34 修改

阅读量574

点赞数

文章标签：前端 css html

于 2022-10-20 13:27:15 首次发布

本文链接：https://blog.csdn.net/m0_73817816/article/details/127332623

版权

一 web前端开发技术的入门理解以及应用

1 拨云见日

HTML CSS
切图流程→传统切图智能切图流行的切图
实战阶段→pc企业站布局 pc游戏站布局

2 溯本求源

扩展HTML 扩展CSS HTML5新语法 CSS3新语法兼容与hack

3 风生水起

布局：弹性布局网格布局移动端布局响应式布局
Bootstrap（快速搭建网页）

4 巧夺天工

预编译CSS postcss CSS架构高级功能 CSS与JS交互

二什么是HTML和CSS

HTML和CSS是做网站的编程语言,对于HTML和CSS的理解和功能

HTML指的是超文本标记语言（Hyper Text Markup Language），是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。
无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。
名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。

三 VSCode的理解与基础使用

1 VSCode的简介

vscode是一种简化且高效的代码编辑器，同时支持诸如调试，任务执行和版本管理之类的开发操作。它的目标是提供一种快速的编码编译调试工具。然后将其余部分留给IDE。vscode集成了所有一款现代编辑器所应该具备的特性，包括语法高亮、可定制的热键绑定、括号匹配、以及代码片段收集等。

VisualStudioCode（简称VSCode）是Microsoft开发的代码编辑器，它支持Windows，Linux和macOS等操作系统以及开源代码。它支持测试，并具有内置的Git版本控制功能以及开发环境功能，例如代码完成（类似于IntelliSense），代码段和代码重构等。编辑器支持用户定制的配置，例如仍在编辑器中时，可以更改各种属性和参数，例如主题颜色，键盘快捷键等，内置的扩展程序管理功

2 快捷键的使用

在这里插入图片描述

四网站开发的深入了解

1 网站开发的人员构成

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

web后端开发工程师 JavaScript：行为

2 JavaScript后端开发技术的简介和功能

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript可以实现页面的效果切换、动画效果、页面游戏等效果。然而JavaScript承担了更多的责任。尤其是当Ajax技术兴起之后，网站的用户体验又得到了更大的提升。例如，当人们在百度的搜索框中输入几个字以后，网页会智能感知用户接下来要搜索的内容，出现一个下拉菜单，这个效果的实现离不开JavaScript。另外，JavaScript的用途已经不仅局限于浏览器了，Node.js的出现使得开发人员能够在服务器端编写JavaScript代码，使得JavaScript的应用更加广泛。

总结下来，JavaScript日常用途可以归纳为下面几个主要方面：

1.嵌入动态文本于HTML页面。

2.对浏览器事件做出响应。

3.读写HTML元素。

4.在数据被提交到服务器之前验证数据。

5.检测访客的浏览器信息。

6.控制cookies，包括创建和修改等。

7.基于Node.js技术进行服务器端编程。

五 HTML初始代码

1 ！+tab：快速创建初始代码

lang=“en"表示是一个英文网站
lang="zh-CN"表示是一个中文网站

初始代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

六标签的使用

1 标签含义之元素周期表

2 标题与段落（body）

标题：<h></h> h1标题最重要，有且仅有一个，总共有6个标签等级
段落：

3 文本修饰标签

都为双标签
：加粗（强调性更强）：斜体（稍弱）
:上标 :下标 <del></del>:删除文本 <ins></ins>:插入文本

4 图片标签与图片属性

img→单标签
src：引入图片的地址
alt：当图片出现问题时，可以显示提示文字
title：移动光标时提供信息
width ,height：图片的大小（像素为单位）

七引入文件的地址路径

1相对路径

. 在路径中表示当前路径
…在路径中表示上一级路径
例如：

<img src="./img/animal/dpg.jpg"

<img src="../img/animal/dpg.jpg"

2绝对路径

例如

<img src="E:/img/animal/dog.jpg"

https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=8&spn=0&di=7146857200093233153&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=378166626%2C2062378177&os=904271651%2C2447712419&simid=378166626%2C2062378177&adpicid=0&lpn=0&ln=1940&fr=&fmq=1461834053046_R&fm=&ic=0&s=0&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F03%2F20210103001719_776a2.thumb.1000_0.jpeg%26refer%3Dhttp%3A%2F%2Fc-ssl.duitang.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1668668654%26t%3D7248b1cb66880676de797e6a5eaea7bf&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3D8n89bb89an&gsm=900000000000009&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined

Windows系统中硬盘路径可用/和\,但尽量不用/,网页路径中只能用/不能用\

八跳转链接

双标签 <a></a>
href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开_self 新窗口打开_blank
base单标签（一般写在head当中）
例如

<a href="http://www.baidu.com">访问百度</a>

<base target="_blank">

九跳转锚点

实现一：#号 id属性 id要插入h标签里面
例如

<a href="#html">HTML</a>

<h2 id="html">HTML</h2>

实现二：#号 name属性 name要添加在h标签上面一行
例如：

<a href="#html">HTML</a>

<a name="html"></a>
<h2>HTML</h2>

十特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，这些无法输入和空格字符都是特殊字符。
在这里插入图片描述

十一列表标签

1 无序列表

<ul><li>

列表的最外层容器，列表项
注意：ul和li必须是组合出现的。他们之间不允许有其他标签
type属性：改变前面标记的样式（一般用CSS去控制）

2 有序列表

<ol><li>

有序列表用的少，一般可用无序列表替代

3 定义列表

<dl>:定义列表

<dt>：定义专业术语或名词

<dd>：对名词进行解释和描述

示例：

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
<dl>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
<dl>
    <dt>JavaScript</dt>
    <dd>网页脚本语言</dd>

查苏宸查苏宸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端技术教学第一周 10.15

HTML CSS切图流程→传统切图智能切图流行的切图实战阶段→pc企业站布局 pc游戏站布局扩展HTML 扩展CSS HTML5新语法 CSS3新语法兼容与hack布局：弹性布局网格布局移动端布局响应式布局Bootstrap（快速搭建网页）预编译CSS postcss CSS架构高级功能 CSS与JS交互HTML和CSS是做网站的编程语言,对于HTML和CSS的理解和功能HTML指的是超文本标记语言（Hyper Text Markup Lan
复制链接

扫一扫