web前端入门

发布于

8 = html +css +javascript + jquery +vue

8 = html + css +javascript(jQuery和vue就是js封装的函数而已)

前端 后端 ==== 后端

** 为了能看懂前端的程序 从而能数据交互 数据一定后端

底线： 能看懂前端代码

一、web前端技术

面试题：你写网页能不能遵循web标准？你知不知道web前端技术都有什么？

Web前端技术是由w3c组织制定的一系列技术的集合，主要包括：

HTML – 结构标准： 负责网页内容（布局）

CSS – 表现标准、样式标准：美化

JavaScript，简称js，行为标准：负责行为动作、表单验证、数据交互

后面的作用就是在面试的时候，闲聊解释的内容

二、html发展历史

html1.0 – 1993年起草了一个草案，纯文本格式

html2.0

html3.0

html4.0 – 意识：语法松散：Aa– xhtml1.0（x表示严格型的，相对严格：能兼容低版本） -- xhtml2.0（想法：绝对严格） -- 浏览器厂商反对：咱们自己研发html自己用 – html5.0

最终：html5.0仍然是w3c研发

工作：xhtml1.0 + html5.0

三、什么是html

HyperText Markup Language 超文本标记语言

人和浏览器沟通的一门语言 学习html学的就是标记 == 标签

超文本：就是带符号的文本

常见的一些编译软件：sublime、DM、和sublime图标类似以w为图标的、HBuilder、vscode、txt

四、Vscode

插件

Autofilename提示路径

Openin browser/ open chrome vscode调浏览器

Chinese汉化菜单

结构标签：

Html：网页整体

Head：网页头，存储需要浏览器渲染，用户只看结果的代码js css

Body：网页主体，存内容

Title：网页标题

tile里面放的是浏览器标签上的内容，只能放题目和广告语

jss和css往head里面写，内容往body里面写

Doctype：文档类型 文档声明：规定文档dtd格式

规定好所有浏览器都以相同的html版本解析接下来的代码，为了解决兼容性 -- html5.0 能兼容低版本

vscode使用注意：

  1. 文件命名用英文
  2. 新建文件的时候必须是以.html结尾
  3. 打开后，写代码必须是英文状态下，而且先输入一个！然后按tab补全或者根据提示直接回车

推广 运营 搜索引擎优化 seo

五、*常用布局标签

标签语法： <标签的名字>内容</标签名字> -- 双标记

<标签名> -- 单标记

标题： h1-h6

段落 p

布局区块： div （里面可以放一切内容）

特殊效果文字小图片： span （多个span标签，两个标签的内容会显示在一行）

代码语言：javascript
复制
<body>
    <!-- 注释 -->
    <!-- 标题共6个级别  名字h1 h2 h4  h6 -->
    <!-- **** h1主标题 重要 一个html页面只能有一个h1标签，这个h1用来放网页的logo -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h6>六级标题</h6>
    <p>段落</p>
    <!-- div标签：内部可以放任何内容、任何标签 -->
    <div>布局最常用的标签，但凡是区块的地方都是div标签</div>
    <div>布局最常用的标签，但凡是区块的地方都是div标签</div>
    <span>span:存放特殊效果的文字和小图片</span>
    <span>span:存放特殊效果的文字和小图片</span>
</body>

换行标签：<br>

“<” 和 “>” 的字符实体为 &lt; 和 &gt;

代码语言：javascript
复制
<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->

<p>

&lt;div&gt;是一个html的一个标签<br>

3 &lt; 5 <br>

10 &gt; 5

</p>

显示效果如下

<div>是一个html的一个标签
3 < 5
10 > 5

在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp

代码语言：javascript
复制
<!--  在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp;   -->

<p>

&nbsp;&nbsp;一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />

文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />

渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

六、*图片标签 – img

Src: 查找图片 ********

Alt：替换文本；盲人读屏软件支持

Title：提示文本；推广关键字

img图片标签

HTML属性/标签属性：按需求可以加任意多个，只要空格隔开即可

src查找图片

alt替换文本：1当图片无法显示的时候显示的文字，应急方案 2支持盲人读屏软件

title 1提示文本 2.放搜索关键字 推广用

代码语言：javascript
复制
<body>

