初始html与css

        1.1什么是html

html(HyperText Markup Languane 超文本标记语言)

html不是编程语言，而是一种标记语言，用于高数浏览器如何构造你的页面。

        1.2html特点

1、简易性        2、可扩展性        3、平台无关性        4、通用性

        1.3什么是css

css(Cascading Style Sheets 层叠样式表)

css是一个用于修饰文档（可以是html）的语言

        2.1html和css之间的关系

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML

        2.2html开发环境

可用于编写HTML的编译工具有很多

• 记事本：特点：无代码提示、无代码高亮显示、用户界面不友好；

• Sublime（推荐）：特点：运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件；

• VSCode（推荐）：特点：丰富的插件支持、可进行git管理；

• Idea：特点：集成开发工具、类似DW,node,npm...运行速度较慢；

        3.1html属性

HTML标签都拥有自己的属性，属性应该出现在元素的开始标签内部。

id：唯一标识（类似于学号）

<div id="only" class="two">我是唯一的div</div>

class：标识一类元素（类似于定义你是xx班的）

<div class="two">我是类元素</div>

style：行内编写的css(装饰)样式

<div style="background-color: red;">我是背景色红色的cssDiv</div>

title：鼠标悬浮到标枪上的属性说明

<div title="我是属性说明">我是属性说明</div>

另外说明：

无论标签内部打了多少个空格，浏览器都会解析成一个空格；打小于号会被检测为标签；引号同理；建议使用下列对应语法：

                空格 &nbsp

                小于号 &lt

                大于号 &gt

                引号 &quot

<div>&lt;&gt;空白&nbsp&nbsp&nbsp语法</div>

        3.2块级元素

例如：div、header、article、footer

块级元素特点

        1.独占一行

        2.宽度默认100%

        3.高度默认由内容撑起

        4.根据css设置宽高

<!-- 设置边框为1像素的蓝色实线 宽高为100像素 -->
<div style="border: 1px solid blue ;width: 100px ; height: 100px;">我是块级元素</div>
<!-- 头部 -->
<header>头部</header>
<!-- 体部 -->
<article>体部</article>
<!-- 底部 -->
<footer>底部</footer>

        3.3行内元素

行内元素特点

        1.宽高由行内元素决定

        2.与其他元素共享一行

        3.无法根据css设置宽高

        4.行内元素不建议嵌套块级元素

<span style="border: 1px solid red;">我是一个行内元素</span>
<span style="border: 1px solid red; width: 100px; height: 100px;">我是一个行内元素</span>

不建议使用以下行内元素

    <strong>加粗</strong>
    <b>加粗</b>
    <em>斜体</em>
    <i>斜体</i>
    <sub>上标</sub>
    <sup>下标</sup>

        3.4img标签的使用

    <!-- 相对路径 -->
    <!-- img特有特性，可以设置宽高 -->
    <img width="200px" src="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658336400&t=4e76b6808c5aa8d3bedf0e5f44f59162" 
        title="我是一张图片" alt="图片加载失败">

        3.5基础标签的使用

    <!-- 都是块级元素 -->
    <h1>我是一级标题</h1>
    <!-- 强制换行标签 -->
    <br>
    <h2>我是二级标题</h2>
    <!-- 分割线标签 -->
    <hr>
    <h3 id="three">我是三级标题</h3>
    <h4>我是四级标题</h4>
    <!-- 段落标签 -->
    <p>
        段落标签，用于表示内容中的一个自然段,<br><hr>
        使用p标签来表示一个段落,
        p标签中的文字，会独占一行，并且段与段之间会有一个间距
    </p>

        3.6a标签的使用

a标签 控制页面与页面之间的跳转

href 链接到其他页面（可以是网址、可以用作锚点、可以跳转至其他页面）

    <!-- 新页面中打开 target默认为_blank-->
    <a href="https://www.baidu.com/">百度一下</a>
    <!-- 在当前窗口打开 target为_self -->
    <a href="https://www.baidu.com/" target="_self">百度一下</a>
    <!-- 可以使用图片打开链接 -->
    <a href="https://www.baidu.com/">
        <img width="200px" src="./src=http___inews.gtimg.com_newsapp_match_0_10909143745_0.jpg&refer=http___inews.gtimg.jpeg"  alt="">
    </a>
    <!-- 设置一个div,并附id="center"(不一定是center,你来决定),用于a标签的锚点跳转 -->
    <div id="center">我是中间div</div>
        <!-- 希望回到头部 设置href 为#
        希望回到其他位置，通过id设置跳转 href=“id” 
        跨页面锚点 -->
    <a href="#">回到顶部</a>
    <a href="#center">回到中间div</a>
    <!-- 你的VScode中有 5-基础标签使用.html 并且有 id=three的值 ，就可以跳转 -->
    <a href="./5-基础标签使用.html#three">跳转到5页面的H3</a>
    <!-- mailto 打开电脑自带的邮件 -->
    <a href="mailto:1350379807@qq.com">发送一封邮件</a>

        3.7音视频、下拉选项（details）

视频：video

video标签的属性

        src:告诉video标签需要播放的视频地址

        autoplay:自动播放

        controls:控制条

        poster:视频没有播放之前显示的占位图片

        loop:循环播放

        muted:静音

音频：audio

同上，不过没有poster，不能设置宽高

     <!-- 视频 -->
    <video controls muted poster="./音视频/2.jpg" src="../swipe/音视频/1.mp4"></video>
    <!-- 音频 -->
    <audio controls src="./音视频/1.mp3"></audio>
    <!-- src可使用网上文件路径，需要联网，右键复制路径粘贴即可 -->
    <details>
        <summary>运动</summary>
        <div>篮球</div>
        <div>足球</div>
        <div>排球</div>
    </details>