首页 > 其他分享 >网页设计与制作基础（HTML+CSS）

网页设计与制作基础（HTML+CSS）

时间：2024-06-08 16:57:45浏览次数：20  
标签：box flex 网页 定位 元素 HTML 文档 颜色 CSS

HTML常用标签

1、文档结构标签

<!DOCTYPE html>：告诉浏览器文档是HTML5。
<html>：HTML文档的根元素。
<head>：包含文档的元数据，如标题、样式和脚本引用等。
<title>：设置文档的标题，显示在浏览器的标签页上。
<body>：包含文档的可见内容，如文本、图片、链接、列表、表格等。 


<!DOCTYPE html>
<html>
<head>
    <title>我的网页标题</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的HTML示例。</p >
</body>
</html>

​

2、头部元素：

<meta>：提供有关HTML文档的元信息，如字符集、页面描述、关键词等。


<link>：用于链接到外部资源，如CSS样式表。


<style>：用于包含内联CSS样式。


<script>：用于包含或引用JavaScript代码。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <link href="styles.css" rel="stylesheet" >
    <script src="script.js"></script>
    <style>
        /* 这里可以放置内联CSS样式 */
        body {
            font-family: Arial, sans-serif;
        }
        #main { width: 1000px; margin: 0px auto;} 
        .through {
    text-decoration: line-through; 
    font-size: 14px;  }
    
    </style>
</head>

3、内容元素：

<h1> 到 <h6>：定义标题或子标题，<h1> 最大，<h6> 最小。
<p>：定义段落。

<br>：插入一个换行符。
<hr>：创建水平线。

标题和段落
<body>
    <h1>这是主标题</h1>
    <p>这是一个段落。</p >
    <h2>这是二级标题</h2>
    <p>这是另一个段落。</p >
</body>

超链接 


<a>：定义超链接。<a href="  "  target="_blank">

 target 属性值包括：

_self: 在当前浏览器窗口或标签页中打开链接（默认值）。
_blank: 在新的浏览器窗口或标签页中打开链接。
_parent: 在父框架集中打开链接。如果没有父框架集，则效果与 _self 相同。
_top: 在整个窗口中打开链接，取消所有框架。
<framename>: 在指定的框架中打开链接。<framename> 是框架的名称。


<img>：插入图片。

链接和图片

<body>
    <a href=" ">访问示例网站</a >
    <a href="  "  target="_blank">新窗口</a >
    <a href="  "  target="_self">当前窗口</a >
    < img src="image.jpg" alt="一张图片">
    <video src=" "controls>
</body>


<div>：定义文档中的一个区块或区域。


<span>：行内元素。


<ul>、<ol>、<li>：定义无序列表、有序列表和列表项。

列表

<body>
    <h2>无序列表</h2>
    <ul>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ul>

    <h2>有序列表</h2>
    <ol>
        <li>步骤1</li>
        <li>步骤2</li>
        <li>步骤3</li>
    </ol>
</body>

 表格


<table>：表格

 <th>：表头

<tr>：表格行

<td>：表格数据（列 ）

表格

<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>30</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
        </tr>
    </table>
</body>

 


表单及其元素

<form> 用于创建HTML表单，以收集用户输入。action 属性定义了表单数据提交到的URL（网址），而 method 属性定义了数据提交的方式（通常是 "get" 或 "post"）。


<input> 用于创建不同类型的输入字段，如文本字段、密码字段等（<input type=“text/button/image/password...”>）。


<button> 定义了一个点击按钮。当类型为 "submit" 时，点击该按钮会提交表单。


<textarea> 用于创建多行文本输入框。


<select> 用于创建下拉选择框。每个 <option> 标签都定义了一个选择项。这些 <option> 标签都包含在 <select> 标签内。

<label>在表单中用于定义用户界面的描述或标题，for指定<label>与哪个表单控件相关联。

