Web基础

Java张金贺

已于 2022-12-03 00:16:48 修改

阅读量154

点赞数

分类专栏：前端文章标签： html 前端

于 2022-06-13 14:53:01 首次发布

本文链接：https://blog.csdn.net/weixin_47281685/article/details/125257956

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、HTML基础

（一）快捷生成HTML主体结构：英文！+TAB键。

<!DOCTYPE html>
<!-- 使用HTML5的标准进行文案解析 -->
<html lang="zh">
    <!-- 根标签 -->
<head>
    <!-- 引入与网页相关的描述以及配置信息 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="CSDN,C1,张金贺">
    <!-- 关键词引入 -->
    <meta name="description" content="关于C1的文档">
    <!-- 描述引入 -->
    <meta name="author" content="张金贺">
    <!-- 作者引入 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 宽度等于设备的宽度    元素初始化比例为1.0-->
    <!--  content=
    width视口宽度
    height视口高度
    initial-scale初始化缩放比例
    maximum-scale最大缩放比例
    minimum-scale最小缩放比例
    user-scalable是否允许用户缩放 0或1
     -->
<link rel="stylesheet" href="相对路径">
     <!-- link 引入外部标签
      href 链接文件的路径
      rel(当前文档宇链接文档的关系)：stylesheet CSS样式表
      type 目标文件的类型
      -->
      <style></style>
      <!--  内部样式表 -->
      <script src="js/"></script>
      <script>
          // JS代码
      </script>
      <!-- 引入JS -->
    <title>Document</title>
    <!-- 网页标题 -->
</head>
<body>
    <!-- 正文 -->
</body>
</html>

（二）行、块标签

1、块标签block

<div> </div>
    <!-- 独占一行，默认宽度占满父级，
    高度为0，子级内容撑开高度 -->
    <h1></h1>
    <!-- 大标题   一个页面只允许写一次 -->
    <h2></h2>
    <!-- 副标题   不要超过8个 -->
    <!-- h1-h3是具备搜索权重的 -->
    <h3></h3>------<h6></h6>
    <!-- 小标题   个数不受限制 -->
    <!-- H5新增标签: -->
    <article>
        <h1>大标题</h1>
        <nav>导航栏</nav>
        <header>头部信息</header>
        <aside>侧边栏</aside>
        <section>区域</section>
        <footer>底部信息</footer>
    </article>
    <!-- 代表文章 -->

2、行标签/内联标签inline

<!DOCTYPE html>
<html lang="zh">
<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>标签</title>
    <style>
        *{
            /* 通配选择器 */
            /* 所有标签 */
        }
    </style>>
</head>
<body>
    <!-- 行标签特点：
     同排序跟显示，遇到父级边界换行
     不支持宽高，内容撑开宽高
     不支持上下 外边距 margin
     不正常显示上下内边距 padding
     换行被解析
     -->
    <span>选项1</span>
    <span>选项2</span><span>选项3</span>  换行被解析
    <a href="" target=""></a>
    <i>倾斜</i>
    <b>加粗</b>
    <!-- 实现富文本 -->
    <sub>下角标</sub>
    <sup>上角标</sup>
    <em>倾斜 具有一定的搜索权重</em>
    <strong>加粗 具有一定的搜索权重</strong>
</body>
</html>

3、行块标签inline-block

    <img />
    <!-- 
    src资源路径
    title鼠标悬停时提示的文本
    alt图片不能正常显示的提示文本
    只给宽度或高度时会等比例变化
     -->

（三）标签的互换

<style>
        p{
            display: inline;
        }
        span{
            display: block;
        }
    </style>

二、表单格式

<form action="信息提交地址" method="">
        <!-- method 默认为get 明文 信息拼接发送-->
        <!-- method post 信息打包发送-->
        <input type="text" placeholder="你好">
        <!-- 文本框 -->
        <!-- placeholder 提示文本 -->
        <input type="password" value="" name="">
        <br>
        <!-- 密码框 -->
        <br>
        <input type="submit" value="" name="">
        <!-- 提交 -->
        <!-- value:文本输入的值 -->
        <!-- name :提交的关键词 -->
</form>

三、CSS基础

1、引入方式

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
    <link rel="stylesheet" href="相对路径">
    <!-- 外部样式表 -->
    <style>
        /* 内部样式表 */
        @import url("a.css");
        /* 引入其他CSS */
    </style>
</head>
<body>
    <div style="display: block;"></div>>
    <!-- 内联样式表 -->
</body>
</html>

2、背景色

三种方式：单词、RGBA(RGB)、十六进制。

3、背景图

background-size: w h;w宽度h高度
如果只给其中一个，另一边会等比例变化两个特殊的值:
contain图片的长边占满父级cover 图片的短边占满父级。

background-position: 100px 100px;backgrould-repeat: no-repeat;

4、文本常用格式

p {
    color: skyblue;
    background-color: pink;
/* height: 80px;*/
    font-size: 30px;
    line-height: 80px;
/* font-size: 4em;*/
    font-family: "PingFang sc",
/*文本对齐方式*/
    text-align: left;
/*首行缩进*/
    text-indent: 2em;
/*字体间距*/
    letter-spacing: 10px;
/*单词间距*/
    word-spacing: 100px;
/*大小写*/
    text-transform: capitalize;
}

a{
/*文本装饰线―*/
    text-decoration: line-throu;
    font-size: 30px;
}

5、常用选择器

<style>
* {
    /* 通配选择器 */
margin: 0;
padding: 0;
}
</style>

/*
id选择器
class选择器
后代选择器：div p{ }
群组选择器：a,p{ }
子代选择器：div>p{ }
属性选择器：[class]{ }
*/

一个id名，在同一个html文件中只能出现一次
优先级id (100) > class (10) > tag( 1)
内联样式(1000)

<style>
    .text1 {color: #999998 !important;}
    #son {color: #OOff00;}
</style>

<p id="son" class="text1 " style-color: #ff0000;">hello world</p>

CSS选择器优先级中有一个特殊的规则:【!important】，在一个样式声明中使用【!important】规则时，这个样式将覆盖其他的任何声明，与优先级无关。