整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML常用标签概述(可用于网店装修)

  • TML标签:

  1. 所有内容都在<html></html>标签之内;

  2. <head></head>内放的是头部信息,是对页面的描述,不会直接显示在页面中。

  3. <head></head>内的<title></title>中设置的是页面的标题,<title></title>只能放在<head></head>中;

  4. <body></body>是页面的主体,大部分显示内容都定义在这里。

  • HTML注释:<!-- -->:

    1. 注释不允许嵌套

  • html常用标签:

    1. h标签(标题),HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体。h1最大,h6最小。

    2. <br/>只是回车,<p>是段落。<p>前后会有比较大的空白,而<br/>则没有。

    3. <center>居中显示.

    4. <b>、<strong>粗体,<i>、<em>斜体。<u>下划线。

    5. <sub>2</sub>下标,如:H<sub>2</sub>O

    6. <sup>2</sup>上标,如:10<sup>2</sup>

    7. <font></font>字体标签,<font color=“red“ size=“7” face=“隶书”>红色</font>。color(设置颜色) size(1-7) face(设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示)

    8. <hr> color size(厚度) width(长度) align=left/center/right (默认为剧中显示)

    9. <pre> 预格式化 保持本色;

    10. HTML特殊字符:&lt;(小于号,less than);&gt;(大于号,greater than);&nbsp;(空格)。

    11. 超链接:<a>标签的一些常用属性:href、title、target、name

    12. 插入图片:<img src=“路径”/>

    13. 列表:dl→(定义列表),ul→(无序列表), ol→(有序列表)。

    14. 表格:<table>;创建行:<tr>;创建单元格:<td>;表页眉:<thead>;表主体:<tbody>;表页脚:<tfoot>;表头:<th>。

    15. rowspan(合并行)、colspan(合并列)

    16. <input>是主要的表单元素,type的可选值:submit(提交按钮)、button(普通按钮)、checkbox表单标签:(复选框)、file(文件选择框)、hidden(隐藏字段)、image(图片按钮)、password(密码框)、radio(单选按钮)、reset(重置按钮)、text(文本框)。

    • meta标签:(包括在head标签中。主要用来描述页面自身信息,元信息)

    1. <meta name="keywords" content="C#学习资料,4k8k.net,.net开发,软件开发,编程自学网"/>

    2. <meta name="description" content="免费更新最新C#相关技术知识,主要包括:.net基础,网页前端,三层架构,SQL数据库..."/>

    3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />网页编码

    4. <meta http-equiv="Refresh" content="3" />三秒钟后刷新此网页。

    5. <meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒钟后重定向到新网页。

    6. <meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。

    7. <meta name="名字" content="值" />关于网页的描述信息。

    8. <meta http-equiv="名字" content="值" />模拟http响应头信息。

    C#编程自学_做最好的.net自学资料站_更多文章请访问:http://www.4k8k.net/

    欢迎订阅。

    SS中的浮动(Floats)、定位(Positioning)和显示(Display)属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景,帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。

    浮动(Float)

    浮动是CSS中用于实现元素排列的一种方式,它可以让元素脱离正常的文档流,并可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动元素的边缘。

    .element {
      float: left; /* 或者 'right' */
    }
    

    使用场景

    • 文字环绕图片。
    • 创建水平导航栏。
    • 无网格系统时的列布局。

    注意事项

    • 清除浮动(Clearing Floats):使用clear属性可以防止元素被浮动元素覆盖。
    .clear-element {
      clear: both; /* 可以是 'left', 'right', 或 'both' */
    }
    
    • 包含浮动(Containing Floats):浮动元素的父容器可能不会扩展以包含浮动的子元素,可以通过清除浮动或使用其他技术(如overflow)来解决这个问题。
    • 浮动塌陷(Float Collapse):浮动元素不占据空间,可能导致父元素高度塌陷。

    定位(Position)

    定位属性允许你控制元素的位置,它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。

    .element {
      position: static | relative | absolute | fixed | sticky;
    }
    

    使用场景

    • 相对定位(Relative Positioning):元素相对于其正常位置进行偏移。
    .relative-element {
      position: relative;
      top: 10px;
      left: 20px;
    }
    
    • 绝对定位(Absolute Positioning):元素相对于最近的已定位父元素进行定位。
    .absolute-element {
      position: absolute;
      top: 0;
      right: 0;
    }
    
    • 固定定位(Fixed Positioning):元素相对于视口进行定位,即使页面滚动也不会移动。
    .fixed-element {
      position: fixed;
      bottom: 0;
      left: 0;
    }
    
    • 粘性定位(Sticky Positioning):元素基于用户的滚动位置在相对和固定定位之间切换。
    .sticky-element {
      position: sticky;
      top: 10px;
    }
    

    注意事项

    • 定位元素可能会脱离文档流,影响周围元素的布局。
    • z-index属性可以控制堆叠顺序。
    • 绝对定位元素的容器应有position: relative;,以便正确定位。

    显示(Display)

    display属性是CSS中最重要的用于控制布局的属性之一,它定义了元素如何显示在页面上。

    .element {
      display: block | inline | inline-block | flex | grid | none;
    }
    

    使用场景

    • 块级元素(Block):display: block;使元素表现为块级,占据新的行。
    .block-element {
      display: block;
    }
    
    • 内联元素(Inline):display: inline;使元素在文本行中显示,不开始新行。
    .inline-element {
      display: inline;
    }
    
    • 内联块元素(Inline-Block):display: inline-block;允许元素并排排列,同时拥有块级元素的宽度和高度属性。
    .inline-block-element {
      display: inline-block;
    }
    
    • 弹性盒子(Flex):display: flex;创建了一个弹性容器,其子元素可以灵活地在容器内排列。
    .flex-container {
      display: flex;
    }
    
    • 网格(Grid):display: grid;创建了一个网格容器,可以定义行和列以及在网格内放置元素。
    .grid-container {
      display: grid;
    }
    
    • 隐藏元素(None):display: none;将元素隐藏,且不为元素保留空间。
    .hidden-element {
      display: none;
    }
    

    注意事项

    • 使用display: none;与visibility: hidden;的区别在于后者仍保留元素占据的空间。
    • display: flex;和display: grid;为现代布局提供了更多控制,通常比浮动和定位更优。

    示例

    HTML结构

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Float, Position, and Display Example</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    
    <div class="header">
      <div class="logo">Logo</div>
      <div class="navigation">Navigation</div>
    </div>
    
    <div class="main-content">
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
    </div>
    
    <div class="footer">Footer</div>
    
    <div class="fixed-element">Fixed Element</div>
    
    </body>
    </html>
    

    CSS样式

    /* Reset some default styles */
    body, h1, p {
      margin: 0;
      padding: 0;
    }
    
    /* Header styles */
    .header {
      background-color: #f8f8f8;
      border-bottom: 1px solid #e7e7e7;
      padding: 10px;
      overflow: hidden; /* Clearfix for floated elements */
    }
    
    .logo {
      float: left;
      font-size: 24px;
    }
    
    .navigation {
      float: right;
      font-size: 18px;
    }
    
    /* Main content styles */
    .main-content {
      padding: 20px;
    }
    
    .sidebar {
      float: left;
      width: 200px;
      background-color: #ddd;
      padding: 10px;
    }
    
    .content {
      margin-left: 220px; /* Make space for the sidebar */
      background-color: #eee;
      padding: 10px;
    }
    
    /* Footer styles */
    .footer {
      background-color: #f8f8f8;
      border-top: 1px solid #e7e7e7;
      text-align: center;
      padding: 10px;
      position: relative; /* For demonstration purposes */
      top: 20px; /* Move the footer down a bit */
    }
    
    /* Fixed element styles */
    .fixed-element {
      position: fixed;
      bottom: 10px;
      right: 10px;
      padding: 5px 10px;
      background-color: #333;
      color: #fff;
      z-index: 1000; /* Ensure it stays on top */
    }
    
    /* Clearfix hack */
    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }
    

    在这个例子中,我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航,以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚,并使用固定定位为页面添加了一个始终可见的固定元素。最后,我们使用了overflow: hidden;来清除头部中浮动元素的影响。

    结语

    浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性,前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展,我们也需要不断学习和适应新的CSS特性,以保持我们技能的前沿性。

    格是页面中常见的一中标签,通常是用来数据展示的,而不是用来布局。

    一、创建表格

    • 语法

    <table>

    <tr>

    <td>单元格内的文字</td>

    ...

    </tr>

    ...

    </table>

    • 说明
      • table 标签:定义一个表
      • tr 标签:定义表格中的一行,必须嵌套在table标签中,有几对,表示表格有几行
      • td 标签:定义表格中的单元格,必须嵌套在标签中,一对 中包含几对,就表示该行中有多少列(或多少个单元格)

    • 注意
      • 中只能嵌套
      • 标签,就像一个容器,可以容纳所有的元素

    表格属性

    设置表格的外观样式

    表头标签

    • 说明
    • 表头一般位于表格的第一行或第一列,其文本加粗居中,如下图所示,即为设置了表头的表格。设置表头非常简单,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可
    • 示例

    • 代码

    <table border=1>

    <tr>

    <th>姓名</th>

    <th>性别</th>

    <th>电话</th>

    </tr>

    <tr>

    <th>张三</th>

    <td>女</td>

    <td>18611110000</td>

    </tr>

    <tr>

    <th>李四</th>

    <td>男</td>

    <td>18711110000</td>

    </tr>

    <tr>

    <th>王五</th>

    <td>男</td>

    <td>18811110000</td>

    </tr>

    </table>

    标题标签

    表格标题标签,为表格添加标题,跟随表格的位置而移动。设置标题,我们用的是caption标签。

    • 语法

    <table border="1">

    <caption style="text-align:left">My savings</caption>

    <tr>

    <th>Month</th>

    <th>Savings</th>

    </tr>

    <tr>

    <td>January</td>

    <td>0</td>

    </tr>

    </table>

    • 说明

    将标题定位在表格的左|右|上|下位置。

    • 示例

    合并单元格(重点)

    • 分类

    跨行合并 rowspan=“合并单元格的个数”

    跨列合并 colspan=“合并单元格的个数”

    合并顺序:先上后下,先左后右

    • 代码

    ...

    姓名

    张三

    性别

    李四

    照片

    家庭住址

    张三

    性别

    李四

    照片

    ```

    • 合并方法:

    (1)先确定是跨行还是跨列合并

    (2)根据先上后下,先左后右的原则,找到目标单元格,写上合并方式(rowspan/colspan)和要合并的单元格数量

    (3)删除多余的单元格

    表格结构划分(了解)

    表格的结构划分,使用thead、tbody 、tfoot 三种标签

    • 说明
    • 标签用于组合 HTML 表格的表头内容 元素应该与和元素结合起来使用,用来规定表格的各个部分(表头、主体、页脚)
    • 语法

    <table border="1">

    <thead>

    <tr>

    <th>Month</th>

    <th>Savings</th>

    </tr>

    </thead>

    <tfoot>

    <tr>

    <td>Sum</td>

    <td>0</td>

    </tr>

    </tfoot>

    <tbody>

    <tr>

    <td>January</td>

    <td>0</td>

    </tr>

    <tr>

    <td>February</td>

    <td></td>

    </tr>

    </tbody>

    </table>

    • 提示

    (1) 元素内部必须包含一个或者多个 标签。

    (2) thead, tbody, 和 tfoot 元素默认不会影响表格的布局。用途主要是可以使用 CSS 来为这些元素定义样式,从而改变表格的外观。