web前端学习笔记（HTML、CSS）

原创

开始喜欢风 2023-02-17 10:12:15 ©著作权

文章标签 html css web 选择器 CSS 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者开始喜欢风的原创作品，请联系作者获取转载授权，否则将追究法律责任

web前端学习笔记

HTML5学习笔记

表格
列表
表单

CSS选择器
CSS属性
CSS引入方式
元素显示模式
CSS背景
盒子模型

HTML5学习笔记

开发环境：webstorm
语言版本：HTML5

表格

<!--
    @table:表格
    @tr: 行
    @th: 属性名
    @td: 属性实体
    @thead:定义表格的头部
    @tbody: 定义表格的主体
    -->
    <table>
        <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        </tbody>
    </table>

合并单元格

rowspan：跨行合并单元格个数
colspan：跨列合并单元格个数

列表

无序列表

<!--  
  @ul: 无序列表
  @li: 列表项
  -->
  <ul>
    <li>
      a
    </li>
    <li>
      b
    </li>
    <li>
      c
    </li>
  </ul>

有序列表

<!--
  @ol: 有序列表
  @li: 列表项
  -->
  <ol>
    <li>
      a
    </li>
    <li>
      b
    </li>
    <li>
      c
    </li>
  </ol>

自定义列表

<!--
  @dl: 自定义列表
  @dt: 大项
  @dd: 小项
  -->
  <dl>
    <dt>
      手机
    </dt>
    <dd>
      vivo
    </dd>
    <dd>
      oppo
    </dd>
    <dd>
      apple
    </dd>
  </dl>

表单

表单域

<form action="url" method="get" name="name">
    <!--content-->
    </form>

< input > 表单元素
name：用户自定义，input元素的名称
value：用户自定义，input元素的值
checked：首选
maxlength：最大长度限制
type：

text：输入文本
password：输入密码
radio：单选框
checkbox：复选框
hidden：隐藏的输入字段
image：图像形式的按钮
file：文件上传
reset：重置按钮
submit：提交按钮

<form>
    <!--
    @input: 输入
    @type: 标识input的类型
    @br: 换行        
    -->
        <input type="text"> <br>
        <input type="password"> <br>
    </form>

label标签：一般label对应input，所以for属性就是对于input的id绑定的

<form>
    <label for="text">用户名</label> <input type="text" id="text"> <br>
</form>

select下拉表单元素

<select>
  <option>
    1
  </option>
  <option>
    1
  </option>
  <option>
    1
  </option>
</select>

textarea文本域标签

cols：每行的字符数
rows：显示的行数

<textarea cols="10" rows="2">
  sadfsadfsa fsdafasdgfsadfgasd
</textarea>

CSS

CSS样式表结构：选择器，属性，值

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
  @style: CSS样式
  -->
  <style>
    p {
      color: red;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <p>lh</p>
</body>

CSS选择器

基础选择器是由单个选择器组成：标签选择器、类选择器、id选择器、通配符选择器

标签选择器（无法实现差异化设置）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p {
      color: red;
      font-size: 12px;

    }
  </style>
</head>
<body>
<p>lh1</p>
<p>lh2</p>
<p>lh3</p

类选择器：用class属性来调用class类的意思，通过.类名来标识

<!--单类名-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .p1 {
        color: aqua;
    }
  </style>
</head>
<body>
<p class="p1">lh1</p>
<p>lh2</p>
<p>lh3</p>
</body>

<!--多类名-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .p1 {
        color: aqua;
    }
    .p2 {
        font-size: 32px;
    }
  </style>
</head>
<body>
<p class="p1 p2">lh1</p>
<p>lh2</p>
<p>lh3</p>
</body>

id选择器：通过id属性来设置id选择器，CSS中id以“#”来定义

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #a {
        color: beige;
    }
  </style>
</head>
<body>
<p id="a">lh2</p>
<p>lh3</p>
</body>

通配符选择器：*

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    * {
        color: beige;
    }
  </style>
</head>
<body>
<p>lh2</p>
<p>lh3</p>
</body>

CSS属性

CSS字体属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    @font-family: 字体系列
    @font-size: 字体大小
    @font-style: 字体样式
    @font-weight: 字体粗细
    @font: 复合属性写法
    -->
  <style>
    .la {
      font-family: '微软雅黑';
        font-style: italic;
    }
  </style>
