HTML简介

HTML(Hypertext Makeup Language)超文本标记语言
它负责网页的三要素之中的结构
HTML使用标签的形式来标识网页中的不同组成部分
所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面

HTML标签

  • HTML中的标记指的就是标签
  • HTML使用标记标签来描述网页
<!-- 结构 -->
<标签名>内容</标签名>

<!-- 
    标签一般成对出现
    也有一些自标签,例如:
    <img>
    <img />
    <input>
    <input />
 -->

 <!--  -->

 <!-- ↑ 此为HTML注释
    - 注释中的内容会被浏览器所忽略,不会在网页中直接显示,可以将一些不希望显示的内容隐藏 -->

HTML属性

  1. 在标签中(开始标签或自结束标签)还可以设置属性
  2. 属性是一个名值对(x=y)
  3. 属性用来设置标签中的内容如何显示
  4. 属性和标签名或其他属性应该使用空格隔开
  5. 属性不能瞎写,应该根据文档中的规定来编写
  6. 如果有属性值,应该使用引号引起来

进制


特点:满10进1
计数:0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20
单位数字:10个(0-9)

特点:满2进1
计数:0 1 10 11 100 101 110 111 1000 1001 1010 1011 1100
单位数字:2个(0-1)
扩展:
所有数据在计算机底层都会以二进制的形式保存
可以将内存想象为一个由多个小格子组成的容器,每一个小格子可以存储一个0或1
这一个小格子在内存中被称为1位(bit)

8bit= 1byte(字节)
1024byte = 1kb(千字节)
1024kb = 1mb(兆字节)
1024mb = 1gb(吉字节)
1024gb = 1tb(特字节)
1024tb = 1pb


特点:满8进1
计数:0 1 2 3 4 5 6 7 10 11 12 ... 17 20
单位数字:8个(0-7)

(一般显示一个二进制数字时,都会转换为十六进制)
特点:满16进1
计数:0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 ... 1a 1b 1c 1d 1e 1f 20..
单位数字:16个(0-f)

编码

  • 在计算机内部,文件都是以二进制编码保存的
  • 所谓的二进制编码就是指1和0,也就是我们的所有内容都需要转换为1和0
  • 将字符转换为二进制码的过程称为编码
  • 将二进制码转换为字符的过程称为解码
  • 常见的字符集:ASKII、ISO8859-1、GBK、GB2312、UTF-8

<!-- 在HTML5中只需要使用meta标签即可完成这个任务 -->
<meta charset="utf-8">

HTML网页的基本结构

<!-- 文档声明,声明当前网页的版本 -->
<!DOCTYPE html>

<!-- html的根标签(元素),网页中的所有内容都要写根元素的里边 -->
<html>

    <!-- head是网页的头部,head中的内容不会在网页中直接出现,主要用来帮助浏览器或搜索引擎来解析网页 -->
    <head>

        <!-- meta标签用来设置网页的元数据,这里meta用来设置网页的字符集,避免乱码问题 -->
        <meta charset="utf-8">
        
        <!-- title中的内容会显示在浏览器的标题栏,搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
        <title>网页的标题</title>

    </head>

    <!-- body是html的子元素,表示网页的主体,网页中所有的可见内容都应该写在body里 -->
    <body>

        <!-- h1网页的一级标题 -->
        <h1>网页的大标题</h1>

    </body>

</html>

实体

  • 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
  • 在HTML中有些时候,我们不能直接书写一些特殊符号, 比如:多个连续的空格,比如字母两侧的大于和小于号
  • 如果我们需要在网页中书写这些特殊的符号,则需要使用html中的实体(转义字符)
<!-- 常见实体及语法: -->
&实体名称;
&nbsp; <!-- 空格 -->
&gt; <!-- 大于号 -->
&lt; <!-- 小于号 -->
&copy; <!-- 版权符号 -->

Meta标签

  • meta主要用于设置网页中的一些元数据,元数据不是给用户看,而是给浏览器看的
  • charset 指定网页的字符集
  • name 指定的数据的名称
  • content 指定的数据的内容
  • keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开
    <meta name="keywords" content="HTML,前端,css">
    <meta name="description" content="这是一个网站描述">
    <meta http-equiv="refresh" content="3;https://banne.cn">
    <title>Dome</title>
    <!-- 将页面重定向到另一个网站,title标签的内容会作为搜索结果的超链接上的文字显示 -->

语义化标签

  • 在网页中HTML专门来负责网页的结构,所以在使用html标签时,应该关注的是标签的语义,而不是它的样式
  • h1 ~ h6 一共有六级标题
  • 从h1~h6重要性递减,h1最重要,h6最不重要
  • h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1
  • 一般情况下标题标签只会使用到h1-h3,h4-h6很少用
  • 标题标签都是块元素
  • 简单来说, 在页面中独占一行的元素称为块元素(block element)
    <h1>一级标题</h2>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup -->
    <hgroup>
        <h1>回乡偶书</h1>
        <h2>其一</h2>
    </hgroup>


<!-- 
    p标签表示页面中的一个段落

    p也是一个块元素
