HTML基础

最新推荐文章于 2021-12-21 14:49:58 发布

张昂之.

最新推荐文章于 2021-12-21 14:49:58 发布

阅读量275

点赞数

分类专栏：前端笔记文章标签： html html5

本文链接：https://blog.youkuaiyun.com/qq_46484093/article/details/106064492

版权

前端笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML的基础知识，包括HTML的发展历程，从最初的HTML1.0到HTML5的演进。重点讲解了HTML的结构，如元标签、语义化标签、列表、超链接、图片和音视频标签的使用。同时，提到了内联框架的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML简介

HTML（Hypertext Makeup Language）超文本标记语言
它负责网页的三要素之中的结构
HTML使用标签的形式来标识网页中的不同组成部分

HTML的发展

1993年6月：HTML第一个版本发布
1995年11月：HTML2.0
1997年1月：HTML3.2（W3C推荐）
1999年12月：HTML4.01（W3C推荐）
2000年底：XHTML1.0（W3C推荐）
2014年10月：HTML5（W3C推荐）

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; 版权符号

HTML标签

标签一般成对出现，但是也存在一些自结束标签

	<img>    
	<input>

meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看
   meat的属性：
        charset 指定网页的字符集
        <meta charset="UTF-8">
        
        name 指定的数据的名称
        content 指定的数据的内容
        <meta name="words" content="HTML5,前端,CSS3">
        
        description 用于指定网站的描述
       <meta name="description" content="京东JD.COM-为您提供愉悦的网上购物体验!"/>
          网站的描述会显示在搜索引擎的搜索的结果中

将页面重定向到另一个网站

/* content 设置几秒跳转到该网页   url 设置要跳转的网页*/
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

语义化标签

  在网页中HTML专门用来负责网页的结构
  所以在使用html标签时，应该关注的是标签的语义，而不是它的样式

标题标签：

h1 ~ h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1~h3，h4~h6很少用

示例：

     <h1>一级标题</h1>
     <h2>二级标题</h2>
     <h3>三级标题</h3>
     <h4>四级标题</h4>
     <h5>五级标题</h5>
     <h6>六级标题</h6>

hgroup标签

 用来为标题分组，可以将一组相关的标题同时放入到hgroup

<hgroup>
        <h1>回乡偶书二首</h1>
        <h2>其一</h2>
      </hgroup>

p标签

 表示页面中的一个段落，p也是一个块元素

    <p>在p标签中的内容就表示一个段落</p>

em标签

   用于表示语音语调的一个加重

<p>今天<em>必须</em>学习</p>

strong 表示强调，重要内容

<p>你今天必须要<strong>完成作业</strong>！</p>

引用标签

 /*blockquote 表示一个长引用*/ 
 鲁迅说：
      <blockquote>
          这句话我是从来没有说过的！
      </blockquote>
 /*q表示一个短引用*/
  子曰<q>学而时习之，不亦说乎</q>

布局标签（结构化语义标签）

    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>

列表

 在html中也可以创建列表，html列表一共有三种：
    1、有序列表
    2、无序列表
    3、定义列表
 列表之间可以互相嵌套

有序列表，使用ol标签来创建无序列表，使用li表示列表项

   <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
   </ol>

无序列表，使用ul标签来创建无序列表，使用li表示列表项

<ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

定义列表，使用dl标签来创建一个定义列表，使用dt来表示定义的内容
使用dd来对内容进行解释说明

 <dl>
     <dt>结构</dt>
     <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
      <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
    </dl>

超链接

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

使用方法：

 使用 a 标签来定义超链接

属性：

href 指定跳转的目标路径

- 值可以是一个外部网站的地址
- 也可以写一个内部页面的地址
- 可以直接将超链接的href属性设置为#，这样点击超链接以后
  页面不会发生跳转，而是转到当前页面的顶部的位置
-也可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
-还可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生

 /*外部网站的地址*/
 <a href="https://www.baidu.com">超链接</a>
 
 /*内部页面的地址*/
  <a href="07.列表.html">超链接2</a>
  
 /*转到当前页面的顶部的位置*/
  <a id="bottom" href="#">回到顶部</a>
  
  /*跳转到页面的指定位置*/
   <a href="#bottom">去底部</a>
   <a href="#p3">去第三个自然段</a>
   
 /*使用 javascript:;*/
 <a href="javascript:;">这个链接不会动</a>

target属性，用来指定超链接打开的位置

 可选值：
         _self 默认值 在当前页面中打开超链接
         _blank 在一个新的页面中打开超链接

/*打开一个新的页面*/
<a href="07.列表.html" target="_blank">超链接</a>

图片标签

图片标签用于向当前页面中引入一个外部图片
     使用img标签来引入外部图片，img标签是一个自结束标签
     img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

属性：

src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

 alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

     width 图片的宽度 (单位是像素)
     height 图片的高度    
         - 宽度和高度中如果只修改了一个，则另一个会等比例缩放
     注意：
         一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
         但是在移动端，经常需要对图片进行缩放（大图缩小）

 <img src="./img/1.gif" alt="松鼠">

 <img width="200"  src="https://d2ggl082rr1mkp.jpeg" alt="钢铁侠">

内联框架（了解）

内联框架，用于向当前页面中引入一个其他页面
<iframe> </iframe>
        src 指定要引入的网页的路径
        frameborder 指定内联框架的边框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

音视频标签

audio 标签用来向页面中引入一个外部的音频文件的

属性

controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
    如果设置了autoplay 则音乐在打开页面时会自动播放
    但是目前来讲大部分浏览器都不会自动对音乐进行播放 
 loop 音乐是否循环播放  
 src指定外部文件的路径

 <audio controls>
        <source src="./source/audio.mp3">
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>

video标签来向网页中引入一个视频

 使用方式和audio基本上是一样的

<video controls>
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4">
        <embed src="./source/flower.mp4" type="video/mp4">
    </video>