</head>
<body>
<p class="la">
  Hello World
</p>
</body>

CSS文本属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--
  @color: 颜色
  @text-align: 文本对齐
  @text-decoration: 文本装饰，下划线等等
  @text-index: 文本缩进，段落的首行缩进
  @line-height: 行间距
  -->
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
<p>Hello World</p>
</body>

CSS引入方式

内部样式表

<style>
    p {
      color: red;
    }
  </style>

行内样式表

<body>
<p style="font-size: larger; color: red">Hello World</p>
</body>

外部样式表

<!--.html-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
<p>Hello World</p>
</body>

p {
    color: blue;
}

复合选择器：更准确，更高效，由两个或多个基础选择器，通过不同的方式组合而成的（后代选择器，子选择器，并集选择器，伪类选择器）

后代选择器：元素1 元素2 {样式声明}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
<ul>
    <li class="1">
        Hello World 1!
    </li>
</ul>
</body>

ul li{
    color: blue;
}

子选择器：只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素（父亲>儿子）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
<ul class="p">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
</body>

.p>li {
    color: blue;
}

并集选择器：可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
<ul class="p">
   Hello
</ul>
<ol>
    World
</ol>
</body>

ul, ol {
    color: blue;
}

伪类选择器：用于某些选择添加特殊的效果，比如给连接添加特殊效果，如选择第一个，或选择第n个

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
<a href="#"> <br>
  百度
</a>
</body>

/**
* link: 未被选择的链接
*/
a:link {
    color: aqua;
    text-decoration: none;
}
/**
* visited: 选择所有已被访问的链接
*/
a:visited {
    color: blue;
}
/**
* hover: 选择鼠标指针位于其上的链接
*/
a:hover {
    color: black;
}
/**
* active: 选择活动链接（鼠标按下未谈起的链接）
*/
a:active {
    color: crimson;
}

input:focus伪类选择器：选择获得焦点的表单元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
<input type="text" class="in"> username
</body>

.in:focus {
    color: coral;
}

元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，HTML一般分为块内元素和行元素

块元素：h1~h6，p，div，ul，ol，li等
特点：独占一行，是一个容器，里面可以放块元素和行元素，宽度和高度，外边距都可以控制。（文字类的元素中不可放块级元素）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
<div>
    LIUHAO
</div>
</body>

div {
    width: 200px;
    height: 200px;
    background-color: coral;
}

行内元素：a，strong，b，em，i，del，s，ins，u，span
特点：相邻行元素在一行上，高宽设置无效，只能容纳行内元素或文本

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
<span>
    LIUHAO
</span>
</body>

span {
    color: coral;
}

行内块元素：同时具有行和块元素的特点相邻会产生一个空格间隙，img/，input/，td

元素显示模式转换：行和块元素转换

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
<a href="#">
    百度
</a>
</body>

a {
    background-color: coral;
    height: 200px;
    width: 200px;
    /* 把行内元素转换为块元素
    */
    display: block;
    /* 把块元素转换为行内元素
    */
    display: inline;
}

小技巧：让文字居中：让行高等于盒子高

/* 原理
盒 上空隙
  上空隙
子 上空隙
  文字本身高度
高 下空隙
  下空隙
度 下空隙
*/
line-height: 40px;

CSS背景

背景颜色

background-color

背景图片

<div>
    APP
</div>

div {
    width: 300px;
    height: 300px;
    background-image: url("https://shared.ydstatic.com/fanyi/login/images/weixin@2x.png");
}

背景平铺

background-repeat: no-repeat

背景图片位置

水平位置垂直位置

background-position: right center;

精确单位：x和y值（左上角为原点）

背景固定：背景图片是否随着页面的其余部分滚动

background-attachment: fixed;

背景透明

background: rgba(0, 0, 0, 0.3);

盒子模型

边框（border）：块框和边框距离（和顶部和底部的宽度，风格，颜色）
内容（content）：内容
内边距（padding）：内容和边框距离（上下左右）
外边距（margin）：各个盒子之间距离

上一篇：Django学习笔记

下一篇：操作系统内存管理

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