HTML+CSS学习笔记-CSDN博客

<html>//用来标记HTML文档的开始
    <head>    //用来标记HTML文档头部的开始

    </head>   //用来标记HTML文档头部的结束
    <body>    //用来标记HTML文档主体的开始

    </body>   //用来标记HTML文档主体的结束
</html>       //用来标记HTML文档的结束

3.2HTML标签

在body中添加代码！

以下为一些常用标签

<h1>一级标题标签</h1>
    <h2>二级标题标签</h2>
    <h3>三级标题标签</h3>
    <p>这是一个段落标签</p>
    <p>更改文本样式：<b>字体加粗</b>、<strong>加粗</strong>、<i>斜体</i>、<u>下划线</u>、<s>删除键</s></p>


    <ul>
        <li>无序列表元素1</li>
        <li>无序列表元素2</li>
        <li>无序列表元素3</li>
    </ul>

    <ol>
        <li>有序列表元素1</li>
        <li>有序列表元素2</li>
        <li>有序列表元素3</li>
    </ol>

这个为表格标签，table为外标签（border为边框属性），tr（table row）代表行，td（table data）代表每一行每一列的具体数据，th（table head）代表每一列的标题

<table border="1">
        <tr>
            <th>列标题 1</th>
            <th>列标题 2</th>
            <th>列标题 3</th>
        </tr>
        <tr>
            <td>元素 1</td>
            <td>元素 2</td>
            <td>元素 3</td>
        </tr>
        <tr>
            <td>元素 11</td>
            <td>元素 12</td>
            <td>元素 13</td>
        </tr>
        <tr>
            <td>元素 21</td>
            <td>元素 22</td>
            <td>元素 23</td>
        </tr>
    </table>

实现效果：

3.3HTML属性

    <a href="https://docs.geeksman.com">这是一个超链接 </a>
    <br> <!--<p> br 是换行标签</p>-->
    <hr> <!--<p> hr 是水平分割线</p>-->
    <a href="https://docs.geeksman.com" target="_blank">这是第二个超链接</a>
    <!--<p> target是超链接的属性，表示怎么到这个链接，_blank为在新窗口打开</p>-->
    <img src="" alt="">
    <!-- img 标签是用于在网页中嵌入图像 从而实现图像的显示和呈现
         src可以是路径也可以是url
         alt是用于定义图像的替代文本(图片显示不了时显示的文本)
    -->

3.4HTML区块

3.4.1块元素

3.4.2行内元素

--div是一个块标签没有任何语意经常用于创建页面的布局结构

--.nav+Tab可以创建属性class为nav的div块元素,#nav+Tab可以创建属性id为nav的div块元素

--span把一小段文本包装起来,以便于对它们使用CSS,JS

3.5HTML表单

form标签是表单的容器（创建表单与创建表格差不多）

label与span作用差不多,但label仅限于与input一同使用

form标签属性action为提交到何处需要服务器需要后端提供的API

单选对应type是radio,对属性name一致的起作用;

多选对应的type是checkbox,对属性name一致的起作用

for属性可以把label标签绑定到input元素

    <form action="">
        <label>用户名：</label>
        <input type="text" placeholder="请输入用户名" ><br><br>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd" placeholder="请输入密码"><br><br>

        <label>性别</label>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女<br><br>

        <label>爱好：</label>
        <input type="checkbox" name="hobby">唱歌
        <input type="checkbox" name="hobby">跳舞
        <input type="checkbox" name="hobby">RAP <br><br>

        <input type="submit" value="提交">
    </form>

实现效果：

CSS

1.CSS简介

2.CSS语法

3.CSS三种导入方式

内联样式

<h1 style="color:red;">一级标题,使用内联样式</h1>

内部样式

（在head中写）

    <style>
        p{
            color: blue;
            font-size: 16px;
        }

        h2{
            color:green;
        }
    </style>

外部样式

在项目下新建一个CSS文件夹，新建css文件

在HTML的head中加入link标签，herf为css文件路径

<link rel="stylesheet" href="./CSS/style.css">

然后可以直接使用

<h3>三级标题，应用外部样式</h3>

4.选择器

    <style>
        /*元素选择器*/
        h2{
            color:aqua;

        }

        /* 类选择器 */
        .highlight{
            background-color: yellow;
        }

        /* ID选择器 */
        #header{
            font-size: larger;
        }

        /* 通用选择器 */
        *{
            font-family: 'KaiTi';
        }

        /* 子元素选择器 */
        .father > .som{
            color:green
        }

        /* 后代选择器 */
        .father p{
            color:brown
        }

        /* 相邻元素选择器 */
        /* 只对h3下面的p标签起作用 */
        h3 + p{
            background-color: red;
        }
        
        /* 伪类选择器 */
        /* hover为悬停触发 first-child nth-child 第1、n个子元素触发 */
        #element:hover{
            background-color: purple;
        }

        /* 伪元素选择器
        创建虚拟的元素
            ::after
            ::before */
    </style>

    <div class="father">
        <p class="son">子元素选择器</p>
        <div>
            <p class="grandson">后代选择器</p>
        </div>
    </div>
    <p>这是一个普通的p标签</p>
    <h3>这是一个相邻兄弟选择器</h3>
    <p>这是另一个p标签,相邻元素选择器只渲染这个p</p>
    <h3 id="element">伪类选择器</h3>

5.CSS常用属性

    <h1 style="font:bolder 50px 'KaiTi';">这是一个 font 复合属性示例</h1>
    <p style="line-height: 40px;">这是一段很长的文本,line-height可以改变行高，行与行间隔</p>
    <div class="block">这是一个块级标签</div>
    <span class="inline">这是一个行内标签</span>
    <img src="" alt="" class="inline-block">

    <style>
        /* 块级元素有高、宽属性 */
        .block{
            background-color: aqua;
            width:200px;
            height:2;
        }
        /* 行内元素无高、宽属性 */
        .inline{
            background:brown;
        }

        /* 行内块不独占据一行，有高、宽属性 */
        .inline-block{
            width:100px;
            height:150px;
        }
    </style>

    <div style="display: inline;"></div> 
    <!-- display可以将元素转换为块级 行内元素 -->

6.CSS盒子模型

    <style>
        .boder-demo{
            background-color: yellow;
            width:300px;
            height:200px;
            /* border属性可更细化 */
            border-style: soild;
            border-width: 10px;
            /* 参数可以是1~4个 */
            border-color: blueviolet;
        }
        .demo{
            background-color: aqua;
            display:inline-block;
            border: 5px soild yellowgreen;
            /* border为复合属性 */
        }
    </style>

7.CSS浮动

    <style>
        .father{
            background-color: aqua;
            height:150px;
        }
        .left-son{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float:left;
        }
        .right-son{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            float:right;
        }
    </style>

    <div class="father">
        <div class="left-son">
            左浮动
        </div>
        <div class="right-son">
            右浮动
        </div>
    </div>

        .father{
            background-color: aqua;
            height:150px;
            overflow: hidden;
        } 
        /* 清除浮动 上下两种方式*/
        .father::after{
            content:"";
            display:table;
            clear:both
        }

8.定位

        .box-relative{
            position:relative;
            /* 相对定位，不脱离正常的文档流 */
            position:absolute;
            /* 绝对定位，脱离正常的文档流 */
            position:fixed;
            /* 固定定位，固定在web一个位置 */
        }