Html&Css超细节讲解（一）

Carrymao

已于 2023-10-17 15:04:16 修改

阅读量41

点赞数 1

于 2023-10-17 15:02:17 首次发布

本文链接：https://blog.csdn.net/gugyuenamelp/article/details/133883869

版权

html5 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本概念，如HTML标签、CSS样式应用（如修改背景颜色和布局）、JavaScript在网页交互中的作用，以及不同类型的HTML元素（块级和行内元素）及其特点。同时涵盖了基础标签如img和a的使用方法以及音视频标签的常见属性。

摘要由CSDN通过智能技术生成

初识html

1.HTML(HyperText MarkUp Language) 超文本标记语言网页结构搭建
2.CSS(Cascading Style Sheets) 层叠样式表修饰html文档外观上改变背景颜色边框
html 构成木偶身体各部分
css 给木偶化妆穿衣服
js 网页交互动作控制木偶行为动起来
为什么htm可以作为html文件后缀名？
以前计算机常用操作系统DOS,支持文件后缀长度为3位，htm文件后缀兼容DOS操作系统
HTML语法:
1.注释  解释说明便于代码阅读和维护
2.元素标签节点
单标签元素
双标签元素 <开始标签>元素内容</结束标签>
3.属性
html标签都拥有得属性 id class title style
4.空白语法
无论又多少个空白浏览器始终会解析为一个空白
5.字符实体
路径
相对路径 ./表示当前目录 ../上一级目录
绝对路径 https:// 本地 file: C D

1-初识html.html

<!DOCTYPE html>
<!-- 根标签 根元素 一个网页只有一个根标签 网页中所有内容全部包裹到html -->
<html lang="en">
<!-- 文件头部标签 写在head标签中的内容不会直接显示在浏览器视口区域 帮组浏览器解析网页 -->
<head>
    <!-- 单元素 单标签 自结束标签 元数据   -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始html</title>
    <style>
        #first{
            background-color: red;
        }
        .second{
            background-color: blue;
        }


    </style>
</head>
<!-- 网页主体部分 网页内容显示在body中 -->
<body>
    <img src="" alt="">
    <br>
    <hr>

    <div id="first">我是第一个div</div>
    <div class="second">我是第二个div</div>
    <div class="second" style="color: white;" title="我是第三个div">我是第三个div</div>
    <div title="字符实体">我是&nbsp;&nbsp;&nbsp;&nbsp;&quot;&copy;第四个&lt;div&gt;</div>

</body>
</html>

2-块级元素和行内元素

块级元素和行内元素*********
块级元素: div p body(默认样式) html h1-h6 section
行内元素：span a em b i strong u sub sup cite strike
块级元素特点：
1.独占一行
2.宽度默认是100%
3.高度默认由内容撑起
4.可以通过css属性设置宽高
行内元素特点:
1.与其他行内元素共享一行
2.高度默认由内容撑起
3.通过css属性设置宽高不生效
4.设置上下外边距不生效左右外边距生效

<!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{
            width: 100px;
            height: 100px;
        }
        span{
            width: 100px;
            height: 100pxb;
            /* 上外边距 */
            margin-top: 10px;
            /* 下外边距 */
            margin-bottom: 10px;
            /* 左右边距*/
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!-- 
        块级元素：div html body p h1-h6标题标签 section 网页布局
        特点：1.独占一行
        2.宽度默认100%
        3.高度默认由内容撑起
        4.可以通过css属性设置宽高
     -->
      <div>我是块级元素</div>
      <div>我是块级元素</div>
      <p>段落标签</p>
      <section>块级元素</section>
      <h1>一级标题</h1>
      <h2>二级标题</h2>
      <h3>三级标题</h3>
      <h4>四级标题</h4>
      <h5>五级标题</h5>
      <h6>六级标题</h6>
<!-- 
    行内元素：span a em b i sub sup cite strike mark
    特点：1.与其他行内元素共享一行
    2.高度默认由内容撑起
    3.通过css属性设置宽高不生效
    4.设置上下外边距不生效，左右外边距生效
 -->
 <span>行内元素</span><span>行内元素</span><em>行内元素</em>
 <b>行内元素</b><strong>加粗标签</strong>
 <cite>行内元素</cite><sub>行内元素</sub><sup>行内元素</sup>
 <strike>行内元素</strike>
 <mark>行内元素</mark>
 <div>我是块级元素</div>
</body>
</html>

3-基础标签的使用

基础标签使用
img 图片标签 src(相对路径/绝对路径) alt(图片加载失败文字说明) width height 可以直接设置给标签
相对路径 ./当前目录 ../上一级目录
绝对路径 file:/// http:// C: D:/XXX/XXX
图片绝对路径地址需要拖到浏览器打开
a标签
1.打开链接或者外部网址 href='https://xxx'
2.打开页面 href='./1-xxx.html'
3.锚点
回到顶部 href='#'
指定锚点
例如跳转到一级标题给h1设置id title
href='#title'
4.发邮件 href='mailto:邮件地址'
p 段落标签

<!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>
    <!-- 标题标签 h1-h6 p标签 -->
    <p>段落标签</p>
    <!-- 分割线 -->
    <hr>
    <!-- br 强制换行标签 -->
    <span>行内元素</span><br><span>行内元素</span>
    <!-- 图片标签  -->
    <img width="500px" src="./音视频/ad7.jpeg" alt="图片加载失败"> 

</body>
</html>

4-a标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的使用</title>
    <!-- 设置a标签打开页面方式 -->
    <base target="_blank">
</head>
<body>
    <!-- a标签的作用
    1.打开一个外部链接
    2.打开外部页面
    3.锚点
    设置a标签打开页面的方式 target _blank(新窗口打开) _self(当前窗口打开页面)默认值
    -->
    <!-- <a href="https://www.baidu.com" target="_blank">百度一下</a><br>
    <a href="./3-基础标签的使用.html" target="_self">打开其他页面</a> -->
    <a href="https://www.baidu.com" >百度一下</a><br>
    <a href="./3-基础标签的使用.html">打开其他页面</a>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <div>块级元素</div>
    <h1 id="title">一级标题</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- 快速跳到下一行 carl+回车 -->
    <!-- 锚点 -->
    <a href="#" target="_self">回到顶部</a>
    <!-- 指定锚点跳转  #id-->
    <a href="#title" target="_self">锚点</a>
    <a href="mailto:2565605208@qq.com">发邮件</a>
</body>
</html>

5-音视频

音视频标签
video
src
controls 控制条
autoplay 自动播放
muted 静音
loop 循环播放
poster 封面
width 宽度
height 高度
<video controls autoplay>
<source src='' type='video/mp4'>
</video>
audio
src
controls 控制条
autoplay 自动播放
muted 静音
loop 循环播放

<!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>
    <!-- 视频标签 video controls 控制条  autplay 自动播放
    muted 静音 width height
    poster 封面  loop是否循环播放
    -->
    <video width="1000px" loop poster="./音视频/ad7.jpeg" src="./音视频/1.mp4" controls autoplay muted></video>
    <!-- 视频第二种格式 -->
    <video controls autoplay>
        <source src="./音视频/1.mp4" type="video/mp4">
    </video>
    <!-- 音频标签
        width height poster不生效
    -->
    <audio controls src="./音视频/1.mp3"></audio>

</body>
</html>