<!-- k=“v” -- html属性/标签属性：按需求可以加任意多个，只要空格隔开即可 -->

<!-- src -- 查找图片 -->

<!-- alt: 1、替换文本：当图片无法显示的时候显示的文字 应急方案；2、支持盲人读屏软件 -->

<!-- title：1、提示文本；2、放搜索关键字 -- 推广 -->

<img src="icon7.jpg" alt="这是迪丽热巴" title="传智播客">

</body>

七、*超链接标签 -- a

单击跳转页面

href: 跳转地址

线上网站：http://网址

本地文件：路径查找文件

新窗口打开： target=“_blank”

<a href="02-damo.html" target="_blank">连接2</a>

代码语言：javascript
复制
<body>

<!-- href 书写跳转地址 -->

<a href="http://www.baidu.com">超链接1</a>

<a href="01-常用布局标签.html" target="_blank">跳转到本地01文件</a>

</body>

使用的一些问题：

快捷键输入a直接tab

输入网址的时候要写完整http

跳转文件的时候，要记得带后缀

小练习：

布局技巧了解一下

代码语言：javascript
复制
<body>

<!-- 布局的技巧：从上到下分行，这一行从左往右分列 -->

<div>

<div>

<h2>今日头条</h2>

<!-- # 代表的是当前页面，当不确定跳转地址时，先写个#（假连接，空连接，是开发阶段时使用，上线之前全替换） -->

<a href="#">更多</a>

</div>

<img src="timg.jpeg" alt="" title="">

<p>在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名(也叫做SEO)，其次是方便代码的阅读和维护。</p>

</div>

</body>

工作中，写完一个标签，就要去美化一下，加css

八、路径

相对路径：

./当前目录

../上级目录

文件夹/ 下级

前端的相对路径和Ubuntu中的一模一样

绝对路径：

/ 根目录 盘符 互联网绝对地址（将文件保存到其他服务器上，或者其他网站上现成的资源自己享用）

前端网站开发都是本地开发

*****前端写路径一般都是用相对路径----稳定，后期维护方便

下面是几种路径的写法：

代码语言：javascript
复制
<body>
    <img src="icon3.jpg" alt="">
    <img src="img/icon4.jpg" alt="">
    <img src="../icon1.jpg" alt="">
    <img src="../images/icon2.jpg" alt="">
    <img src="http://www.baidu.com/img/bd_logo1.png" alt="">
</body>

九、列表

列表使用场景：隐身区域里面包含很多一样的行，每行外观样式都相同

结构：ul嵌套（包含）li，ul是列表整体（隐身区域），li是列表项目

常用的是：ul嵌套li 单击跳转a放到li里面

代码语言：javascript
复制
<body>
    <!-- 隐身区域里面包含很多一样的行  -- 列表  每行外观样式都相同 -->
    <!--******* 结构：ul嵌套（包含）li，ul是列表整体（隐身区域），li是列表项目 -->
    <!-- 无序列表 -->
    <!-- **** 网站的导航区域使用ul制作 -->
    <ul>
        <li>新闻</li>
        <li>新闻</li>
        <li>新闻</li>
        <li>新闻</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>新闻</li>
        <li>新闻</li>
        <li>新闻</li>
        <li>新闻</li>
    </ol>

&lt;!-- 项目列表/自定义列表：dl嵌套dt和dd，dl是项目列表整体，dt是项目标题，dd项目详情描述 --&gt;
&lt;dl&gt;
    &lt;dt&gt;项目标题&lt;/dt&gt;
    &lt;dd&gt;项目详情描述文字&lt;/dd&gt;
&lt;/dl&gt;

十、什么是css

Cascading Style Sheet 层叠样式表/层叠样式单 层叠就是覆盖

Css2.0 和 css3.0

十一、CSS写法及语法

嵌入式 把css代码嵌入到html页面head标签里面

一对style标签做环境

代码语言：javascript
复制
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<!-- 书写css -->

<style type="text/css">

/* 写css  style标签是什么？style标签是css能够运行的环境 */

/* 需求：文字黑色 变成红色 == h1里面的文字颜色是红色的 */

h1{

/* 写css键值对 css属性 k:v; */

color:red;

/* px 网页的单位 像素 */

font-size: 60px;

}

