前端学习-HTML+CSS(1)

Michelle209

已于 2023-03-12 16:36:01 修改

阅读量62

点赞数

分类专栏： HTML/CSS 文章标签：前端学习 html

于 2023-02-27 18:16:09 首次发布

本文链接：https://blog.csdn.net/Michelle209/article/details/129245012

版权

HTML/CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

web标准

html 结构页面元素和内容

css 表现网页元素的外观和位置等页面样式

JavaScript 行为网页模型的定义与页面交互

HTML概念

超文本标记语言

HTML骨架结构

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        主体内容
    </body>
</html>

html语法规范

注释

    <!-- 我是注释 -->

标签

<strong>加粗</strong>

标签由"<" ">" "/"组成，并把<>中包括的字母称为标签名

常见标签有两部分组成：双标签，开始标签和结束标签之间包裹内容

少数标签由一部份组成：单标签，无法包裹内容

标签之间的关系

嵌套关系、并列关系

HTML标签学习

1.1 标题标签

<h1>一级标题 重要程度依次递减</h1>
<h2>二级标题 文字都有加粗</h2>
<h3>三级标题 h1->h6 重要程度递减</h3>
<h4>四级标题 独占一行</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

1.2 段落标签

<p>段落之间存在间隙 独占一行</p>

1.3 换行和水平线标签

    换行<br>换行<br>
    <hr>
    上面是一条水平分割线

2.1 文本格式化标签

    <b>加粗</b>
    <u>下划线</u>
    <i>倾斜</i>
    <s>删除线</s>
    <br>
    <!-- 下面同语义，只是强调语境，视觉效果相同 -->
    <br>
    <strong>加粗</strong>
    <ins>下划线</ins>
    <em>倾斜</em>
    <dei>删除线</dei>

3.1 媒体标签

    <!-- 图像标签 -->
    <!-- 一个标签可以存放多个属性，属性之间用空格隔开，属性之间没有顺序之分 -->
    <!-- alt是替换文本，只有图片加载失败才会显示 -->
    <!-- title是用户鼠标悬停时才显示的文本 -->
    <!-- 只设置width或height中的一个另一个会自动等比例缩放，同时设置两个不当会导致图片变形 -->
    <img src="" alt="" title="" width="" height="">

    <!-- 音频标签 -->
    <!-- controls显示播放的控件 -->
    <!-- autoplay自动播放 -->
    <!-- loop循环播放 -->
    <!-- 音频标签支持三种格式：mp3、wav、ogg -->
    <audio src="" controls autoplay loop></audio>

    <!-- 视频标签 -->
    <!-- 属性和音频相同，自动播放在谷歌浏览器中配合muted实现静音播放 -->
    <video src="" controls autoplay muted loop></video>

    <!-- 超链接标签 -->
    <!-- href值为#表示空链接 -->
    <!-- target的值_self表示在原网页上跳转 _blank表示在新标签页跳转 -->
    <a href="https://www.baidu.com" target="">跳转到百度</a>