• DAY04-网页布局实战&常用HTML标签&完整盒模型

    文章目录

    网页布局实战

    一 HTML标签

    分析家居网的内容构成

    http://web.woniulab.com:8082/index.html

    HTML的标签分为两类：

    布局标签：现在都采用div标签来布局,div是块标签

    文本标签：用于组织网页的内容，如文本、图片、链接等等

    二 文本标签

    image-20221227110743596

    1文字标签

    标题标签h
段落标签p
换行标签br
粗体b
斜体i
水平线hr
文本标签span

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    2 列表

    image-20221227105800239

    有序列表ol-li
无序列表ul-li

    • 1
    • 2
    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表title>
	head>
	<body>
		
		<ol start="1">
			<li>javali>
			<li>数据库li>
			<li>HTMLli>
		ol>
		
		<ul type="square">
			<li>javali>
			<li>数据库li>
			<li>HTMLli>
		ul>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    3 图片标签

    image-20221227110026227

    <img src="img/banner1.jpg" alt=""> 

    • 1

    4 相对路径与绝对路径

    1)绝对路径
    定义：完整的路径
    1.以电脑盘符开头的是绝对路径 C:/
    2.完整的网址是绝对路径 https://www.baidu.com

    ​ 2)相对路径
    定义：相对对当前文件的路径

      1. ./是相对于当前目录 （./可以省略不写的）
  2. ../是找到上一级目录
  3. 目录名/  找到一下级目录

    • 1
    • 2
    • 3

    5 超连接

    image-20221227110245347

    超连接：用来实现页面之间跳转的标签。

    1)语法结构

    <a href="http://www.baidu.com">内容a>

    • 1

    ​ 2)a标签的可选属性

        target -指定超链接点击后打开的目标位置
                 默认为_self  在自身窗口打开
                      _blank 在新窗口打开

    • 1
    • 2
    • 3

    三 行和块的区分

    ​ 块级标签

    ​ 特点: 独占一行，宽度默认为100%,默认都支持width、height属性。 如：div h1-h6 p

    ​ 作用: 一般来说,网页布局都是用div块级标签

    ​ 行内标签

    ​ 特点：默认不支持width、height来改变尺寸，大小由内容来决定 如：b i

    ​ 作用: 一般在网页上组织内容的时候,使用行内

    四 行和块的转换

    在布局的过程中，有时候我们需要进行 行和块的转化。

    将块元素转化为行元素、将行元素转化为块元素

    需要用到display属性

    inline:转化为行元素
block: 转化块元素
inline-block：行内块

    • 1
    • 2
    • 3
    .sp2{
    width: 200px;
    height: 100px;
    background-color: antiquewhite;
    /* 行内块:这个标签依然是行标签,但是这个标签具有块的特性 */
    display: inline-block;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    五 标准盒模型

    image-20221227105207439

    image-20221026144217974

    盒模型属性

    属性名值解释
    width100px宽度
    height100px高度
    border1px solid red边框
    padding10px内边距
    margin10px外边距

    1 外边距

    ​ 前面学过

    2 内边距

    内边距也称为内留白，是边框与内容之间的距离。

    image-20221227111416575

    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>Documenttitle>
    <style>
        .category{
            width: 840px;
            height: 380px;
            border: 1px solid red;
            /* 内边距 */
            padding: 10px;
        }
        .cat-item{
            width: 260px;
            height: 350px;
            background-color: pink;
            float: left;
            /* 外边距 */
            margin-right: 10px;
        }
    style>
head>
<body>
    <div class="category">
        <div class="cat-item">div>
        <div class="cat-item">div>
        <div class="cat-item">div>
    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    3 边框

    盒子的边框要研究三个内容：

    1. 边框的方向（left、right、top、bottom）
    2. 边框大小（用像素来表示）
    3. 边框的样式（实线、虚线、点线）

    solid:代表实线

    dashed：代表虚线

    dotted：代表点线

    border:1px solid red

    • 1

    4 盒子模式

    1. 标准模式
      一个盒子最终的宽度 = width+border*2 + padding*2

    ​ 一个盒子最终的高度 = height + border * 2 + padding*2

    1. 怪异模式
      一个盒子最终的`宽度 = width + border*2

    ​ 一个盒子最终的`高度 = height + border * 2

    1. 怎么使用怪异模式

      需要在盒子的样式上，加一个 box-sizing样式
      box-sizing:content-box; 使用标准模式(默认)
      box-sizing:border-box; 使用怪异模式

    六 项目

    完成首页内容填充

  • 相关阅读:
    Java集合框架之Map集合
    Visual Studio: Arm64EC官方支持来了
    零基础html学习/刷题-第三期
    工业智能网关BL110应用之四十九： 数据上传华为云的配置
    React + Router
    SpringBoot服务集成ELK
    QT(35)-操作EXCEL-QXlsx-QAxObject
    SpringBoot进阶教程(七十七)WebSocket
    【面试题】说说你对 async和await 理解
    云服务器带宽对上传下载速度的影响
  • 原文地址：https://blog.csdn.net/qq_33396183/article/details/128177347