-->
    <p>一个段落</p>
    <p>一个段落</p>


    <!-- em标签用于表示语音语调的一个加重 -->
    <p>今天天气<em>真</em>不错!</p>

块元素与行内元素(内联元素)

在网页中一般通过块元素来对页面进行布局
行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素
块元素中基本上什么都能放
p元素中不能放任何的块元素

布局标签(结构化语义标签)

  • header 表示网页的头部
  • main 表示网页的主体部分(一个页面中只会有一个main)
  • footer 表示网页的底部
  • nav 表示网页中的导航
  • aside 和主体相关的其他内容(侧边栏)
  • article 表示一个独立的文章
  • section 表示一个独立的区块,上边的标签都不能表示时使用section
  • div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
  • span 行内元素,没有任何的语义,一般用于在网页中选中文字
    <header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

列表(list)

HTML列表一共有三种:

  1. 有序列表
  2. 无序列表
  3. 定义列表
有序列表,使用ol(ordered list)标签来创建无序列表
使用li表示列表项
<ol>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ol>
无序列表,使用ul(unordered list)标签来创建无序列表
使用li表示列表项
<ul>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ul>
定义列表,使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
<dl>
    <dt>结构</dt>
    <dd>结构用来规定网页中哪里是标题,哪里是段落</dd>
    <dd>结构用来规定网页中哪里是标题,哪里是段落</dd>
    <dd>结构用来规定网页中哪里是标题,哪里是段落</dd>
</dl>
列表之间可以互相嵌套
   <ul>
        <li>
            aa
            <ul>
                <li>aa-1</li>
                <li>aa-2
                    <ul>
                        <li>aa-1</li>
                        <li>aa-2</li>
                    </ul>
                </li>
            </ul>
        </li>
   </ul>

超链接

超链接的含义

超链接可以让我们从一个页面跳转到其他页面, 或者是当前页面的其他的位置

  • 使用 a 标签来定义超链接
  • 属性:href 指定跳转的目标路径,值可以是一个外部网站的地址,也可以写一个内部页面的地址
  • 在开发中可以将#作为超链接的路径的展位符使用
  • 可以使用 javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生
  • 可以直接将超链接的href属性设置为#,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部的位置
  • 只需将href属性设置 #目标元素的id属性值,就可以跳转到页面的指定位置,
<a href="#">这是一个新的超链接</a>
<br><br>
<a href="javascript:;">这是一个新的超链接</a>

<!-- target属性,用来指定超链接打开的位置
可选值:
_self 默认值 在当前页面中打开超链接
_blank 在一个新的要么中打开超链接 -->

<a href="2.index.html">超链接1</a>
<a href="http://banne.cn">超链接</a>

图片标签

名称 特点 用途
jpeg(jpg) 支持的颜色比较丰富,不支持透明效果,不支持动图 一般用来显示照片
GIF 支持的颜色比较少,支持简单透明,支持动图 颜色单一的图片,动图
png 支持的颜色丰富,支持复杂透明,不支持动图 颜色丰富,复杂透明图片(专为网页而生)
webp 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式(缺点:兼容性不好) 它具备其他图片格式的所有优点,而且文件还特别小
base64 将图片使用base64编码,这样可以将图片转换位字符,通过字符的形式来引入图片 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样,用小的;效果不一样,用效果好的
    <!--
        img标签属于替换元素(基于块和行内元素之间)
        src 属性指定的图片路径
        alt 图片的描述,这个描述默认情况下不会显示
            搜索引擎会根据alt中的内容来识别图片,不写alt属性则不会被搜索引擎收录
        width 宽度
        height 高度 (单位是像素 px)
    -->

    <img width="" height="" src="" alt="">

内联框架

  • 内联框架,用于向当前页面映入一个其他页面
  • src 指定要引入的网页路径
  • frameborder 指定内联框架的边框
<iframe src="http://banne.cn" width="800" height="600" frameborder="0"></iframe>

音视频

  • audio 标签用来向页面中引入一个外部的音频文件
  • 使用video标签来向网页中引入一个视频, 使用方式和audio基本上是一样的
  • 音视频文件引入时,默认情况下不允许用户自己控制播放停止

属性

  1. controls 是否允许用户控制播放
  2. autoplay 音频文件是否自动播放
  3. 如果设置了autoplay 则音乐在打开页面时会自动播放, 但是目前来讲大部分浏览器都不会自动对音乐进行播放
  4. loop 音乐是否循环播放
  5. src指定外部文件路径
  6. 除了通过src来指定外部文件的路径以外,还可以通过source来指定文件的路径
    <!-- audio标签 -->
<audio controls>
    <source src="./source/audio.mp3">
    <source src="./source/audio.ogg">
    <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>

    <!-- video标签 -->
<video controls>
    <source src="./source/flower.webm">
    <source src="./source/flower.mp4">
    <embed src="./source/flower.mp4" type="video/mp4">
</video>
Last modification:May 15th, 2020 at 05:15 pm
如果觉得我的文章对你有用,请随意赞赏