HTML+CSS学习笔记

news2024/12/25 12:18:28

HTML

1.开发环境

2.创建HTML文件

3.HTML元素

3.1HTML文件结构

3.2HTML标签

3.3HTML属性编辑编辑

3.4HTML区块

3.4.1块元素

3.4.2行内元素

3.5HTML表单

CSS

1.CSS简介

2.CSS语法编辑

3.CSS三种导入方式

内联样式

内部样式

外部样式

4.选择器

5.CSS常用属性

6.CSS盒子模型

7.CSS浮动

8.定位编辑

HTML

1.开发环境

在VSCode中安装HTML CSS Support、Live Serve（可实时预览页面变化）、Auto Rename Tage(在修改HTML标签的时候，同步修改与之匹配的另一个标签)

2.创建HTML文件

--新建html文件

--在第一行输入！+Tab键，就会生成一个完整的HTML文档结构

--点击鼠标右键->Open with Live Server 可以在浏览器中观察页面

3.HTML元素

3.1HTML文件结构

<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一个位置 */
        }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2158446.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！