HTMLday0613

浮不起来的气球

已于 2024-06-14 23:09:11 修改

阅读量320

点赞数 2

CC 4.0 BY-SA版权

文章标签： html5

于 2024-06-14 23:00:49 首次发布

本文链接：https://blog.csdn.net/m0_71108047/article/details/139638221

1.字体样式

1.font-size:字号大小

font-size属性用于设置字号 px 像素

2 font-family:字体

浏览器默认的字体是微软雅黑

3 font-weight:字体粗细

加粗bold 700

正常使用normal 400

font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用css 来实现。

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

normal 默认值。定义标准的字符。

bold 定义粗体字符。

bolder 定义更粗的字符。

lighter 定义更细的字符

4 font-style:字体风格

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

5 font:综合设置字体样式

选择器{ font: font-style font-weight font-size font-family; }

2.line-height：行间距

normal 默认值

3 text-align：水平对齐方式

left：内容左对齐。
center：内容居中对齐。（重点）
right：内容右对齐。
justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。

4 text-indent:首行缩进

5 text-decoration：文本修饰

none：指定文字无装饰
underline：指定文字的装饰是下划线
overline：指定文字的装饰是上划线
line-through：指定文字的装饰是贯穿线

6 letter-spacing：字符间距

normal：默认间隔

7 word-spacing（单词）

normal：默认间隔

8.a 超链接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="favicon1.ico" type="image/x-icon">

</head>

<body>
    <a href="http://www.baidu.com" target="_blank">百度一下</a>
    <div><img src="https://img0.baidu.com/it/u=2637188970,2671638508&fm=253&fmt=auto&app=138&f=JPEG?w=1562&h=800" alt="" title="这是一个王者图片" width="1000px"></div>
    <img src="img/1.jpg" width="1000px" eight="500px">
    <!-- 设置#后不刷新 -->
    <div><a href="">logo</a></div>
</body>

</html>

9.ul li 无序列表

<!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>
    <!-- ul,li无序列表,ul只能嵌套li,li可以嵌套其他元素 -->
    <ul>
        <li>凉皮
            <ul>
                <li>七块</li>
                <li>十块</li>
            </ul>
        </li>
        <li>面条</li>
        <li>米饭</li>
    </ul>
</body>

</html>

10.ol li 有序列表

<!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>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ol>
</body>

</html>

11.dl dt dd 有序列表

<!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>
    <!-- dl dt dd自定列表dt dd并列关系 -->
    <dl>
        <dt>
            <dd>售后中心</dd>
            <dd>小米售后</dd>
            <dd>华为售后</dd>
            <dd>荣耀售后</dd>
        </dt>
    </dl>
</body>

</html>

12.input控件

<!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>
    <label for="user">用户名:</label>
    <input type="text" value="请输入账户" name="username" id="user">
    <!-- placeholder占位符 
    name属性与后台交互时候,是必须的设置的 
    -->
    账号:
    <input type="text" placeholder="请输入账号" name="pwd"> 密码:
    <input type="password" placeholder="请输入密码">
    <!-- 按钮 -->
    <input type="button" value="登录">
    <button>
        <img src="favicon.ico" alt="">
    </button>
</body>

</html>

13.标记选择器，类选择器，ID选择器，通配符选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
        }
        
        span {
            color: blue;
        }
        
        .item {
            color: aqua;
        }
        
        .abc {
            color: blueviolet;
        }
        
        #aaa {
            color: green;
        }
        
        * {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <!-- 类 标签 id 通配符 -->
    <div>关于我</div>
    <div>关于你</div>
    <div>关于大家</div>
    <span>关于焦虑</span>
    <span>关于理想</span>
    <span>关于自信</span>

    <p class="item">唯一</p>
    <p>别管我</p>
    <b class="abc">大虫</b>
    <b class="abc">老虎</b>
    <b>大虎</b>

    <em id="aaa">这是重要的内容</em>
</body>

</html>