css+html笔记

最新推荐文章于 2024-01-18 19:00:14 发布

WSZFSNFK

最新推荐文章于 2024-01-18 19:00:14 发布

阅读量249

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/WSZFSNFK/article/details/119053179

版权

前端专栏收录该内容

13 篇文章 94 订阅

订阅专栏

前端

简介

html 结构层
css 表现层
js 行为层

html

行内元素
- a 超链接
- i 斜体
- em 斜体
- strong 加粗
- b 加粗
- img 图片标签
- span 文本标签
- 等
块级元素
- div 盒子标签
- p 文本
- ul li 无序列表
- ol li 有序列表
- h1 标题
- 等
行内元素的定义
- 不自动换行，不能设置宽高，只能依靠文本等将宽高撑开
块级元素定义
- 自动换行且可以设置宽高
改变块级元素以及行内元素的方法
- block将元素转换为块级元素
- inline将元素转换为行内元素
- inline-block既是块级元素，可以设置宽高，同时不用换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <p>文本</p>
    <i>斜体</i>
    <em>斜体</em>
    <strong>粗体</strong>
    <b>粗体</b>
    <div>盒子标签</div>
    <span>文字</span>
    <a href="http://www.baidu.com">百度</a>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <img src="./1.png" alt="">
</body>
</html>

在这里插入图片描述

一些文本操作
- 首行缩进
- 文本溢出影藏
- 文本间距离
- 单词间距离等
- 代码中基本上注释详细了，就不多解释了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
        /* 首行缩进 */
        text-indent: 2em;
        width: 500px;
        overflow: hidden;
        display: -webkit-box;
        /* cs3文本流 */
        -webkit-box-orient: vertical;
        /* 垂直排列 */
        -webkit-line-clamp: 3;
    }
    i{
        display: block;
        
        overflow: hidden;
        /* 溢出隐藏 */
        white-space:nowrap;
        /* 强制不换行 */
        text-overflow: ellipsis;
        /* 文本溢出省略 */
    }
    b{
        letter-spacing: 10px;
        /* 文字与文字或者字母间的距离 */
        /* font-style: normal; */
        /* 取消斜体 */
        font-weight: normal;
        /* 正常粗细 */

    }
    h1{
        word-spacing: 5px;
        /* 单词间的距离 */
        display: inline-block;
    }
</style>
<body>
    <p>文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义(Message)的一个句子或多个句子的组合。
        一个文本可以是一个句子(Sentence)、一个段落(Paragraph)或者一个篇章(Discourse)。广义"文本":任何由书写所
        固定下来的任何话语。
        (利科尔) 狭义"文本":由语言文字组成的文学实体，代指"作品"，相对于作者、世界构成一个独立、自足的系统。
    </p>
    <i>
        文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义(Message)的一个句子或多个句子的组合。
        一个文本可以是一个句子(Sentence)、一个段落(Paragraph)或者一个篇章(Discourse)。广义"文本":任何由书写所
        固定下来的任何话语。
        (利科尔) 狭义"文本":由语言文字组成的文学实体，代指"作品"，相对于作者、世界构成一个独立、自足的系统。
    </i>
    <br>
    <b>文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义(Message)的一个句子或多个句子的组合。</b>
    <br>
    <h1>I Love You</h1>
</body>
</html>

在这里插入图片描述

文本小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 360px;
        height: 480px;

        /* 居中 */
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
        margin: auto;

        background-color: cadetblue;

        box-shadow: 13px -7px wheat;
        /* 盒子阴影 */
    }
    p{
        display: block;
        float: right;
        margin-right: 70px;
        color: white;
        width: 50px;
        font-size: 50px;
        font-weight: 600;
        /* 字体加粗 */
        line-height: 100px;
        /* 设置行高，如果行高与高度一致，那么文本将居中排列 */       
        text-shadow: 12px -12px black; 
         /*文字阴影  */
    }
</style>
<body>
    <div>
        <p>武林秘籍</p>
    </div>
</body>
</html>

在这里插入图片描述

css

css的三种使用方式
- 行内样式
- 内联
- 外链
优先级
- 行内>内联>外链
选择器
- id “#”+id名称
- class “.”+class名称
- 标签标签名

js

js主要是网页与用户间的桥梁
- 比如点击事件、表单验证等等
js在一些css无法实现时使用
- 如轮播图
js也可以可以改变css样式以及html中的内容

WSZFSNFK

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
css+html笔记

前端简介html 结构层css 表现层js 行为层html行内元素a 超链接i 斜体em 斜体strong 加粗b 加粗img 图片标签span 文本标签h1 标题ul li 无序列表ol li 有序列表块级元素div 盒子标签p 文本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht
复制链接

扫一扫