<form action="/submit_form" method="post">
    <!-- 文本输入框 -->
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required><br>

    <!-- 密码输入框 -->
    <label for="pwd">密码:</label>
    <input type="password" id="pwd" name="pwd" required><br>

    <!-- 提交按钮 -->
    <button type="submit">提交</button>

    <!-- 多行文本输入框 -->
    <label for="about_me">关于我:</label><br>
    <textarea id="about_me" name="about_me" rows="4" cols="50">
        在这里输入你的自我介绍...
    </textarea><br>

    <!-- 下拉选择框 -->
    <label for="cars">选择一辆车:</label>
    <select id="cars" name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select><br>

    <!-- 注意：<option> 标签总是包含在 <select> 标签中 -->

</form>

 


<header>、<footer>、<nav>、<article>、<section>、<aside>、<main>：语义化元素，用于更好地描述网页的结构和内容。

4、其他常用元素：

<em>：强调文本（通常显示为斜体）。

<strong>：重要文本（通常显示为粗体）。

<i>：显示为斜体

<code>：计算机代码文本。

<q>：短引用。

<blockquote>：长引用。

<abbr>：缩写词。

<address>：文档或文章的作者/拥有者的联系信息。

<pre>：预格式化的文本。

&nbsp空格

 &copy; 版权符号（©）

 CSS布局思路

1、盒子模型

盒子模型是CSS布局的基础，它将HTML元素视为一个矩形盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。

外边距margin 按照上右下左（顺时针方向）顺序进行设置（margin:0 10px 10px 0）水平居中（margin：auto）

内边距padding上右下左

边框border （border：1px solid/dashed black）

阴影 box-shadow；（box-shadow：0 0 10px-2px rgba(0,0,0.5);）

box-sizing;定义如何计算一个盒的总宽度和总高度，主要设置是否需要加上内边距和边框等。

(box-sizing: content-box|border-box|inherit;)

content-box（默认值）宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

inherit规定应从父元素继承 box-sizing 属性的值。

<!DOCTYPE html>
<html>
<head>
<title>Box Sizing Example</title>
<style>
  .box {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;
  }
</style>
</head>
<body>
  <div class="box">
    This box has a total width and height of 200px, including content, padding, and border.
  </div>
</body>
</html>


2、Flex布局（弹性盒模型）

定义：
Flexbox是一个一维的布局模型，它允许你轻松设计复杂的布局结构，而无需使用浮动或定位。

主要概念

Flex容器（Flex Container）：设置了display属性为flex或inline-flex的元素。
Flex项目（Flex Items）：Flex容器的子元素自动成为Flex项目。
主轴（Main Axis）：Flex项目默认沿着水平方向的主轴排列（除非设置了flex-direction属性为column）。
交叉轴（Cross Axis）：与主轴垂直的轴称为交叉轴。

主要属性 
在fiex容器上：

display：flex

flex-direction: row（横向排列） | row-reverse | column（垂直排列） | column-reverse

flex-wrap: nowrap（默认值，不换行） | wrap（自动换行） | wrap-reverse（以相反顺序自动换行）

justify-content: flex-start（从左向右排序） | flex-end（从右向左排序） | center（居中排列） | space-between （两侧对齐）| space-around（等分间距） 

align-items: stretch（拉伸元素至适应容器） | flex-start（上边缘对齐） | flex-end（下边缘对齐） | center（横中线对齐） | baseline（第一行文本基线对齐）

在Flex项目上：

order: 用来定义项目的排列顺序（数值越小，排列越靠前，默认为0）
flex-grow: 用来定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink: 用来定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis: 在分配多余空间之前，项目占据的主轴空间（默认值为auto，即项目的本来大小）
flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

<!DOCTYPE html>
<html>
<head>
<title>Flexbox 示例</title>
<style>
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 200px;
    border: 1px solid black;
  }
  
  .item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
    text-align: center;
    line-height: 100px;
    color: white;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

 

其他属性与样式类别

1、宽度width

  1. 固定宽度/百分比宽度
  2. 最大宽度max-width/最小宽度。最大/小宽度只是限定性元素，不是实际定义，只有当元素内部有内容填充时才生效

2、高度height

  1. 固定高度（必须是固定高度，不能是百分比高度，除非是在盒内）
  2. 最大高度/最小高度