</style>

</head>

<body>

<h1>logo</h1>

</body>

</html>

外链式： css代码和html代码单独文件单独存放

文件后缀.css

导入：<link rel=”stylesheet” href=”查找css文件”>

代码语言：javascript
复制
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<!-- href 为了导入单独css文件用的 -->

<!-- rel="stylesheet" 关系=“样式表样式单” -->

<link rel="stylesheet" href="my.css">

</head>

<body>

<p>外链式</p>

</body>

</html>

下面是对应的以css后缀结尾的文件内容：

代码语言：javascript
复制
p{

color: green;

}

行内式： 把css放到控制的标签身上

Style=“css键值对”

代码语言：javascript
复制
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

<!-- 标签身上添加一个html属性 style="css键值对" -->

<div style="color: blue;">测试行内式</div>


&lt;!-- 
    工作中：
        常用外链式
        工作中电商站首页的css用嵌入式
        学习用嵌入式
        行内式基本不用
 --&gt;



</body>

</html>

工作中常用外链式

工作中电商站首页的css用嵌入式

学习时用嵌入式

行内式基本不用，作为了解

十二、CSS常用属性

Font-size 字号

Font-family 字体

Color 文字颜色

Width 宽度

Height 高度

Background 背景色

Text-align 文本水平对齐方式 left center right

Line-height 行高

Text-indent 首航缩进

Font-weight 加粗

Font-style 倾斜

Text-decoration 文字修饰线 none underline line-through overline

常用文本控制属性

代码语言：javascript
复制
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

div{

/* 文字颜色 */

color: blue;

/* 字号 */

font-size: 20px;

/* 字体 */

font-family: "宋体";

/* 加粗 */

font-weight: bold;

/* 倾斜 */

font-style: italic;

/* 文字修饰线 */

text-decoration: underline;

/* 行高 */

line-height: 100px;

/* em一个字的大小 */

/* 首航缩进 */

text-indent: 2em;

/* text-indent: 40px; */

}

a{

/* text-decoration: none; */

/* text-decoration: line-through; */

text-decoration: overline;

}

</style>

</head>

<body>

<div>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</div>

<a href="#">超链接</a>

</body>

</html>

常用布局属性

代码语言：javascript
复制
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

div{

width: 300px;

height: 200px;

background: green;

/* text-align: left center right; */

text-align: center;

/* 垂直居中技巧: 设置行高属性值等于自身高度属性值 */

line-height: 200px;

}

</style>

</head>

<body>

<div>主题市场</div>

</body>

</html>

十三、*CSS选择器

Css查找标签的方法

1、标签选择器

以标签名字命名的选择器

Div{} p{} h1{}

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        color: red;
    }
    </style>
</head>
<body>
    <div>1111</div>
    <div>2222</div>
    <div>3333</div>
    <div>4444</div>
</body>
</html>

2、类选择器

定义： .名字{}

调用： class=“名字1 名字2 名字3 。。。”

代码语言：javascript
复制
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

/* 定义:以点开头，后面紧跟类选择器的名字，名字自定义，满足规则即可：不是特殊符号，不以数字开头 */

/* 调用： 标签身上添加class="类选择器的名字 名字2 名字3...." */

.green{

color: green;

}

.font60{

font-size: 60px;

}

</style>

</head>

<body>

<div>1111</div>

<div class="green font60">2222</div>

<div>3333</div>

<div class="green">4444</div>

</body>

</html>

3、id选择器

定义： #名字{}

调用：id=”名字”

代码语言：javascript
复制
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

/* 定义:以#开头，后面紧跟id选择器的名字，名字自定义，满足规则即可：不是特殊符号，不以数字开头 */

/* 调用： 标签身上添加id="id选择器的名字"*/


/* ******* id使用的标准：同一个id名一个页面只能调用一次 -- 工作中id选择器并不是用来写css美化工作的，用来配合js写程序用的做数据交互 */
#green{
    color: green;
}
&lt;/style&gt;



</head>

<body>

<div>1111</div>

<div id="green">2222</div>

<div>3333</div>

<div id="green">4444</div>

</body>

</html>

#html#html5#图片标签#css