Web前端开发

MXLS

已于 2023-03-16 16:48:05 修改

阅读量463

点赞数

分类专栏： Web前端开发文章标签：前端 html javascript Powered by 金山文档

于 2023-03-02 19:09:01 首次发布

本文链接：https://blog.csdn.net/ikun_King/article/details/129305311

版权

Web前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.1引言

分类：电商网站（淘宝，京东），综合门户网站（新浪，搜狐），管理系统（学校内部管理系统）；

前端：网页为用户呈现的部分

后端：与数据库进行交互，完成数据存取

网站架构师：用户需求

网页美工：网页效果图

前端开发人员：代码编写（网页源文件）

1.2.1网站与网页：包含概念，网页元素，web系统，浏览器

概念

网站（web site）：互联网上用于展示特定内容的网页集合

网页（web page）:网站中的一页，一个网站中的网页通过超链接的方式被组织在一起

主页（homepage）文件名：index

网页元素:

站标：Logo图片

导航栏：超链接的集合

文字：文字连接

广告横幅：banner

表单元素：采集或者传递用户的信息

本质上：网站对应文件夹，网页对应文件

images：存放网站的图片

web系统：

服务器端，客户端

浏览器：

作用：解析网页源代码，渲染网页

推荐使用chrome浏览器

1.3.1技术构成，技术标准

技术构成

结构：HTML 从语义的角度，描述页面结构（内容，标题，段落，图片）

样式：CSS 从审美的角度，美化页面（字体，字号，文本位置，图片位置）

行为：JavaScript 从交互的角度，提升用户的体验

前端技术标准

the World Wide Web Consortium (W3C) 万维网联盟

1.4.1浏览器如何渲染网页

HTML CSS

2.1.1HTML语言的标签，元素，属性

HTML（HyperText MarkUp Language）："超文本标记语言"，不区分大小写

标签：由尖括号包围，比如<title>，通常成对出现

标签的嵌套：

<html><body></body></html>

元素：

<title>百度一下，你就知道</title>
开始标签                结束标签

元素注意缩进：

<html>        外层：父元素
    <head>    内层：子元素
    </head>   内层：子元素
    <body>    内层：子元素
    </body>   内层：子元素
</html>       外层：父元素

HTML DOM树

DOM：Document Object Model (文档对象模型)

属性：

标签名        值1         值2
<img src="logo.jpg" alt="站标"/>
     属性1          属性2

其中：一个标签可以有多个属性，属性的先后顺序无关

总结：HTML语言是一种超文本标记语言，通过以标签的形式来描述页面的格式

2.2.1文件结构，字符与编码

静态网页：文件后缀——.html

动态网页：文件猴嘴——.php

HTML文件结构

.htm或者.html

<html>       
    <head>
        <title>Web前端开发课程首页</title>    
    </head>   

    <body>   
           课程主体内容包含：HTML5,CSS,JavaScript
    </body>  
</html>

工具：记事本，Subline Text3 (emmet插件)，webstorm 工程级编辑器

<!DOCTYPE html> //文档类型：符合HTML5标准

<html lang="en"> //lang属性：搜索引擎，en-英语，zh-中文
<head>
    <meta charset="UTF-8"> //<meta>：元数据-基础内容和属性
                           //charset属性：字符集编码方式
                           //浏览器：UTF-8 国际编码  
    <title>       </title>
</head>

<body>

</body>
</html>

字符集与编码：

字符：文字，符号

字符集：字符集的集合

编码：ASCII将字符和二进制码对应起来

GB2312简体中文

Unicode所有语言

UTF-8所有语言，占用空间小

乱码问题：

源文件保存时的编码方式（文件另存的保存方式）

源文件声明的编码方式<meta charset="编码方式">

两者编码方式不同，就会出现乱码

2.3.1HTML标签h1~h6, p, br, span, pre, hr

h1~h6：标题

p：段落

br：段内换行

span：端内分组,设置属性

pre：预留格式

hr：水平线

标题h1~h6：

<h1>一级标题 heading 1</h1>
<h2>二级标题 heading 2</h2>
<h3>三级标题 heading 3</h3>
<h4>四级标题 heading 4</h4>
<h5>五级标题 heading 5</h5>
<h6>六级标题 heading 6</h6>
这里是正文文字

作用：不同级别的标题，文字的大小不同

段落p:

代码：

<p>这是段落， 每个段落自动换行</p>
<p>这里是段落，每个段落自动换行</p>
<p>段落内部文字忽略连续       空格

也不会显示空行，且不会换行     </p>

结果：

这是段落， 每个段落自动换行
这里是段落，每个段落自动换行
段落内部文字忽略连续 空格 也不会显示空行，且不会换行

注意点：多个连续的空格与空行仅生成一个结果空格

段内换行br：

<br />单独出现的标签，直接表示结束

代码：

<p>这是一个段落。<br />注意规范的写法/保留。

结果：

这是一个段落。
注意规范的写法保留。

空格字符  :特殊字符，全部小写

代码：

<body>
    <p>段落内部文字忽略连续&nbsp; &nbsp; &nbsp;空格，
    <br /> //换行操作
    也不显示空格，且不换行。
    <p>
</body>

结果：

段落内部文字忽略连续   空格，

也不显示空格，且不换行

预留格式 pre：

定义预格式化的文本

文本中的空格和换行符也会被保留

代码：

<body>
    <pre>
    这里是预留格式文本。它保留了   空格

    和空行
    </pre>
    <p>pre 标签很适合显示计算机的代码： </p>
    <pre>
    for i = to 10
        print i
    next i
    </pre>
</body>

结果

    这里是预留格式文本。它保留了   空格

    和空行
pre 标签很适合显示计算机的代码：
    for i = to 10
        print i
    next i

行内组合span:

组合行内元素，以遍通过CSS样式来格式化

代码：

<style type="text/css">
span{
    color: blue; //颜色设置为蓝色
    font-weight: bold; //是否加粗，设置为加粗
}
</style>
<p>最新<span>中国人口调查报告</span>指出

结果：

最新中国人口调查报告指出

水平线hr: <hr/>生成分隔线，可以分隔网页成不同的部分

代码：

<p>正文段落</p>
<hr />
<p>正文段落</p>

结果：

正文段落

注释：

<body>
    <!-- 这是一段注释。 -->
    <!-- 注释不会在浏览器中显示。 -->
    <!-- 注释可以
     跨行 -->
</body>

案列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</titloe>
</head>
<body>
    <h1>web前端开发</h1>
    <p>超文本标记语言<p>
    <hr />
    <h2>CSS</H2>    
    <P>层叠样式表，用于构建网页样式</p>
    <hr />
    <h2>JS</h2>
    <p>javascript,脚本语言，拥有构建网页行为</p>
</body>
</html>

结果