HTML && CSS 学习总结

最新推荐文章于 2024-09-01 23:06:50 发布

Toscano Anderson

最新推荐文章于 2024-09-01 23:06:50 发布

阅读量52

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/weixin_54207267/article/details/125691619

版权

盒子文字阴影（此项我最喜欢并且在5个web页面设计上运用）

总结

Html是Hypertext Markup Language缩写。即超文本标记语言是用于描述网页文档的一种标签。

HTML整体说明

整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成；

一个元素由开始标签，内容，结束标签组成；

对整个HTML文档进行整理分析，大致包含以下部分：

<!DOCTYPE html>: 声明文档类型。可有可无;

<html></html>包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中;
<head></head>:包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容;<meta charset="utf-8">:设置文档使用utf-8字符集编码
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">:指定页面的图标，出现在浏览器标签上;
<title></title>:设置页面标题，出现在浏览器标签上;
<body></body>:包含能在页面看到的所有内容;

HTML语法说明

标题：<h1>~<h6>分为六级标题，一级最大，六级最小；

文本格式：

<p></p> 显示文本内容
<del></del> 划掉文本内容
<strong></strong> 加粗文本内容
<em></em> 斜体

超链接：<a href="http://www.baidu.com/" target="_blank">百度一下</a>。（其中_blank表示在新的页面打开_self表示当前页面打开）；
图片：<img src="图像/03.jpg" width="200" height="200">；
表格：使用<table>标签

<tr></tr> 表示表格的每一行
<th></th> 表示表头
<td></td> 表示表的数据

表单：使用<form></form>标签；
下拉列表：
使用<select></select>标签,
选项使用<option></option>标签；
input中的类型说明：
文本为text
密码为password
数字为number
单选为radio
多选为checkbox；等等
input中的placeholder为占位符，checked为默认选项；
区块元素：<div></div>,<h1></h1>,<pre></pre>等自动分行（其中<pre></pre>标签可以用来展示特别格式的文本）；
内联元素：<span></span>,<input>,<a></a>等不会新起一行。

CSS整体说明

CSS是Cascading Style Sheet的缩写。即层叠样式表，是用于控制网页样式并允许将样式信息与网CSS简化了HTML中各种繁琐的标签，使各标签的属性更具一般性和通用性，扩充原来的功能。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。页内容分离的一种标记性语言。我认为CSS入门比较简单，但是熟练精通运用对我来说有点困难。

一点小提示：

想要大致了CSS知识解请前往https://qige.io/ ，想要比较熟练运用CSS请前往CSS教程。

注明：

由于css知识内容比较繁杂，css知识点就不一一列举了，下面就我在学习中认为比较有趣的css某几项知识点讲解一下

CSS语法说明（先附上我的练习代码）

    <style>
        /* 选择器{样式} */
        /* 给谁改样式 {改什么样式}*/
        /* 标签选择器 */
        p  {
            color: red;
            /* 修改文字字体大小为12像素 */
            font-size: 12px;
        }
        div {
            color:pink;
        }
        /* class选择器,开发最常用*/
        .aquamarine {
            color:aquamarine;
        }
        .bule {
            color: rgb(0, 149, 255);
        }
        /* .中文也可以但不建议 */
        .red {
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            background-color: blue;
        }
        .font20 {
            font-size: 20px;
        }
        .box {
             width: 100px;
            height: 100px;
        }
        /* id选择器  只能调用一次，别人切勿使用*/
        #pink {
            color: pink;
        }
        /* 通配符选择器,*将hmtl、body、div、span等都改变,也不需要去调用*/
        * {
            color: palegoldenrod;
        }
    </style>
</head>
<body>
    <p>这个标题是红色的</p>
    <p>sdf</p>
    <ul>
        <li class="bule">
            li标签是蓝的
        </li>
    </ul>
    <div class="red bule font20 box" >粉色的</div>
    <div class="green box">8</div>
    <div class="red aquamarine box">蓝的</div>
    <div id="pink">这是崔春洋的id选择器</div>

</body>

浮动样式举例

<style>
        .float {
            /* 块级横向排列找浮动 */
            /* 浮动具有行内块的相似特性 */
            float: left;
            width: 150px;
            height: 200px;
            background-color: pink;
            /* display: inline-block; */
        }
        .float_1{
            /* 块级横向排列找浮动 */
            float: left;
            width: 150px;
            height: 200px;
            background-color: pink;
            /* display: inline-block; */
        }
        .nofloat {
            width: 180px;
            height: 250px;
            background-color: rgb(204, 255, 192);
        }
    </style>
</head>
<body>
    <div class="float">1</div>
    <div class="float_1">2</div>
    <div class="float">3</div>
    <div class="float">4</div>
    <div class="nofloat">5</div>
</body>

CSS圆角边框

<title>CSS圆角边框</title>
    <style>
        .yuanjiao {
            width: 100px;
            height: 200px;
            background-color: #0081ff;
            border-radius: 50px;
        }
        .juxing{
            width: 100px;
            height: 100px;
            background-color: #0081ff;
            border-radius: 50px;
        }
        .radius {
            width: 100px;
            height: 200px;
            background-color: #0081ff;
            /* 从左上角，顺时针 */
            border-radius: 10px 20px 30px 40px;
            /* border-top-left-radius: 99px; */
        }
    </style>
</head>
<body>
    <div class="yuanjiao"></div>
    <div class="juxing"></div>
    <div class="radius"></div>
</body>

盒子文字阴影（此项我最喜欢并且在5个web页面设计上运用）

<style>
    .shadow {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        /* h-shadow:水平阴影位置,v-shadow:垂直阴影位置,
        blur:模糊距离,spread:阴影的尺寸,
        color:阴影的颜色,inset:外部阴影outset改为内部阴影 */
        box-shadow: 10px 10px 10px 10px black ;
        /* 文字阴影 */
        /* h-shadow:水平阴影位置,v-shadow:垂直阴影位置,
        blur:模糊距离, color:阴影的颜色*/
        text-shadow: 5px 5px 5px  rgba(0,0,0,0.8);

    }
    /* 鼠标经过盒子添加阴影效果 */
    .shadow:hover {
        box-shadow: 10px 10px 10px 10px #0081ff;
    }
</style>
<body>
    <div class="shadow">
        我也有影子
    </div>
</body>

总结

“纸上得来终觉浅，绝知此事要躬行”，编程更是如此，在有一点的知识基础的前提下，需要不断的动手去实践，有了这样的一个过程才能真正体会到编程的乐趣（当然也有痛苦，苦后才有甜嘛）。本学期先是跟着王勇老师的课堂知识，接触到了Html+Css,然后利用课下时间，坚持了一个月左右的时间仔细的学习了HTML和Css内容，收获颇丰。