HTML复习与总结

charlie
115 阅读4分钟

HTML是什么

HTML是超文本标记语言（HyperText Markup Language）是一种用来创建网页的标记语言。它可以结构化超文本信息。

超文本

  • 文字
  • 图片
  • 音频
  • 视频
  • 动画

HTML使用各种标签区分上述超文本信息，最终呈现网页的骨架。

HTML基本结构

文档声明（doctype）

文档声明用来告诉浏览器当前网页的版本 HTML5的文档声明

    <!-- 这两种写法是等价的-->
    <!doctype html>
    <!Doctype HTML>

标签表示

</> 标签用尖括号表示，斜杠的放在结尾作为区分

根标签

<html></html>

网页中的所有内容和都要写在根元素里面

子标签

<head></head>

head标签代表网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎解析网页

<meta>

meta标签用来设置网页的元数据

<title></title>

title网页标题，搜索引擎会根据其来判断网页的主要内容

<body></body>标签

body是html的子元素，代表网页的主体，网页中的所有可见内容都应该写在body里

自结束标签

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta>
            <title></title>
        </head>
        <body>
        </body>
    </html>

注释

  • 注释标签：<!- - - ->
  • 注意：注释不能嵌套

属性

  • 用于设置标签（开始标签或自结束标签）中的内容如何显示
  • 属性和标签名或其他属性用空格隔开
  • 属性应该根据文档中的规定来填写
  • 有些属性有属性值，有些没有。属性值要用单引号或双引号包起来

语义化标签

语义化是HTML的重要概念。它提倡我们重点关注标签的语义化功能，而不是关注标签的表现形式，这是HTML负责网页框架的体现

基本标签

标题标签

h1~h6 一共有6级标题。重要性从h1~h6递减。

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

p标签

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

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

em/strong标签

em/strong标签用于加重语音语调（em表示斜体，strong表示粗体）

页面布局

布局标签在显示样式上没有任何区别，重点在语义

header

网页的头部

<header></header>

main

主体部分，一个页面只有一个

<main></main>

footer

表示网页的底部

<footer></footer>

nav

表示导航

<nav></nav>

aside

和主题相关的其他内容（侧边栏）

<aside></aside>

article

表示文章

<article></article>

section

表示一个独立的区块，上边的标签都不能用时用section

<section></section>

div

没有语义，表示区块。主要对布局元素

<div></div>

span

行内元素，没有语义，一般用在网页中选中文字

<span></span>

列表

有序列表

使用ol标签创建无序列表, li表示列表项

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

无序列表

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

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

列表之间可以互相嵌套

    <ul>
        <li>
            aa
              <ul>
                  <li>aa-1</li>
                  <li>aa-2</li>
                  <li>aa-3</li>
              </ul>
        </li>
    </ul>

定义列表

使用dl标签创建一个定义列表

dt:表示定义的内容

dd:对内容解释说明

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

图片标签

图片标签用于向当前页面引入一个外部图片

    <img src="../image/1.jpg" alt="头像" title="悬停文字" width="600" height="600">

超链接

超链接是html中非常重要的内容，可以说html就是为超链接而生的

什么是超链接

从一个页面跳转到其他页面或当前页面的其他位置

标签

使用a标签定义超链接

属性

href

用href 属性指定跳转的的目标路径。

href 的值可以是外部网站地址，也可以是内部页面地址

    <a href="https://www.baidu.com">超链接</a>
        <br><br>
    <a href="target.html">超链接</a>

如果href 的值设置为#，那点击超链接后将会跳转到页面顶部

    <a href="#">回到顶部</a>

音频和视频

audio和video标签

使用audio和video标签来给页面插入一段音频或视频

属性

controls: 是否允许自动播放

autoplay: 自动播放（但是目前大部分浏览器不会自动播放）

loop: 是否循环播放

    <audio src="happy.mp3"controls autoplay loop></audio>

source

除了通过src来指定外部文件的路径外，还可以通过source标签来指定文件。这样的代码格式的好处是可以插入多个链接，以解决浏览器兼容性问题

    <audio controls>
        <source src="happy5.mp3">
        <source src="happy.ogg"> <!--解决浏览器不支持MP3格式的问题-->
        <embed src="happy.mp3" type="audio.mp3" width="300" height="100"></embed> <!--解决ie8不支持问题-->
    </audio>

需要特别说明的是，ogg的音乐格式用于解决部分浏览器不支持MP3格式的问题；embed标签用于解决IE8不支持播放音频的问题，使用embed标签的时候，要设置type、width、height属性，否则无法显示

avatar
文章
阅读
粉丝