day02

最新推荐文章于 2024-11-14 10:56:19 发布

weixin_44795592

最新推荐文章于 2024-11-14 10:56:19 发布

阅读量92

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44795592/article/details/126934040

版权

DAY02-网页布局分析

一、网页布局分析

（1）打开开发者工具，一般按F12

（2）分析开发者工具

console：代表控制台，网页代码写错了，这个错误信息会在控制台显示出来。可以在这个地方查错
Elements: 代表网页布局的代码。里面全是HTML代码。
Styles: 代表网页样式代码，CSS代码,专门用来管理我们网页样式
Sources: 网页的源代码，以后可以在这个模块中完整查看网页代码
Network: 这是网页发送请求的地方

（3）模块分析

二、网页布局的三大核心技术

三大技术：

HTML：网页布局结构，通过html实现网页布局

CSS：网页样式代码，通过css实现网页样式技术

JavaScript：网页脚本代码，可以实现动态交互技术

HTML技术

HTML：超文本标记语言

超文本：通过一系列的超链接，将不同空间里面的资源联系在一起，形成一个网状的文本。

（可引入图片，超链接，支持音频等，可以进行数据的传递）

普通文本：如txt文档

标记语言：不是编程语言，通过标签来进行内容组织，浏览器进行解析，只要标签写对了。浏览器就能按照你的标签解析你的网页代码

CSS技术

（Cascading style sheet）层叠样式表

网页中专门设计的一项技术，专门负责页面的样式

（如网页的颜色，、宽度、高度等）

JavaScript技术

网页的脚本代码,我们可以在网页布局完成后，添加JavaScript代码实现网页动态交互
比如: .

点击按钮后登录
轮播图滑动
选中商品的规格
折叠网页中某个模块

三、网页基础结构

文档类型
任何一个网页， 都有且仅有一个html根标签， 告诉浏览器这个部分开始，网页布局代码就可以先解析
<!DOCTYPE html>
<html lang="en">
    网页头部，网页地址栏、网页的导航
<head>
    告诉浏览器解析网页编码规则，尤其适用于IE浏览器
    <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>
   
</body>
</html>

（1）.

<!DOCTYPE html>：不能省略，默认告诉浏览器解析我对网页，按照h5的标准来

（2）头部的标签

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

chartset-utf-8这个表示告诉浏览器我们当前这个页面编码格式。如果不设置，IE浏览器解析会乱码，专门设置这句话让我们代码在IE浏览器下面运行兼容。
name="viewport"开发手机浏览器页面的时候，告诉我们手机浏览器页面如何显示

（3）网页的SEO优化

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

Keywords代表关键词， content具体的关键词有哪些。
一旦以后你的页面被搜索引擎收录，在搜索弓|擎输入这些关键字。有可能搜到你的页面

四、HTML标签

首先绘制网页结构，使用HTML代码，学习html标签

HTML的标签分为两类:

布局标签:可以使用这些标签进行页面布局，- -股布局标签都块标签。(这个标签占满一 -行)
文本标签:用于组织网页内部的结构，文本、图片、链接等等
后续网页开发布局需要用的标签div标签

div标签

    <!-- 标签的class名字 -->
    <!-- 每一个div表示一个盒子（容器） -->
    <div class="header"> </div>
    <div class="banner"> </div>
    <div class="content"> </div>
    <div class="footer"> </div>

现在布局都要采用div来布局，可以给每一个div增加一个class名字

这个标签上面id属性代表唯一-值, 身份证，这个必须唯一.
class可以用于给标签取一个名字。名字是可以重复的

h1-h6：标题，文本标签，组织网页标题的标签

        <h1>header</h1>
        <h2>header</h2>
        <h3>header</h3>

span标签：用于组织文本

<span>banner1</span>

a标签：超链接

<a href="https://www.baidu.com/" target="_blank">百度</a>

超链接标签，可以跳转本项目中的页面，可以跳转到外部网站页面

herf属性里面写的是跳转路径

target可以指定我们跳转页面的方式

_blank代表在一个空白的标签页显示这个网页
_self打开新页面的时候默认覆盖当前页面。默认就是这个值
parent代表在父窗口打开页面(暂无用不到)
_top在顶层窗口打开页面(暂时用不到)

img图片标签

<img src="https://img2.baidu.com/it/u=4084621093,2971972319&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="海边风景照" title="海边照片">

src属性:代表我们图片地址，默认网络地址。
alt属性:当我的图片加载失败的时候，用文本来替代这个图片
title属性:代表当前鼠标移入图片。出现解释的文本

注释

补充：html标签注释：用来注释需要解释的文本

<!-- 标签的class名字 -->

快捷键：ctrl+/

五、CSS网页样式

HTML每一个标签都要自己的功能如：

H1-H6代表标题，用这个标签，浏览器就会解析为标题标签，标签中的文本会默认赋予一些样式。

div标签，默认没有任何样式，浏览器不会赋予任何样式。

CSS: (Cascading style Sheets)层叠样式表

层叠:可以在网页中多个地方加入CSS样式，会多个地方的样式合并在一起，最终会选择优先级高的样式作用于标签。

一个标签样式来源于很多方面，我们最终在浏览器里面根据优先级计算出这个盒子最终的样式(由每一部分
层叠在一起的结果,遇到相同的以优先级高的为准,如果不一样样式合并在一起)

样式表:样式规则代码。

浏览器默认赋予标签的样式

比如H1的字体就是比H2更大，这是官方的标准，浏览器按照这个标签解析代码
超链接默认文本不是黑色，而是蓝紫色
span标签默认的颜色黑色
浏览器用户自定义样式

如修改浏览器默认字体大小。本质是改变网页字体大小
用户自己写代码改变

内联样式:直接在每个标签上给这个原始增加css样式代码
内部样式:内部样式将样式写的head标签里面。
外部样式:将css样式单独放在一个文件中，引入到这个HTML文件中使用

内联样式

每个标签默认支持一个style属性

    <div style="width: 100%;height: 100px;background-color: aliceblue;" >
        header
    </div>

width:100px;
height:100px;
background-color: antiguewhite;
width代表盒子的宽度，值一般用px来表示
height代表盒子的高度。用x来表示尺寸
background-color:设置盒子的背景颜色

特点：

内联样式优先级比较高
内联样式必须在标签身上写，这个样式只能在当前标签上面用，其他标签需要用，拷贝代码

内部样式

    <style>
        /* #content == id="content" #默认要找原始身上是否有id属性 */
        /* #content{
            width: 200px;
            height: 300px;
            background-color: red;
        } */
        /* . content == class="content"*/
        div{
            width: 200px;
            height: 300px;
            background-color: red;
        }
    </style>