zoukankan      html  css  js  c++  java
  • HTML 基础

    浏览器内核

    • 渲染引擎
    • JS引擎(现在基本不常用)
    • 浏览器内核主要有四个:
      • Trident (IE内核)
      • Gecko(Firefox火狐内核):开源
      • Webkit (safari苹果内核)
      • Blink(chrome谷歌内核):其实是Webkit的分支

    Web标准

    • 由W3C与其他标准化组织制定的一系列标准
    • 结构标准:用来进行分类;分为XML和XHTML两部分
    • 表现(样式)标准:外观样式;以css为主
    • 行为标注:网页模型定义及交互的编写;主要有DOM和ECMAScript

     HTML初始

     HTML骨架格式

    <html>
        <head>
            <title>Document</title>
        </head>
        <body>
            
        </body>
    </html>

    标签分类

    • 双标签:<标签名> </标签名>;如上所示HTML骨架格式中都是双标签格式
    • 单标签:<标签名/>; 如<br/>换行符

    标签关系

    • 嵌套标签
    • 并列标签

    文档类型

    • <!DOCTYPE html>(HTML5的文档类型格式)

    字符集

    • <meta charset="UTF-8">(HTML5的字符集格式)

    HTML标签的语义化

    • 指标签的含义

    HTML常用标签分类

    • 排版标签:主要和css搭配使用
    • 标题标签:h1 h2 h3 h4 h5 h6
    • 段落标签:p
    • 水平线标签:hr
    • 换行标签:br
    • div、span标签:没有语义
    • 图像标签:img

    示例

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
            <!-- 标题标签:h1|h2|h3|h4|h5|h6 -->
            <h1>不想做秃头少女!!!</h1>
            <h2>不想做秃头少女!!!</h2>
            <h3>不想做秃头少女!!!</h3>
            <h4>不想做秃头少女!!!</h4>
            <h5>不想做秃头少女!!!</h5>
            <h6>不想做秃头少女!!!</h6>
    
            <!-- 段落标签:p -->
            <p>段落标签,用来对文字进行分段</p>
    
            <!-- 水平线标签:horizontal   单标签 hr -->
            <hr/>
    
            <!-- 换行标签:br 单标签 -->
            <br/>
    
            <!-- 图像标签:img 单标签 -->
            <!-- 
              alt 与 title 的区别:
                1、alt:当图片无法显示是,会被alt中的文字所替换
                2、title:当鼠标悬停在图片上时,显示title中的文字
            -->
            <img src="图片路径" alt="这是一张图片" title="哈哈哈"/>
        </body>
    </html>

    页面展示如下

    标签属性

    • width
    • height
    • 、、、

    链接标签  |  锚点定位  |  base标签

    示例

    <!DOCTYPE html>
    <html lang="en">
    
         <head>
              <meta charset="UTF-8">
              <title>Document</title>
         </head>
    
         <body>
              <!-- 
                   链接标签:
                   1、必须有 href 属性;并且 href 中存放的是链接地址url
                   2、链接地址必须以 http:// 或 https:// 开头
                   3、内部链接只需要在 href 中写入页面名称即可:如 demo.html ;后缀名 .html 必须有
              -->
              <a href="https://www.baidu.com/">百度</a><br><br>
    
              <!-- 
                   锚点定位:
                   1、也是 a 标签;与链接标签不同的是 href 属性中的内容; href = " # 所要定位的标签中id的内容 "
                   2、需要定位的标签中 id 属性格式:id = " 所要定位的标签中id的内容 "
              -->
              <a href="#baidu">百度</a><br><br>
              <a href="#chrome">谷歌</a><br><br>
              <a href="#web">新浪微博</a><br><br>
    
              <h3>百度简介</h3>
              <p>全球最大的中文搜索引擎、致力于让网民更便捷地获取信息,找到所求。百度超过千亿的中文网页数据库,可以瞬间找到相关的搜索结果。</p>
    
              <h3>谷歌简介</h3>
              <p>双核高速浏览器_双核智能浏览器免费下载!纯净无捆绑,拒绝卡顿,智能双核,秒开网页,双核高速浏览器_由软件管家提供下载,快速更安全!</p>
    
              <h3 id="web">新浪微博简介</h3>
              <p>随时随地发现新鲜事!微博带你欣赏世界上每一个精彩瞬间,了解每一个幕后故事。分享你想表达的,让全世界都能听到你的心声!</p>
    
              <!-- 
                   base标签:target
                   1、target = "_blank" :以新页面打开所要链接的页面,不覆盖原有页面
                   2、target = "_self" :覆盖原有页面打开所要链接的页面
                   3、当链接页面过多时,可以使用 base 标签一次性将所有链接界面的 target 属性设置为想要的值
              -->
              <base target = "_blank"/>
              <a href="https://www.baidu.com/" target="_self">百度</a><br><br>
              <a href="https://www.google.cn/" target="_blank">谷歌</a><br><br>
              <a href="https://weibo.com/">新浪微博</a><br><br>
              <a href="https://www.zhihu.com/signin?next=%2F">知乎</a><br><br>
         </body>
    
    </html>

    特殊字符

    • &nbsp:空格符
    • <:&lt
    • >:&gt
    • 、、、
     

    相对路径

    • 同级路径:img.pg
    • 下一级路径:images/img.jpg
    • 上一级路径:../img.jpg
    • 绝对路径:
      • 本地:右键-属性 获取图片或文件的句绝对路径(不推荐使用
      • 浏览器:在浏览器中复制图片等的路径

    列表标签

    • 无序列表:没有顺序级别之分,是并列的
    <ul>
        <li>并列</li>
        <li>并列</li>
    </ul>

    #注意:
    1、<ul>标签中只能放<li>标签!
    2、<li>标签中可以容纳所有元素
    3、无序列表有其自己特有的属性样式:
    • 并列
    • 并列
    • 有序列表:按照一定的顺序排列定义
    <ol>
        <li>父母</li>
        <li>孩子</li>
    </ol>

    #同无序列表一样,有序列表的特有样式如下:
    1. 父母
    2. 孩子
    • 自定义列表
    <dl>
           <dt>定义标题</dt>
           <dd>对所定义的标题进行描述、解释</dd>
    </dl>

    #一般网站底部描述可用
  • 相关阅读:
    vue系列---identify(生成图片验证码)插件
    vue中的锚链接跳转问题
    vue中怎样实现 路由拦截器
    Vue生命周期和考点
    Vue如何使用vue-area-linkage实现地址三级联动效果
    JS的Key-Val(键值对)设置Key为动态的方法
    web开发——在网页中引用字体包(.ttf),即嵌入特殊字体
    spring boot 实现多个 interceptor 并指定顺序
    BigDecimal加减乘除计算
    乐观锁解决并发问题
  • 原文地址:https://www.cnblogs.com/Chestnut-g/p/14263974.html
Copyright © 2011-2022 走看看