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>

#一般网站底部描述可用
原文地址:https://www.cnblogs.com/Chestnut-g/p/14263974.html