HTML基础知识

学习笔记
字数统计: 2.7k   |   阅读时长≈ 11 分钟

HTML学习

[TOC]

HTML基础知识

HTML标签

标签不区分大小写,推荐小写

标签种类

  1. 双标签(体标记) :格式如<标记名></标记名> .由开始和结束两个标记符组成的标记.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    例子:<a href="https://www.shiyanlou.com">实验楼</a> (第一个尖括号内科对属性进行设置)
    <html></html>        //html是根标记
    <head></head>        //头部标记;定义文档头部信息,一个 HTML 文档只能含有一对 <head>标记
    <title></title>        //<title>标记用于定义 HTML 页面的标题，必须位于<head>标记之内。只能有一对
    <body></body>        //<body>标记用于定义 HTML 文档所要显示的内容.在<head>之后.是用户所看到的.
    <h1></h1>            //用于对齐文字
    <h2></h2>
    <p></p>                //<p> 标签定义段落。
    <div></div>
    <span></span>
    <a></a>                //<a> 标签定义超链接，用于从一张页面链接到另一张页面。
                        //<a> 元素最重要的属性是 href 属性，它指示链接的目标(指向标签)。
                            例子:<a href="https://www.shiyanlou.com">实验楼</a>
                        //另一个属性是name属性,创建文档内的书签
                            <a href="#winter">查看冬天。</a>
                            <h2><a name="winter">冬</a></h2>
                            点击查看冬天则跳转到冬所在行
                        //target 属性：用于指定链接页面的打开方式，其取值有 _self(默认)                         和_blank(新开一个页面)
    <ul></ul>
    <ol></ol>
    <dt></dt>
    <dd></dd>
    <mark></mark>
    <iframe></iframe>

  2. 单标签(空标记) :格式如:<标记名/> ;

    1
    2
    3
    4
    <br/>     <!--换行-->
    <hr />    <!--水平分隔线-->
    <meta />
    <img />

标签关系

  1. 嵌套关系

    1
    2
    3
    4
    <head>  
        <title>  
        </title>  
    </head>

  2. 并列关系

    1
    2
    <head></head>
    <body></body>

HTML 列表

有序列表（ol），无序列表（ul）以及自定义列表（dl）。

  1. 有序列表(ol)

    1
    2
    3
    4
    语法格式:
    <ol type=value1 start=value2>
        <li></li>        
    </ol>
    1. 属性有 type start两种.type默认为数字列表(可设为”1”,”a”,”A”,”i”,”I”);

  2. 无序列表(ul)

    ul 的 type 属性：默认值(实心圆): disc，方块: square，空心圆: circle。

  3. 自定义列表（dl）

    1
    2
    3
    4
    <dl>                        自定义列表以<dl> 标签开始。
        <dt>名词1</dt>            每个自定义列表项以 <dt> 开始。
        <dd>名词1解释1</dd>            每个自定义列表项的定义以 <dd> 开始。
    </dl>

HTML 元数据

1
<meta>标签提供关于 HTML 文档的元数据：描述（description）、关键词（keywords）、文档的作者（author）等其他元数据。在<head>标签中

HTML 块

  1. 块级元素
    1. 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制。
    2. 常见块级元素：

      ,

      ,

        , 。
      • 内联元素
        1. 常见内联元素：,
        • , , 。
      • 内联元素在显示时通常不会以新行开始。

        • HTML 布局（div，span）

        table 元素布局：

        • 优点：
        1. 理解比较简单。
        2. 不同的浏览器看到的效果一般相同。
        3. table 在显示数据时更加方便
        • 缺点：
        1. 显示样式和数据绑定在一起。
        2. 布局的时候灵活度不高。
        3. 一个页面可能会有大量的 table 元素，代码冗余度高。
        4. 增加带宽。
        5. 搜索引擎不喜欢这样的布局。

        div 元素布局：

        • 优点：
        1. 符合 W3C 标准。
        2. 搜索引擎更加友好。
        3. 样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
        4. 节省代宽，代码冗余度低。
        5. 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

        一些其他的属性

        1. lang 属性:规定元素内容的语言。在以下标签中无效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>。
        2. style属性也比较常见

        文本格式

        标签 描述
        定义粗体文本 <b>新华网</b> 新华网
        定义大号字 <big>新华网</big> 新华网
        定义着重文字 <em>新华网</em> 新华网
        定义斜体字 <i>新华网</i> 新华网
        定义小号字 <small>新华网</small> 新华网
        定义加重语气 <strong>新华网</strong> 新华网
        定义下标字 <sub>新华网</sub> 新华网
        定义上标字 <sup>新华网</sup> 新华网
        定义插入字 <ins>新华网</ins> 新华网
        定义删除字 <del>新华网</del> 新华网
        定义字体属性 <font color="red" size="4">新华网</font> 新华网

        文档和网站架构

        专用标签:

        • 标题：
        • 导航栏：
        • 主要内容：
          具有代表性的内容段落主题可以使用
          ,
          ，
          元素。
        • 侧栏：
        • 页脚：

        HTML表格

        表格基本标签

        1. <table>标签 :用于在 HTML 文档中创建表格。它包含表名和表格本身内容的代码。
          1. 语法：<table>... </table>；
          2. 属性:
            1. border 边框厚度
            2. cellspacing:单元格与单元格间距离
            3. cellpadding:文字与单元格之间距离
            4. width;height 宽度,高度
            5. bgcolor:颜色
        2. <tr>标签 用于定义每一行。
        3. <td>标签 用于定义每一列。
        4. <th>标签 用于定义标题;
          1. colspan（合并行）和 rowspan（合并列）属性

        多媒体与嵌入概述

        图片

        1. 图像标签 <img> 标签(单标签) 语法为：`，
          1. src 的值是图像文件路径。
          2. alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。
          3. title 设置鼠标悬停时显示的内容（一般不用设置）
          4. 设置 width 和 height 的值来设置图片的宽和高
        2. 相对路径:位于上一级目录就用”../“
        3. 绝对路径:
        4. 自适应图片:width和height设置值为auto

        视频和音频

        1. <video>标签和<audio>标签

          属性 值 说明
          autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
          controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
          height pixels 设置视频播放器的高度。
          loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
          preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
          src url 要播放的视频的 URL。
          width pixels 设置视频播放器的宽度。

        2. <source> 标签:

          1. <source> 标签为媒介元素（比如<video>和 <audio>）定义媒介资源。

        矢量图

        1.图库

        iframe嵌入技术

        iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

        属性:

        属性 值 说明
        align leftrighttopmiddlebottom 不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
        frameborder 10 规定是否显示框架周围的边框。
        height pixels% 规定 iframe 的高度。
        longdesc URL 规定一个页面，该页面包含了有关 iframe 的较长描述。
        marginheight pixels 定义 iframe 的顶部和底部的边距。
        marginwidth pixels 定义 iframe 的左侧和右侧的边距。
        name frame_name 规定 iframe 的名称。
        sandbox “”allow-formsallow-same-originallow-scriptsallow-top-navigation 启用一系列对