3、字体

  1. 颜色color
  2. 大小font-size
  3. 粗细font-width：bold（加粗）normal（正常），默认值中等粗细

4、背景

  1. 背景颜色background-color
  2. 背景图像background-image
  3. 背景图像是否重复background-repeat
  4. 背景图像的位置background-position 
    <!DOCTYPE html>
<html>
<head>

<title>背景样式示例</title>
<style>
    /* 选择body元素作为示例 */
    body {
        /* 设置背景颜色 */
        background-color: #f0f0f0;
        
        /* 设置背景图像 */
        background-image: url('图片.jpg');         
        /* 设置背景图像是否重复 */
        background-repeat: repeat-x; /* x方向重复 */
        
        /* 设置背景图像的位置 */
        background-position: center top; /* 居中顶部 */
        /* 你可以使用像素值(px)、百分比(%)或其他关键字，如left, right, top, bottom, center */
    }
</style>
</head>
<body>

<!-- 页面内容 -->
<h1>这是一个背景样式示例页面</h1>
<p>你可以看到背景颜色和背景图像的设置效果。</p >

</body>
</html>

5、Position

1、static（静态定位）
  1. 元素按照正常文档流进行布局。
  2. top、right、bottom、left 和 z-index 属性在静态定位的元素上无效。
  3. 这是元素的默认值。
2、relative（相对定位）
  1. 元素相对于其正常位置进行定位。
  2. 通过 top、right、bottom 和 left 属性调整元素的位置。
  3. 其他元素占据该元素在文档流中的原始空间，即该元素在文档流中的位置会被保留。
  4. 适用于需要相对于自身位置进行微调的情况。
3、absolute（绝对定位）
  1. 元素相对于最近的已定位祖先元素（第一个被赋予非static定位属性的元素）进行定位。
  2. 如果没有已定位的祖先元素，则相对于初始包含块进行定位。
  3. 通过 top、right、bottom 和 left 属性规定元素的位置。
  4. 绝对定位的元素会脱离文档流，即不再占据文档流中的空间。
  5. 可以用于创建复杂的布局和动画效果。
4、fixed（固定定位）
  1. 元素相对于浏览器窗口进行定位。
  2. 即使页面滚动，元素也会始终位于同一的位置。
  3. 通过 top、right、bottom 和 left 属性规定元素相对于浏览器窗口的位置。
  4. 固定定位的元素也会脱离文档流。
  5. 常用于创建导航栏、侧边栏等始终可见的元素。
5、sticky（粘性定位）
  1. 粘性定位的元素在跨越特定阈值之前为相对定位，之后为固定定位。
  2. 阈值是通过 top、right、bottom 和 left 属性中的其中一个进行设置的。
  3. 例如，position: sticky; top: 0; 会在元素到达其包含块的顶部时将其固定在那里。
  4. 适用于需要元素在滚动到特定位置后固定的情况，如一些网站的滚动提示或导航条。

6、颜色

HTML中通常使用十六进制颜色和RGB颜色。

1、十六进制颜色

十六进制颜色代码由6位十六进制数组成，通常用于HTML和CSS中。这6位数字分别代表红、绿、蓝三种颜色的值，每两位对应一个颜色的值。例如，#FF0000 表示红色，其中FF代表红色最大值，00代表绿色和蓝色的值为零。

格式：#RRGGBB
范围：每种颜色的值范围为00至FF（即0至255）
示例：
红色：#FF0000
绿色：#00FF00
蓝色：#0000FF
白色：#FFFFFF
黑色：#000000


2、RGB颜色

RGB颜色表示法使用三个整数（通常在0到255之间）来表示红、绿、蓝三种颜色的强度。这种颜色表示方式广泛应用于电脑图形和显示器技术中。

格式：(R, G, B)
范围：每种颜色的值范围为0至255
示例：
红色：(255, 0, 0)
绿色：(0, 255, 0)
蓝色：(0, 0, 255)
白色：(255, 255, 255)
黑色：(0, 0, 0)
转换关系

