前端---HTML基础知识-CSDN博客

本文链接：https://blog.csdn.net/liItong/article/details/129917580

文章介绍了WEB的基本组成，包括HTML用于页面内容呈现，CSS负责样式表现，JavaScript处理行为交互。W3C制定相关规则，HTML5的文档类型声明及基本结构被详细阐述，同时提到了一些常用快捷键和HTML基础标签元素，如标题、段落、换行、加粗、斜体、上标、下标等，以及图片标签的使用和路径设置。此外，还讨论了语义化标签的重要性和特殊字符的表示方法。

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

 WEB组成标准：
        结构                表现               行为
        html(xhtml xml)     css             JavaScript
    
     W3C:万维网联盟，制定规则，html+css

     HTML：超文本标记语言
        作用：页面内容的呈现(文字 图片视频音频)

        基本结构
            结构的快捷键 !   html:5
            <!DOCTYPE html>
            <!-- Document type :html -->
            <!-- ctrl+/  注释 -->
            <html>
                <head>
                    <meta charset="UTF-8">
                    <!-- 编码格式  utf-8: 浏览器识别中文 -->
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <title>网站标题</title>
                    <!-- 网页标题：告知用户是什么类型的网站 -->
                </head>
                <body>
                    页面内容：文字  图片  视频  音频
                </body>
            </html>


    快捷键
        ctrl+s:保存
        ctrl+a:全选
        ctrl+c:复制
        ctrl+v:粘贴
        ctrl+x剪切
        ctrl+z:返回上一步
        ctrl+f:查找
        alt+z:自动换行
        
        tab:向后四个空格（子集）
        shift+tab:向前四个空格




    标记，标签 元素

        单标记（单标签，单元素）：
            <标记 属性="属性值" 属性="属性值" ....>
                属性值k可以是双引号包裹，也可以是单引号包裹
                属性="属性值"可以有多个也可以没有
        
        双标记：<标记 属性="属性值" 属性="属性值" ....></标记>

    标记
        1.标题：h1-h6
            特点：
                1.双标签
                2.自带样式：文字大小 文字粗细  间距 
                3.纵向排列，独占一行

            注意:h1页面只有一个，用来存放logo,行业规定
        2.段落标签<p></p>
                特点：  
                    a.双标签
                    b.自带样式：间距
                    c.纵向排列，独占一行
                注意：p标签不能嵌套p,p嵌套的横向排列的标签
        3.换行标签 <br>
                特点：
                    1.单标签
                    2.换行，
                        单个换行标签强制换行，
                        多个换行标签，第一个强制换行，第二个换行之后空白显示
                    3.纵向排列   x
        4.水平线  <hr>
                特点：  
                    1.单标签
                    2.样式：100%线条，间距
                    3.纵向排列，独占一行

        5.加粗标签
                <b></b>  <strong></strong>
                特点：  
                  1.双标签
                  2.加粗样式
                  3.横向排列，在一行显示

                注意：
                    strong表示语义化，语气加重作用
        6.加粗标签
            <i></i>  <em></em>
            特点：  
                1.双标签
                2.倾斜样式
                3.横向排列，在一行显示

            注意：
                em表示语义化，语气加重作用

        7.上标 <sup></sup>
            特点：  
            1.双标签
            2.下标
            3.横向排列，在一行显示 
        7.下标 <su></sub>
            特点：  
                1.双标签
                2.下标
                3.横向排列，在一行显示 
        8.下划线 <u></u>
            特点：  
                1.双标签
                2.文字下方有下划线
                3.横向排列，在一行显示
        9.删除线
            <s></s>  <del></del>
            特点：  
                1.双标签
                2.文字中间有横线
                3.横向排列，在一行显示
                注意：
            del表示语义化，语气加重作用
        10图片标签
            图片的后缀名
                .jpg|.jpeg-------------------体积小
                .png----------------------------支持透明背景
                .gif---------------------------动图，体积大
                .webp


            <img src="路径" alt="图片加载不出来显示的问题">
            图片路径
                1.绝对路径
                    a.磁盘地址路径---------------不推荐
                    <img src="C:\Users\jwhsj\Desktop\2304\day7元素的分类，鼠标移入效果\day07元素的分类鼠标移入效果代码\img\yase.png" alt="">
                    b.网络路径--------完整性
                    <img src="https://lmg.jj20.com/up/allimg/1114/041621122252/210416122252-1-1200.jpg" alt="">
            2.相对路径（相对于项目路径）
                    a. html页面与文件夹在同一文件夹下
                        <img src="img/5.jpg" alt="">
                    b.  html页面与文件夹在不同文件夹下   
                            <img src="img/image/zhoujielun.jpg" alt="">
                            <img src="../img/2.jpg" alt="">------../返回上一级

            
            图片标签特点：
                1.单标签
                2.有间距，左右间距标签换行引起的，上下间距基线对齐
                3.横向排列

    特殊符号：
        空格：&nbsp; &emsp;
            &nbsp;:英文状态下空格
                一个英文占2位
                一个中文占4位
                &nbsp;占一位
            &emsp;中文状态下空格
                    &emsp;一个中文空格
        小于号：
            &lt;
        大于号：
            &gt;

        版权符号:©
        注册商标:®