html、css基础注意点(前端必看篇)

HTML 基础注意点

语法规范

HTML 语言是由标签组成的,标签种类繁多,但遵循统一的语法规范。HTML文档以<!DOCTYPE html>开头,及标签语法格式为:

<标签名 属性名1="属性值1" 属性名2="属性值2"> 内容 </标签名>

其中标签名为该标签的名称,属性名及属性值用来确定标签的属性及属性值,例如:<div class="header">即为一个div标签,其属性值为"header"。

常用标签及属性

HTML常用标签有:<div><span><p><strong>等,每个标签有其特殊的属性。如下所示:

  • <div>: 用于定义HTML文档中划分区块的通用容器标签。
  • <span>: 在行内定义小段文字或者构建代码间关系的标签。
  • <p>: 用于定义段落的标签。
  • <strong>: 用于定义粗体文本的标签。

示例说明一

<!DOCTYPE html>
<html>
<head>
  <title>HTML示例</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="header">头部</div>
  <div class="main">
    <p>这是第一段文字</p>
    <p>这是第二段文字</p>
  </div>
  <div class="footer">底部</div>
</body>
</html>

以上示例中包括使用常见标签div、p和设置CSS样式表。

CSS 基础注意点

选择器

CSS 通过选择器来定义属性规则,常见的选择器有:标签选择器、类选择器、ID选择器和伪类/伪元素选择器等。

属性

CSS有很多属性可供设置,以下列出常用属性。

  • color: 定义文字颜色。
  • background-color: 定义背景颜色。
  • font-size: 定义字体大小。
  • text-align: 定义文字对齐方式。

示例说明二

<!DOCTYPE html>
<html>
<head>
  <title>CSS示例</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .main {
      width: 80%;
      margin: 0 auto;
    }
    .header {
      color: white;
      background-color: blue;
      text-align: center;
    }
    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="header">头部</div>
  <div class="main">
    <p>这是第一段文字</p>
    <p>这是第二段文字</p>
  </div>
  <div class="footer">底部</div>
</body>
</html>

以上示例中包括给元素添加CSS样式的方法和使用class选择器等。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:html、css基础注意点(前端必看篇) - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • HTML设置超链接字体颜色和点击后的字体颜色

    HTML的超链接是网页制作中非常常用的元素,超链接字体颜色和点击后字体颜色是影响页面美观度的重要因素。下面是详细讲解“HTML设置超链接字体颜色和点击后的字体颜色”的完整攻略。 设置超链接字体颜色 通过style属性来设置超链接字体颜色。 html <a href=”http://www.example.com” style=”color:blue;”…

    css 2023年6月9日
    00
  • js实现选项卡内容切换以及折叠和展开效果【推荐】

    下面我会为你详细讲解”js实现选项卡内容切换以及折叠和展开效果”的实现方法。 一、实现选项卡切换 选项卡切换是网站中常见的交互效果,下面是实现选项卡切换的步骤: html代码中添加需要切换的内容,每一个选项卡对应一个内容区域,为每一个选项卡和内容区域添加相应的id,如下: <div class="tab"> <ul cl…

    css 2023年6月10日
    00
  • html粘性页脚的具体使用

    下面就详细讲解一下“HTML粘性页脚的具体使用”的完整攻略。 什么是粘性页脚 在网站设计中,页脚是一个重要的页面元素,可以为用户提供额外的信息和操作选项。而粘性页脚则是指该元素能够始终停留在浏览器窗口的底部,无论用户向下滚动多少内容,它都会一直存在。 如何实现粘性页脚 实现粘性页脚可通过CSS代码实现定位和布局,如下所示: body { margin: 0;…

    css 2023年6月11日
    00
  • 前端使用svg图片改色实现示例

    下面是关于前端使用SVG图片改色的实现攻略。 1. 背景介绍 SVG即Scalable Vector Graphics(可缩放矢量图形),是一种基于XML语法的图像格式。与传统的图片格式不同,SVG图片可以无限缩放而不失真,同时也容易被修改。本攻略讲解的是如何在前端使用SVG图片,替换或改变其中的颜色。 2. 使用SVG图片 在HTML中使用SVG图片有两种…

    css 2023年6月11日
    00
  • 利用CSS3的transition属性实现滑动效果

    使用CSS3的transition属性可以实现网页中的滑动效果。以下是操作步骤: 第一步:为需要实现滑动效果的元素添加CSS样式 我们假设需要给一个div元素添加滑动效果,现在我们先为这个div元素添加样式: div { width: 100px; height: 100px; background-color: blue; position: relati…

    css 2023年6月9日
    00
  • SpringBoot静态资源CSS等修改后再运行无效的解决

    关于“SpringBoot静态资源CSS等修改后再运行无效的解决”,一般有以下两种解决方法: 方法一:增加配置项 在SpringBoot的配置文件application.properties中,增加如下配置项: spring.resources.cache-period=-1 这样修改之后,每次请求静态资源的时候都会重新读取文件,不会使用缓存中的静态文件。缺…

    css 2023年6月9日
    00
  • 浅谈CSS中的继承性,特殊性,层叠性和重要性

    浅谈CSS中的继承性、特殊性、层叠性和重要性攻略 继承性 在CSS中,当某个元素没有设置特定的属性时,它会从其父元素中继承该属性。这种继承称为CSS的“继承性”。CSS属性根据其继承性可以分为两类: 可以继承的属性,如color、font-size、text-indent等; 不可继承的属性,如border、margin、padding等。 所有可继承的属性…

    css 2023年6月10日
    00
  • vue2.0使用swiper组件实现轮播效果

    下面是关于“vue2.0使用swiper组件实现轮播效果”的完整攻略。 安装swiper 首先需要安装swiper组件。可以通过npm进行安装,命令如下: npm install swiper vue-awesome-swiper –save 其中,swiper是主要的swiper组件,vue-awesome-swiper为vue封装的轮播组件。 引入sw…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部