十六进制颜色和RGB颜色之间可以相互转换。十六进制中的每两位对应RGB中的一个十进制数值。例如，十六进制颜色#FF0000转换为RGB颜色就是(255, 0, 0)。

标签：box,flex,网页,定位,元素,HTML,文档,颜色,CSS
From： https://blog.csdn.net/nailedit/article/details/139546251

相关文章

  • 从零手撕一个网页版图形编辑器之前端代码框架-整体（2）
    ​本编辑器（土豆猫图形编辑器）社区版代码已开源，开源库地址：https://gitee.com/longhan13/lgxmap_community.git从此章节开始，后续开始讲代码框架、关键模块代码、数学工具（向量、矩阵），感兴趣的朋友最好把代码下载下来，对着代码来阅读文章更有助于理解。本文开始讲解前端代码框架。n......
  • html+CSS+js部分基础运用13
    一、三级联动效果如下图所示：图1三级联动二、设计江苏福彩投注站彩票投注助手编程实现江苏福彩投注站彩票投注助手，页面布局效果如图2所示。图2福彩投注站彩票助手页面功能要求如下：单击“机选1注”、“机选5注”或“机选10注”按钮时，能够随机产生相应条数的数据。......
  • html+CSS+js部分基础运用15
    1、完成输入框内容的实时反向输出。2、银行账户余额变动自动通知项目。设计要求：单击按钮后，余额按照输入框的数额减少，同时将按钮式的提示信息（金额）同步改变。利用侦听属性实现余额发生变化时发出提示信息，同时记录每次支出明细，每笔记录包含支取次数，支取金额、余额等信息。3......
  • 纯CSS+单个div实现抖音LOGO
    纯CSS+单个div就能绘制抖音LOGO关键点：主要借助了两个伪元素实现了整体结构，借助了drop-shadow生成一层整体阴影drop-shadow只能是单层阴影，所以另一层阴影需要多尝试contrast(150%)brightness(110%)则可以增强图像的对比度和亮度，更贴近抖音LOGO的效果预览结果如下：在线......
  • HTML，CSS，JavaScript实例——3D骰子，跨纬度蠕虫，动态登录表单。
    文章目录一、3D筛子1.HTML2.CSS二、跨纬度蠕虫1.HTML2.CSS3.JS三、动态登录表单1.HTML2.CSS一、3D筛子1.HTML<!--ringdivstartshere--><divclass="ring"><istyle="--clr:#00ff0a;"></i><istyle="--clr:#ff0057;">&l......
  • Web大学生网页作业成品——仿腾讯游戏官网网站设计与实现(HTML+CSS+JavaScript)
    ......
  • vsode (Visual Studio Code) JS -- HTML 教程
    vsode(VisualStudioCode)JS–HTML教程JavaScript是什么-JavaScript是一种基于对象和事件驱动的脚本语言，广泛用于在网页上实现动态交互效果。JavaScript可以嵌入到HTML页面中，通过在脚本标签中编写JavaScript代码来实现各种功能。它主要用于处理用户交互、操......
  • html页面上点击图片放大
    需求：我这里是搭配wangeditor插件使用，然后用直接拿到wangeditor输入的内容用dangerouslySetInnerHTML直接渲染的html页面，页面的代码里面并没有<p><p/><img/>这类标签dangerouslySetInnerHTML渲染如下所示：因为代码里面并不存在标签，也没办法给加事件，所以这里只能是用原生js......
  • 原生html+js实现两两元素配对，用线条连接两个元素
    效果如下：画线部分借鉴了“https://blogweb.cn/article/1403842582411”此链接文章作者的代码，感谢！直接放出代码：点击查看代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>配对</title><scripttype=&qu......
  • css3
    css之盒子模型和浮动盒子模型定义：网页设计中用来描述布局元素的一种模型，将每个元素看做一个具有4个边界的矩形盒子组成部分：内容区域content内边距padding边框border外边距margin{margin:上右下左}{padding:浮动块级标签脱离页面，浮动在页面之上：问题：遮盖......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99