第一天基本标签

最新推荐文章于 2024-07-17 09:43:10 发布
一份蛋炒饭
最新推荐文章于 2024-07-17 09:43:10 发布
阅读量91
点赞数
分类专栏：学习文章标签： html
本文链接：https://blog.csdn.net/weixin_52019215/article/details/114273497
版权
学习专栏收录该内容
9 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--HTML理解 
        - 超文本标记语言(Hyper Text Markup Language)
                标记语言(markup language) 
                超文本：超越文本，即除了文字，还有图片、链接、音频、视频等
    
        - 浏览器内核作用：渲染网页
               国际通用浏览器      厂商      内核
                  IE浏览器         微软       Trident 
                  Firefox          火狐       Gecko
                  Safari           苹果       Webkit(国产浏览器采用)
                  Chrome           谷歌       Blink (国产浏览器采用)、(是Webkit的分支)
                  Opera            欧朋       Blink
                     浏览器各不相同，导致兼容问题
                    因内核不同故需要一个标准
        - Web标准定义：Web标准是由W3C组织和其他标准组织制定的一系列标准集合，W3C(万维网联盟)是国际最著名的标准化组织。
        - Web标准 构成： 结构(Structure)[HTML]、表现(Presentation)[CSS]、行为(Behavior)[Javascript]三个方面。
    

    --HTML标签
        - 双标签：例如<html></html> 第一个是开始标签 第二个是结束标签
        - 单标签：例如<br /> 比较少见，通常反斜杠在关键词后面(可省)，与关键词之间有空格

        - HTML标签关系
           -- 包含关系
               <HTML> 
                   <head><head>
                   <body><body>
               </HTML>
           -- 并列关系
              <div></div>
              <p></p>

    HTML基本结构标签(骨架标签)
       --语法：
           HTML最大的标签(根标签)
           <html>
                 文档头部标签 里面必须包含title标签
                 <head>
                     文档标题标签
                     <title>个人官网</title>
                 </head>
                 文档主体标签，页面内容基本都是放到body里面的
                 <body>小伙子什么车啊？AE86 飘一下啊 好啊！</body>
           </html>
    -->
    <!-- 前端开发工具
         - 1 Dreamweaver               古董 曾经的网页三剑客之一
         - 2 Sublime                   速度快 体积小 插件多 插件安装复杂
         - 3 Webstrom                  功能强大 付费 慢
         - 4 HBuilder X                HBuilder打包
         - 5 Visual Studio Code        前端神器，速度快 体积小插件多  
        -->
    <!-- 文档类型骨架标签
             <!DOCTYPE html> 文档类型声明 表示告诉浏览器使用HTML5版本显示网页

             lang= "en"   定义用那种语言显示  英文
             lang="zh-CN" 中文
              
             <meta charset="UTF-8">  万国码UTF-8 声明字符集 否则出现乱码
        -->
    <!-- 标签
         标签的语义：在合适的地方给一个合理的标签，可以让页面结构更加清晰
         -- 标题标签     <h1>标题标签</h1>
                         <h2>123</h2>
                         <h3>123</h3>
                         <h4>123</h4>
                         <h5>123</h5>
                         <h6>123</h6>
         标题特性： 
            1 一共六级，标题字号依次变小
            2 标题会加粗
            3 标题只会一行显示
        
        -- 段落标签  <p> </p>
            1 双标签
            2 段落标签一行显示
            3 段落标签之间内容有间隙
        
        -- 换行标签 <br [/]>
            1 单标签
            2 强制换行
            3 换行后无间隙
            4 单标签的后面反斜杠可以取消
            一般段落标签和换行标签搭配使用
        -- 文本格式化标签
           标签语义：突出重要性，让文字以特殊方式显示
           语义                     标签         
           加粗          <strong></strong>或<b></b>  
           倾斜          <em></em>或<i></i>
           删除线        <del></del>或<s></s>
           下划线        <ins></ins>或<u></u>
           推荐使用第一种，语义更强烈

        -- div和span标签   没有语义 就是盒子 用来装内容
           语法格式： <div></div>
                     <span></span>
           特点：1 div独占一行，一个大盒子 用于布局， div之间无间隙
                 2 span一行可以显示多个 一个小盒子 用于布局， span之间无间隙
        -- 图片标签 <img src="URL"/>
           
           语法格式：<img src="images/img.jpg" alt="替换文本" title="提示文本" width="200px" height="" border="15">
           
           属性           属性值             作用
           src            图片路径URL        指定图片文件路径和文件名
           alt            文本               图片不显示时替换文本
           title          文本               提示文本，鼠标悬停的时候显示
           width          像素(px)           图片宽度
           height         像素(px)           图片高度
           border         像素(px)           图片边框粗细
       
        -- 路径 
           - 相对路径：以引用文件所在位置作为参考，而建立的目录路径
                       图片相对于HTML文件的位置
                 1 同一级路径：<img src="img.jpg">         
                 2 下一级路径：<img src="images/img.jpg">
                 3 上一级路径：<img src="../images/img1.jpg">
                 4 上上级路径：<img src="../../images/img2.jpg">
                 5 当前路径：<img src="./images/img,jpg">
           - 绝对路径：是指文件的绝对位置，直接到达目标位置，通常从盘符开始路径
                 <img src="C:\Users\liuyun\Desktop\hiema\1day\img.jpg">
                网络中的绝对路径
                 <img src="http://192.168.18.96:8080/html/day02.html#_3-12-textarea-%E6%96%87%E6%9C%AC%E5%9F%9F%E6%A0%87%E7%AD%BE">       
                 注意绝对路径的反斜杠\与相对路径的反斜杠不同/
        -- 超链接标签 anchor意思是锚 a链接的缩写
           - 作用：可实现从一个页面到另一个页面
           - 语法：<a href="URL" target="_blank或者_self">文本或图像</a>
                      href路径属性 指定跳转路径   
                      target是打开窗口的方式
                         target="_blank" 在新的窗口打开
                         target="_self"  在原来的窗口打开，并覆盖原网页
           - 分类：
                   1 外部链接： 网址  <a href="http://www.baidu.com" target="_blank">百度</a>       
                              IP地址 <a href="http://192.168.18.96:8080" target="_blank">百度</a>
                   2 内部链接：<a href="04 标题标签.html">标签</a>
                               <a href="./上上级路径/上上级路径.html">路径</a>
                   3 空连接：  1   <a href="#">空连接</a> 空链接会刷新页面 跳转到页面顶部
                               2   <a href="javascript:;">空连接</a> 这个不刷新页面 也不会跳转到页面顶部
                   4 下载链接：如果href里面地址是一个文件或者压缩包(地址链接是文件.exe或者.zip) 则会下载这个文件
                                <a href="img.rar">下载压缩包</a>      
                      网页元素链接：在网页中可以对文本、图片、表格、音频、视频都可以添加链接
        
        -- 锚点链接
                - 点击链接，可以快速定位到页面的某个位置
                    1 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
                    2 找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two"></h3>
        -- 特殊字符
                 空格  &nbsp;    no break space
                 <     &lt;      less than
                 >     &gt;      greater than
                 &     &amp;
              人民币   &yen;
               乘号    &times；
               除号    &divide;
               正负号  &plusmn;
        -- VSCode快捷键
            快捷键                  作用
            ctrl+n                 新建文件
            ctrl+shift+z           恢复撤销
            alt+⬆/⬇                上下移动一行或多行
            alt+shift+⬆/⬇          上下复制一行或多行
            alt+z                  自动换行
        -- chrome快捷键
            快捷键                 作用
            ctrl+shift+c       打开控制台并启动选中元素模式
            ctrl+alt+j         打开控制台并开启Console窗口
        -- 记忆单词：
           tag                标签
           charset            字符集
           span               跨度
           src/source         源
           alt/alternative    供替代的选择
           ref/reference      引用参考
           target             目标
           blank              空白
           space              空间
           greater than       大于
           less than          小于

           Hyper Text Markup Language        超文本标记语言
           markup                            标记
           Chrome                            谷歌浏览器
           FireFox                           火狐浏览器
           Safari                            苹果浏览器
           Opera                             欧朋浏览器
           IE(Internet Explorer)             IE浏览器
           Structure                         结构
           Presentation                      表现
           Behavior                          行为
           paragraph                         段落
           break                             打断 换行
           division                          分割 分区 除法
           anchor                            锚
                -->
    <a href="http://192.168.18.96:8080" target="_blank">笔记</a>
</body>
</html>
一份蛋炒饭
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一天基本标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