前端入门学习笔记 HTML ~ CSS

用户50024849806
82 阅读4分钟

html and css

本篇文章记录html 与 css 入门学习历程，同时为了巩固知识

HTML

基本框架

html全称超文本标记语言，一个html5框架如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

其中

  • <!DOCTYPE html>必备，用于触发浏览器的标准模式
  • <meta>标签用来介绍文档的属性，如字符编码等
  • title会影响 SEO（搜索引擎优化），好的 <title> 有助于提高搜索排名

常用内联标签

标题：h$1*6

超链接：<a href="http://">内联样式，可以使任何标签或文字</a>

段落：<p>

输入：<input type="text">

按钮： <button>button</button>

图片： <img src="图片链接" alt="替换文本">

文本标签：

<em>着重文字、斜体样式</em>
<i>斜体</i>
<strong>加强语气、粗体样式</strong>
<b>加粗文本</b>
<del>删除线</del>
<u>下划线</u>
<span>无特殊含义、为了方便css样式</span>
<br>换行

常用块标签

水平线

<hr size="5px" color="green" width="300px" align="right"> 默认宽度是整个屏幕尺寸

列表

<!-- 无序标签 -->
<ul type="square">
    <!-- type属性的值
    disc默认实心圆
    circle 空心圆
    square 方块
    none 不显示 -->
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<!-- 有序标签 -->
<ol type="i">
    <!-- type属性的值
    'a' indicates lowercase letters,
    'A' indicates uppercase letters,
    'i' indicates lowercase Roman numerals,
    'I' indicates uppercase Roman numerals,
    '1' indicates numbers (default). -->
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

表格

一个简单的3*3表格
table>tr*3>td*3

<!-- 设置大小和边框 -->
<table border="1px" width="100px" height="100px">
    
<!-- 单元格合并 -->
<td rowspan="2">行合并，向下，注意删除对应的td</td> 
<td colspan="2">列合并，向右，注意删除对应的td</td>
<table border="1px" width="100px" height="100px">
    <tr>
        <td></td>
        <td></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
image-20250705141308284

表单：

<!-- 简单的表单实现 -->
<form action="http://localhost:8080/" method="post">
	username: <input type="text"> <br>
	password: <input type="password">
	<input type="submit">
</form>

块级元素与内联元素的区别

块元素, 独占一行 可以设置 width height 属性

内联元素: 只占自身大小

H5新标签

<header>头部</header>
<nav>导航</nav>
<article>
    代表一个完整的内容块儿，帖子，文章，评论等
    <section>定义文章中的节，如章节，页眉页脚</section>
</article>
<aside>侧边栏</aside>
<footer>底部</footer>

CSS

引用方式

  1. 内联样式：<p style="color: red; font-size:30px"></p>维护成本高,不利于代码复用

  2. 外部css文件引用：

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

  3. 头部书写:

    <head>
    <style>
        h1{
            font-size: larger;
            color: green;
        }
    </style>
</head>

选择器

/*全局选择器*/
*{}
/*类选择器*/
.类名{}
/*id选择器*/
#id名{}
/*关系选择器*/
/*后代选择器*/
ul li{}
/*子代选择器*/
ul > li{}
/*相邻兄弟选择器 向下选择*/
h1+p {}
/*通用兄弟选择器 选择h2下面的所有对应标签*/
h2~p {}

选择器优先级

内联样式选择器 > id选择器 > class选择器 > 元素选择器

字体属性

p{
    color: #16171684;	/*color: rgba(255, 50, 253, 0.5); */
    font-size: 20px;
    font-weight: 700;
    /*font-weight 设置字体粗细 bold 粗 ligher 细 100~700 粗细*/
    font-style: normal; /*itailc 斜体  normal正常*/
    font-family:'Courier New', Courier, monospace;
}

文本属性

h3 {
    text-align: center; /*位置*/
    text-decoration: line-through; /*修饰 下划线 上划线 删除线*/
    text-transform: capitalize; /*控制文本大小写*/
}
p {
	text-indent: 20px;  /*缩进，支持负值*/
}

背景属性

.box{
    width: 300px;
    height: 600px;
    background-color: hsl(314, 73%, 71%);/*背景颜色*/
    background-image: url("img.jpg");/*背景图片*/
    background-position: 0% 100%;
    /*背景图片位置 可以用固定值如left top 也可以自定义 x% y% 0% 0%表示左上角*/
    background-repeat: no-repeat;
    /*背景图片填充方式 repeat 默认 repeat-x x平铺 repeat-y y平铺 no-repeat 不平铺*/
    background-size: contain;
    /*背景图片尺寸 (length height) 
    cover(保持横纵比例, 优先匹配最大的，多余的不可见)
    contain 保持横纵比例, 优先匹配最小边
    */
}

表格属性

table, td {
	border: 1px solid red; /* solid代表实线 */
}
table {
	border-collapse: collapse; /*折叠效果*/
}
td {
    text-align: center;
    vertical-align:middle;
    background-color: aqua;
    padding: 20px;
}

BoxModel

image-20250705145754139 
div {
    height: 400px;
    width: 400px;
    background-color: rgba(252, 103, 155, 0.753);
    padding: 200px; /*200px 上下左右均为200px 100px 50px 上下100px 左右50px*/
    border: 5px solid rebeccapurple; /*外边框*/
    margin: 50px; /*200px 上下左右均为200px 100px 50px 上下100px 左右50px*/
    /*可以分开设置 如padding-top: 50px;*/
}

FlexBoxModel

<div class="container">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>

.container{
    display: flex;
    flex-direction: column; /*flex默认布局是水平的 reverse是指从另一边开始排列*/
    justify-content: center; 
    /*横轴方向摆放位置 flex-start靠上 flex-end靠中 center-居中*/
    align-items: center;    /*纵轴方向*/
    border: 5px solid;
    width: 500px;
    height: 500px;
    background-color: azure;
}
.box1{
    background-color: red;
    width: 100px;
    flex: 2;    /*权重 flex的优先级是高于width和height的*/
}
.box2{
    background-color: rgb(34, 230, 60);
    width: 100px;
    flex: 2;
}
.box3{
    background-color: rgb(119, 17, 221);
    width: 100px;
    flex: 1;
}

浮动与清除浮动

浮动不属于标准文档流，默认从左向右排列

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>


.container {
    width: 500px;
    height: 500px;
    background-color: red;
}
.box1 {
    height: 200px;
    width: 200px;
    background-color: chartreuse;
    float: left;
}
.box2 {
    height: 200px;
    width: 200px;
    background-color: black;
    float: left;
}
.box3 {
    height: 200px;
    width: 200px;
    background-color: blue;
    float: left;
}


.container {
    width: 500px;
    background-color: #888;
    overflow: hidden;       /*受影响的块是兄弟元素时添加*/
}
.box {
    width: 100px;
    height: 100px;
    background-color: aqua;
    margin: 5px;
    float: left;
}
.text{
    width: 100px;
    height: 100px;
    background-color: rgb(14, 35, 35);
    margin: 5px;
    clear: both;    /*left right both*/
}
avatar
文章
阅读
粉丝