HTML初学自用1

于 2024-07-16 21:48:12 发布
阅读量600 收藏 11
点赞数 20
分类专栏： 自用 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaogodzero/article/details/140474271
版权

一、HTML的概述

1.1简介

HTML，全称叫超文本标记语言，英文名是Hyper Text Markup Language，是一种标记语言。

HTML是用来设计网页的布局结构的。

（1）html的编辑

需要拓展名为.html的文件。拓展名查看方法如下图

编辑器（加粗已安装）

  1. 0.Visual Studio Code
  2. 1.微软电脑自带的记事本
  3. 2.Sublime Text
  4. 3.Notepad++
  5. Atom、Webstome、Dreamwear、HBuidler等

（2）HTML的运行与调试

HTML文本需要使用浏览器来运行，浏览器内置的解析器可以解析HTML的各种标签。

主流的浏览器

  • chrome
  • Edge
  • 火狐
  • Safari浏览器（苹果浏览器）
  • IE（时代的眼泪）

（3）HTML版本（了解一下）

  1. HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
  2. HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
  3. HTML 3.2：1997年1月14日，W3C推荐标准。
  4. HTML 4.0：1997年12月18日，W3C推荐标准。
  5. HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
  6. HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

 1.2HTML的基本结构

        

使用vscode输入“!”然后按回车键快速生成。如下图

第一行<!DOCTYPE html>         声明该文档是HTML5文档，固定写法，浏览器率先识别HTML5。 必须放在首行。DOC就是document（文档），type是类型，意思就是文档类型是html。

第二行的 <html lang="en">跟第十一行的</html>是一对儿。不可缺少。html是双标记标签哦。

是HTML的根标记(根元素)，该标记在文档中只能有且只有一个。后面lang=“en”是language 和English，意思就是语言是英语。

第三行的<head>就是英文单词的意思，头部（我们来组成头部），也是是双标记标签，成对出现不可缺少。他的内部可以写不少东西。如下：

进行网页meta的设置（规定字符集等），定义标题，引入css，引入js文件，或者别写style和javascript代码等。

上述的标签（也就是代码形式的头为）

`<title>`,` <style>`,` <meta>`,` <link>`, `<script>`,` <noscript>` 和 `<base>`。

第四行的 <meta charset="UTF-8"> 首先解释标签meta，meta元素描述了一些基本的元数据。元数据不显示在页面上，但会被浏览器解析。比如指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。后面charset="UTF-8",char是字符，字符集；意思就是字符集是UTF-8。第四行的作用就是规定字符集。

第五行略过，反正都是关于<meta>的，等后面再记录。（目前这行都是CTRL+X删除的）

第六行 <title>Document</title>，这是上面提到的head标签里面的子标签title，也是双标记标签，不可缺少，成对儿出现。意思就是英文意思，他们之前的内容，如生成的Document就是标题，平时看到的网站的标题就是这个。

<title> 在 HTML/XHTML 文档中是必需的，该标签定义了不同文档的标题：

  • 即浏览器工具栏(标签页)的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

第七行为head的尾标签，<head></head>，同时出现，不可缺少。双标记标签。

第八行位body标签，也是双标记标签。用来定义网页的可见内容。

后面两行都是尾标签，不再多说。

注意: 编辑工具的字符集要和网页显示时字符集一致。

1.3HTML的实体

HTML 和XHTML 预留了一些字符，您不能使用包含这些字符的文本，因为浏览器可能会误以为是 HTML 标签。比如在文字中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

实体的提出就是为了正确的显示你所输入的字符，所以我们必须在HTML源代码中使用字符实体（character entities）。

比如空格， 浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用&nbsp;字符实体。

常用实体如下：（前四个常用）

显示结果描述实体名称实体编号
 空格&nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
"引号&quot;&#34;
'撇号&apos; (IE不支持)&#39;
￠分&cent;&#162;
£镑&pound;&#163;
¥人民币/日元&yen;&#165;
€欧元&euro;&#8364;
§小节&sect;&#167;
©版权&copy;&#169;
®注册商标&reg;&#174;
™商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;

1.4meta元素

主要功能如代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <!--字符集  -->
    <meta charset="UTF-8">
    <!-- mate元素也可以使用刷新功能，实现几秒后刷新或者跳转 -->
    <!-- <meta http-equiv="refresh" content="5"> -->
    <meta http-equiv="refresh" content="5;url=http://www.runoob.com">
    <title>MATE元素的学习</title>
    <style>
        /* style元素用来设置HTML的各种样式 */
    </style>
    <!-- 当样式代码过多时，可以将样式代码放入一个独立的CSS文件中，使用link标签引入即可 -->
    <link rel="stylesheet" href="CSS文件地址">
    <script src="js文件的地址">
        // script标签用来书写交互代码的，如果交互代码过多，可以放入一个独立的js文件当中
        // 也就是使用script标签里的属性src引入过来即可
    </script>


</head>
<body>
    
</body>
</html>

1.5基础标签

（1）标题段落水平线换行

<body>
    <!-- 标题标签，用于设置一级到六级的标题，标签从h1到h6 -->
     <h1>编程语言的学习</h1>
     <h2>HTML语言</h2>
     <h3>常用标签</h3>
     <h4>html根标记</h4>
     <h5>根标记简介</h5>
     <h5>根标记练习</h5>
     <h6>最小标题</h6>
     <!-- hr属于一个水平线标签，是一个自结束标记（空元素，单标记） 也属于块元素-->
     <hr>
    
     <!-- 段落标签:用于将一段文字包裹起来，可以设置使用各种样式，使用p标签，
      也是双标记，属于块级元素 -->
      <p>段落</p>
      <p>段落1</p>
      <p>段落2</p>
      <hr>
      <!-- 换行标签br，是一个自结束标记（空元素，单标记）在想要换行的地方插入换行符号 -->
      <p>鹅鹅鹅, <br> 曲项向天歌， <br> 白毛浮绿水， <br>红掌拨清波。</p>
    
</body>

总结一下上面说的，就是有<h1>到<h6>种的标题标签。段落标签<p>。这两个都是双标记标签。水平线标签<hr>和换行标签<br>，他们都是单标签。

（2）img图片标签

<!-- 图片标签：img 单标记 不是块元素，是内联元素（行内元素）。 
 作用：插入一张图片
 属性：
    src：用于书写图片位置（网络上的一张图片或者本地磁盘上的图片）
    alt： 给搜索引擎使用的的，也就是图片的替代文字
    width： 图片的宽
    height:  图片的高
    如果只设置宽高中的一个属性，图片会照比原图等比例缩放-->
<body>
    <h1>引入网络上的图片</h1>
    <img src="https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641" 
    alt="蜜蜂" 
    width="600" height="600px">
    <h1>引入本地磁盘上的一张图片</h1>
    <!-- 路径的写法：有两种，相对路径和绝对路径
     相对路径：相对的是当前文件所在的文件夹。当前文件夹，当前文件夹的表示方法 ./ 
     ../表示返回上一层文件夹
     绝对路径：一般指的就是项目的根或者磁盘的盘符开始写。
     -->
     <!-- 
     注意：
        如果使用了live server 插件，那么绝对路径的根就不是磁盘盘符，而是当前vscode的工作空间
        如果没有使用，则从盘符开始写。 -->
    <img src="./images/1.jpg" alt="花">
    <h1>引入本地磁盘上的第二张图片</h1>
    <img src="../code/images/2.jpg" alt="昙">
</body>

还是总结，上面主要说了<img>标签，不是块元素，是内联标签。（块标签也就是块元素，是块的会自己换行，内联标签不会。）标签的作用就是插入图片。属性：src（必须品）alt（搜索引擎搜到的图片名字，会搜alt中的名字）width是图片的宽，height是图片的高。如果只设置宽高中的一个属性，图片会照比原图等比例缩放。相对路径与绝对路径，然后就是注意live server插件对绝对路径的影响。

（3）超链接标签

超链接标签a标签，双标记，超链接指的就是点击后跳转到另一个页面或者本页面的其他位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接的学习</title>
</head>
<!-- 超链接：a标签，双标记，超链接指的就是点击后跳转到另一个页面或者本页面的其他位置
 属性：
    href：与图片src相似，就是书写目的地的路径
    title： 鼠标悬停在超链接上时显示的内容
    target： 值1：_blank 新标签页打开
            值2：_self 本标签打开 默认值-->


<body>
    <h1>文字链接</h1>
    <a href="http://runoob.com">点我跳转菜鸟教程网站</a>
    <h1>图片链接</h1>
    <a href="http://www.vip.com" title="跳转到唯品会官网" target="_blank">
        <img src="./images/昙花.png" alt="昙花" width="500">
    </a>
    <h1>锚点连接：跳转到本页面的某个位置</h1>

    <a href="#c7">点我跳转到章节7</a>

    <h1> 章节1</h1>
    <p> 段落的内容</p>

    <h1> 章节2</h1>
    <p> 段落的内容</p>

    <h1> 章节3</h1>
    <p> 段落的内容</p>
        
    <h1 id="c4"> 章节4</h1>
    <p> 段落的内容</p>
        
    <h1> 章节5</h1>
    <p> 段落的内容</p>
        
    <h1> 章节6</h1>
    <p> 段落的内容</p>
        
    <h1 id="c7"> 章节7</h1>
    <p> 段落的内容</p>
        
    <h1> 章节8</h1>
    <p> 段落的内容</p>
        
    <h1> 章节9</h1>
    <p> 段落的内容</p>
        
    <h1> 章节10</h1>
    <p> 段落的内容</p>
        
    <h1> 章节11</h1>
    <p> 段落的内容</p>
        
    <h1> 章节12</h1>
    <p> 段落的内容</p>
        
    <h1> 章节13</h1>
    <p> 段落的内容</p>
        
    <h1 id="c14"> 章节14</h1>
    <p> 段落的内容</p>
        
    <h1> 章节15</h1>
    <p> 段落的内容</p>
        
    <h1> 章节16</h1>
    <p> 段落的内容</p>
    <a href="#"><button type="button" title="回到顶端">回到最顶端</button></a>
</body>
</html>

总结一下，超链接标签主要属性是 href，内容是URL。title是标悬停在超链接上时显示的内容，

target只有两个值，值1：_blank 新标签页打开，值2：_self 本标签打开 默认值。

（4）按钮标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮button的学习</title>
</head>

<!-- 
    基本按钮标签，双标记，内容体里可以放入文字或者图片。
            建议：添加type属性，指定属性为button。

-->
<body>
    <button type="button" onclick="alert('你好，世界!')">点我!</button>
    <button type="button" onclick="alert('你好！')">点我提示你好</button>
    <button type="button" onclick="alert('世界')">
        <img src="./images/1.jpg" alt="aa">
    </button>
</body>
</html>

结果如图：

点击图片提示：

总结一下，在 <button>元素内部，可以放置文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。注意上述alert的写法，别写反了。

注意：请始终为 <button> 元素规定 type 属性。不同的浏览器对<button> 元素的 type 属性使用不同的默认值。

1.6格式化标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>强调加粗</h1>
    <p>你是 <strong>最棒</strong>的，谁也比不上你。 <b>鹅鹅鹅</b>，哈哈哈</p>
    <h1>斜体</h1>
    <p>日照 <em>香炉</em>生紫烟，遥看 <i>瀑布</i>挂前川</p>
    <h1>java代码</h1>
    <code>
        System.out.println("hello word")
    </code>
    <h1>预格式化标签</h1>
    <pre>
        你好！   前面有三个空格
        这是第二行          
        这是第三行   前面有三个空格
    </pre>
    <h1>bdo改变文字方向</h1>
    <bdo dir="rtl">你好</bdo>
    <h1>引用 双引号</h1>
    <p>咏鹅
        <blockquote>--骆宾王</blockquote>鹅鹅鹅，曲项向天<q>歌</q>
        <small>白</small>白毛浮绿 <sub>水</sub> <sup>红</sup>掌拨清波
    </p>

</body>
</html>

运行结果：

常用的格式化标签：

  • <strong>加重语气的的文本

  • <b>加粗,bold的意思

  • <em>斜体效果，强调作用

  • <i>斜体效果itatic

  • <pre>预格式化文本

  • <small>更小的文本

  • <code>用于存放计算机代码

  • <bdo>文字显示的方向

  • <blockquote> 引用标签

  • <q> 双引号标签

  • <del> 删除文本

  • <ins>插入文本

  • <sub>下标文本

  • <sup>上标文本

1.7 列表

列表分为 有序列表（ol）和无序列表（ul），还有自定义列表（dl）。

ol 和ul 的子标签都是li，dl中的子标签分为dt和dd，dd是对dt的解释。列表之间也可以相互嵌套。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表的学习</title>
</head>
<body>
    <h1>无序列表</h1>
    东北三省的名字
    <ul>
        <li>黑龙江省</li>
        <li>吉林省</li>
        <li>辽宁省</li>
    </ul>

    <hr>
    <h1>有序列表</h1>
    <!-- ol>li*5 -->
    <ol>
        <li>吕布</li>
        <li>赵云</li>
        <li>典韦</li>
        <li>关羽</li>
        <li>马超</li>
    </ol>
    <hr>
    <h1>列表的嵌套</h1>
    学校排名：
    <ul>
        <li>1班
            <ol>
                <li>小明</li>
                <li>张三</li>
                <li>小红</li>
            </ol>
        </li>
        <li>2班
            <ol>
                <li>徐天乐</li>
                <li>张大喵</li>
                <li>李仇天</li>
            </ol>
        </li>
        <li>3班
            <ol>
                <li>黄天翔</li>
                <li>徐志刚</li>
                <li>张三岁</li>
            </ol>
        </li>
    </ul>
    <hr>
    <h1>自定义列表</h1>
    <!-- dl作为父标签，dt和dd是两个子标签， dt作为列表项 dd作为列表项的解释 -->
    <dl>
        <dt>北京</dt>
        <dd>中国的首都，是认口最多的城市</dd>
        <dt>深圳</dt>
        <dd>是一座经济发达，人口数量靠前的城市，工资也非常高</dd>
        <dt>杭州</dt>
        <dd>最近几年发展最快的城市，科技公司多数都想搬到该城市</dd>


    </dl>

</body>
</html>

结果截图：

 1.8表格

（1）一般表格

 table标签，主要含有四个子标签，为caption，thead，tbody，tfoot，对应的分别为，表明，表头，表体，表尾。特别的在thead标签中，每一列要有th，因为表头是一行，所以也要有tr。tbody中tr含td。比较快的写法三行四列：tr*3>td*4。table主要属性有：

  • border:  表的外边框  
  • cellspacing:  单元格之间的距离，cellspacing="0"消除表格间的空。
  • cellpadding:  内容区距离单元格边框的距离
  • align:   表格整体的位置  center  left  right
  • width:   表格整体的宽度  可以是具体像素，也可以是屏幕的百分比

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的学习</title>
</head>
<body>
    <!-- 表格一般用于标记格式化的数据，有行有列，每一列都有标题。
     在过去也应用于页面的布局上，但是现在一般都使用`<div>`标签做页面的布局了。 
        boder:是边框的宽度
        -->
    <table border="5px" cellspacing="0px" width="50%"  cellpadding="5px"   align="center">
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>

        <tbody>
            <tr align="center">
                <td>1</td>
                <td>张三</td>
                <td>19</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>18</td>
                <td>女</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>16</td>
                <td>男</td>
            </tr>
          
        </tbody>
        
        <tfoot>
            <tr>
                <td>统计</td>
                <td>统计</td>
                <td>统计</td>
                <td>统计</td>
            </tr>
        </tfoot>

    </table>    
</body>
</html>

结果：

 （2）表格中的单元格合并

主要的两个属性，rowspan和colspan，一个合并行，一个合并列。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
    <h1>课程表的练习</h1>
    <table border="1px" cellspacing="0" width="1000px">
        <tr>
            <td colspan="2">时间/日期</td>
            
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
        </tr>
        <tr>
            <td rowspan="2">上午</td>
            <td>9：30~10:15</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <tr>
            
            <td>10:25~ 11:10</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <tr height="25px">
            <td colspan="7"></td>
            
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>13:30~14:15</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <tr>
            
            <td>14:25~15:15</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
    </table>

</body>
</html>

结果如下：

 1.9表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。 这些元素也都被称为控件元素。

form是整个表单的父元素，

        action是form标签里的属性，用于书写提交的路径

        method属性是用于书写提交方式，常用的值有get/post

        子元素：

        fieldset: 表单的整个边框，边框上如果想要使用表单标题，可以使用legend元素

        常用子元素：

        label：用于设置文字标签，扩大点击域，for属性用于关联某一个input的id值。使用id值关联

        input：输入框元素，可以根据type属性的不同值来定义不同输入类型，比如：

                type属性：

                    text：文本框，默认值，可以不写

                    password：密码框，特点是使用*或者.来替代真是的密码。

                    radio：单选框,使单选框具有单选效果，要使用相同的name值。checked默认选中

                    checkbox:复选框，name的值必须相同，才能算作一组，checked默认选中

                    file：文件上传

                    hidden：隐藏域。该类型可以用于隐藏一些不需要展示或者修改的信息

                    submit: 提交类型 提交整个表单里输入的所有数据

                    reset：重置表单输入的内容 

                id属性：

                    1.为了关联label标签

                    2.id具有唯一标识的特点，不能重复。

                name属性：用于定义向服务器提交的数据keyvalue对中的key的名字

                value属性：接收用户输入的内容

        select:下拉列表元素

                name属性：用于定义提交到服务器的name的具体值。

                option子元素：用于定义下拉菜单的选项

                option元素里的属性：

                        value属性：用于定义提交到服务器的选项的具体值。

                        selected属性：默认选中

        textarea：文本域。注意与input的type="text"的区别

                        可设置行数与列数

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单form的学习</title>
</head>
<body>
   
    <form action="abc.do" method="">
        <fieldset>
            <legend>表单演示</legend>
            <label for="username">姓名：</label>
            <input type="text" id="username" name="myname">
            <br>
            <label for="mypswd">密码：</label>
            <input type="password" id="mypswd" name="mypswd">
            <hr>
            <label for="">性别</label>
            <input type="radio" name="gender" id="male" value="m" checked   ><label for="male">男 </label>
            <input type="radio" name="gender" id="female" value="f"><label for="female">女</label>
            <hr>
            <label for="">爱好</label>
            <input type="checkbox" id="book" name="hobby" value="book" checked> <label for="book"> 读书</label>
            <input type="checkbox" id="word" name="hobby" value="word"> <label for="word"> 写字</label>  
            <input type="checkbox" id="music" name="hobby" value="music"> <label for="music"> 音乐</label> 
            <input type="checkbox" id="movie" name="hobby" value="movie"> <label for="movie"> 电影</label> 
            <hr>
            <label for="">地址</label>
            <select name="address" id="">
                <option value="cc">长春</option>
                <option value="lc">聊城</option>
                <option value="jn" selected>济南</option>
                <option value="qd">青岛</option>
                <option value="cp">茌平</option>
            </select>

            <hr>
            <label for="range">范围</label>
            0<input type="range" id="range" name="range" value="50">100

            <br>
            <br>
            <hr>
            <br>

            <label for="number">数字</label>
            <input type="number" id="number" name="number" value="4" max="10" min="1" readonly>

            <br>
            <br>
            <hr>
            <br>

            <label>日期时间</label>
            <input type="time" value="12:12">
            <input type="date">
            <input type="datetime-local">
            <input type="week">
            <input type="month">

            <br>
            <br>
            <hr>
            <br>

            <label for="color">颜色</label>
            <input type="color">

            <br>
            <br>
            <hr>
            <br>

            <label for="">文件上传</label>
            <input type="file" name="myfile">
            <hr>
            <label for="id1">文本域</label>
            <textarea name="myself" id="id1" rows="5" cols="50"></textarea>

            
            <hr>
            <label for="">隐藏信息</label>
            <input type="hidden" value="110">
            <hr>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </fieldset>


    </form>



</body>
</html>

结果：

1.10区块（div）

（1）元素分类

大多数 HTML 元素被定义为块级元素或内联元素(行内元素)。

  • 块级元素在浏览器显示时，通常会以新行来开始（和结束）。

    实例: <h1>， <p>， <ul>，<ol>， <table>、<form>

  • 内联元素在显示时通常不会以新行开始。

    实例: <b>, <td>, <a>, <img>等，只要不是独占一行的，都是内联元素

 （2）div元素

  • HTML <div> 元素是块级元素，可以认为他是其他 HTML 元素的容器。

  • <div> 元素没有特定的含义。

  • 它属于块级元素，浏览器会在其前后显示折行。

  • <div> 元素最常见的用途就是页面布局了。它取代了使用表格定义布局的老式方法。

  • <div>元素配合CSS，可以对大的内容块设置样式属性

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #main{
            border: 1px solid red;
            height: 800px;
            background-color: orange;
        }
        #top{
            height: 200px;
            background-color: blue;
        }
        #middle{
            height: 400px;
            background-color: pink;

        }
        #down{
            height: 200px;
            background-color: #03f6e6;
        }
    </style>



</head>

<!-- div: 该元素，是块级元素，通常用于做页面的总体布局，没有其他的特殊含义
            该元素可以作为其他任何元素的容器    

-->


<body>
    <div id="main">  
        <div id="top">
            top
        </div>
        <div id="middle">
            middle
        </div>
        <div id="down">
            down
        </div>
    </div>
</body>
</html>

截图：

（3）span元素

  • HTML <span> 元素是内联元素，可用作文本的容器，也就是用来包裹文字

  • <span>元素也没有特定的含义。

  • 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

 1.11浏览器自动更正

代码例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动更正</title>
</head>
<!-- 浏览器的自动更正功能 -->
 <!-- 
    1.当元素写在了根元素html的外面，会自动纠正到body里
    2.p元素里如果放入了其他的块元素，则会将p元素分解成两个p元素，其他块元素相当于挪出来了。
    3.当根元素HTML出现了出了head和body其他两个以外的子元素，则会自动纠正到body里
-->
<body>
    <p>段落2 
        <h1>标题一</h1>
        你是最棒的 <div>我是div</div>
    </p>
</body>
<p>段落3</p>
</html>
<p>段落</p>

结果截图：

 1.12 html5新标签

（1）audio标签

浏览器：

浏览器MP3WavOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

<audio>的属性如下：

（自动播放好像有些问题）

属性值描述
srcURL规定音频文件的 URL。
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
looploop如果出现该属性，则每当音频结束时重新开始播放。
mutedmuted如果出现该属性，则音频输出为静音。
preloadauto metadata none规定当网页加载时，音频是否默认被加载以及如何被加载。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频标签</title>
</head>
    <!-- 
    音频标签
    audio: 用于加载音频文件，支持的格式mp3，wav，ogg
    属性：
        src：用于书写音频文件的路径
        controls： 提供用户可以操作的控件，比如播放，暂停。
        autoplay：自动播放
        loop；循环播放
    -->
<body>
    <audio src="./resource/audio.mp3" controls autoplay="autoplay"></audio>
     <!-- 考虑到浏览器的兼容性，有些音频不支持
      可以使用source子元素 -->
    <audio controls>
        <source src="./resource/audio.mp3">
        <source src="./resource/audio.ogg">
    </audio>

</body>
</html>

 截图：

（2）video 标签

 <video> 标签定义视频，比如电影片段或其他视频流。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

 浏览器支持情况：

浏览器MP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始YESYES
SafariYESNONO
OperaYES 从 Opera 25 版本开始YESYES
属性值描述
srcURL要播放的视频的URL
autoplayautoplay如果出现该属性，则视频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
heightpixels设置视频播放器的高度。
widthpixels设置视频播放器的宽度。
looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。
mutedmuted如果出现该属性，视频的音频输出为静音。
posterURL规定视频正在下载时显示的图像，直到用户点击播放按钮。
preloadauto metadata none如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
    视频标签video:  html5提供的新元素
    属性:
        src:用于书写视频路径
        controls 提供用户路径
        autoplay：自动播放
        loop：循环播放
        width：宽
        height：高

        注意：宽与高，只设置了其中一个，会等比例缩放。

-->
<body>
    <video src="./resource/shipin.mp4" controls autoplay loop width="400px"></video>
    <!-- 考虑到浏览器兼容问题，有些格式不支持，那就可以使用source子元素，
    让浏览器自上而下寻找可用的视频文件。
    -->
    <video controls>
        <source src="./resource/flower.webm">

        <source src="./resource/shipin.mp4">

    </video>
</body>
</html>

 结果：

（3）内联标签（iframe）

又叫做框架标签（好像是）

<iframe> 标签规定一个内联标签。

一个内联标签被用来在当前 HTML 文档中嵌入另一个文档。

所有主流浏览器都支持 <iframe> 标签。

注意，可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>


<!-- 
    iframe 标签：用于将另外一个网页，嵌入到当前网页中
        属性：frameborder  表示是否显示边框，0表示不显示，1表示显示
        可以使用width和height属性调整窗口的宽与高。

    -->
<body>
    <h1>当前页面</h1>
    <p>你好吗，哈哈哈哈哈哈</p>
    <iframe src="http://www.baidu.com" frameborder="0" width="500px">不支持iframe标签</iframe>

</body>
</html>

结果：

总结，第一天晚上整理到此结束，明天整理css。

zhaogodzero
关注
  • 20
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML笔记自用，欢迎下载
08-15
1. **HTML基本结构**：HTML文档通常由`<!DOCTYPE html>`声明开始，表明文档类型。接着是`<html>`元素，它是整个文档的根元素。在`<html>`内部，有两个主要部分：`<head>`和`<body>`。`<head>`包含元数据，如标题、...
自用密码储存器
09-30
1. **PHP基础**：PHP（Hypertext Preprocessor）是一种广泛使用的开源脚本语言，主要用于Web开发，可以嵌入到HTML中使用。PHP的基础包括变量、数据类型、控制结构（如if-else、switch、for、while）、函数、数组、...
HTML初学笔记--自用
weixin_45803628的博客
05-24 102
小白的HTML的学习笔记，学习视频看的是B站的尚硅谷的教学视频 网页的结构（W3C标准下） 结构，HTML，用于描述页面的结构（难度一颗星） 表现，CSS，用于控制页面中元素的样式（难度两颗星星） 行为，JavaScript，用于响应用户操作（难度四颗星） HTML 超文本标记语言，Hypertext Markup Language 负责网页的三个要素中的结构 使用标签的形式来表示网页中的不同组成部分，超文本是超链接，使用超链接可以从一个页面跳到另一个页面。 ...
1.HTML_w3初学笔记汇总（自用）
qq_42636335的博客
10-08 553
HTML简介 什么是HTML：是用来描述网页的一种语言 HTML（Hyper Text Markup Language）：超本文标记语言 HTML不是编程语言是标记语言 标记语言是一套标记标签 HTML使用标记标签来描述网页 HTML标签：尖括号、通常成对出现（开始标签、结束标签） HTML文档 =网页：HTML文档描述网页、包含HTML标签和纯文本 HTML编辑器 ...
js初学自用知识点
qq_48321086的博客
04-10 1571
自己自学时做的一些知识点
HTML初学者笔记001
qq_44733512的博客
01-03 71
千锋前端b站课程自用笔记，详细
C++模板初学（笔记自用
A7639189的博客
08-25 66
模板的概念：建立通用的模具，提高复用性,模板的通用并不是万能的，只是一个框架，（另一种编程思想就是面向对象）C++的泛型编程思想主要用到的就是模板函数模板的作用：建立一个通用函数，其函数返回值类型和形参类型可以不具体定制，用一个虚拟的类型代表语法如下；template是声明创建模板typename表示其后面跟着的符号是一种数据类型，可以用class代替T表示通用的的数据类型，名称可以替换，通常为大写字母有两种方式使用函数模板第一种：自动类型推导第二种：显示指定类型int。
前端~初学自用~事件
10-23 206
事件：当发生某一个动作的时候，会触发一个函数 客户端JavaScript程序采用了一部时间呢驱动编程模型。当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时，web浏览器就会产生事件（event）。如加载完文档，用户操作鼠标或键盘等。 事件是web浏览器通知应用程序发生了什么而事件并非javaScript对象，不会出现在程序源代码中。 事件处理程序（event handler）或事件
R语言爬虫实例 初学者自用
Evelyyyyyyyyyn_的博客
11-17 4406
本文记录了使用rvest & RSelenium 包进行爬虫与网页渲染的相关知识点及本人的编程操作过程。涉及到基本爬取操作、爬取缺失部分如何处理、操作网页过滤等步骤。
前端~初学自用~ajax
11-07 181
表单提交action 表单提交 method 提交方法1、get提交的数据通过四芝兰发送，数据添加到地址栏的问号后面 数据形式：数据名=数据值&数据名=数据值2、post提交的数据通过请求头发送（头补信息，能通过控制台可以看到） post发送请求的时候一定要在发送前设置一下请求头 ajax.setRequestHeader(‘Content-Type’,’application/x-www-
Linux安装配置CentOS系统初学者自用
qq_40641932的博客
09-09 199
文章目录前言CentOS安装与配置1.CentOS安装与配置参考资料2.CentOS安装与配置的Linux基本操作命令总结 前言 本萌新初步学习了linux系统，留下学习的痕迹，为了以后能够迅速回忆起相关操作 提示：以下是本萌新使用的参考材料，并不是对所有人都适用，但能解决一大半问题。 CentOS安装与配置 1.CentOS安装与配置参考资料 以下材料仅供参考，不能作为标准，操作还需根据实际情况而定： 磁盘分区、格式化、挂载 链接: https://blog.51cto.com/12173069/206
自用联系模板
06-23
1. `index.html`：这是网站的主页文件，通常包含HTML代码，定义了网页的基本结构和内容，包括头部、主体和底部等部分。在联系模板中，它可能包含了联系表单的HTML元素，如输入框、按钮和表单提交处理的脚本引用。 2...
自用网页代码。
06-23
1. **HTML**：`index.html`是网页的主入口文件，通常包含HTML标记语言，定义了网页的基本结构和内容。HTML（HyperText Markup Language）是构建网页的基础，包括头部（head）、主体（body）等部分，通过使用各种标签...
WP的自用模版
06-20
1. **style.css**：这是CSS（层叠样式表）文件，用于定义网站的外观和布局。包括颜色、字体、间距、背景等样式规则，决定了网页的整体视觉效果。 2. **sub.html**：可能是一个子页面或者部分页面的HTML代码，用于...
html 关闭信息窗口
cuisidong1997的博客
07-14 214
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
HTML 学习指南：从入门到精通
英英的博客
07-09 467
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
CH15-DOM元素属性
IT技术类博客
07-13 1000
DOM 元素
什么是HTML？
最新发布
m0_65696193的博客
07-15 473
Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。Presto（已经废弃） 是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。- 行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript js。- 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。- 重要的原则：页面三层分离(HTML,css，js书写的时候分开来写)。
html初学者网页设计
05-27
作为一个初学者，您可以遵循以下建议，来学习和设计html网页： 1. 学习html的基本语法和标签：学习html标签是网页设计的基础。您可以通过在网上寻找教程或者参考书籍来学习html的基础语法和标签。您需要学会使用常见的标签，如标题、段落、链接、图像、表格和表单等。 2. 编写简单的html网页：在学习了基础的html标签之后，您可以开始编写简单的网页来巩固所学的知识。您可以使用文本编辑器编写html代码，将其保存为.html格式的文件，然后在浏览器中打开查看效果。 3. 学习css样式：学习css样式可以为您的网页添加各种样式和效果，让网页更加丰富和吸引人。您可以使用css样式来控制字体、颜色、背景、布局和动画等方面。 4. 参考其他网页设计：在学习和设计网页的过程中，您可以参考其他的网页设计，了解其他设计师是如何处理布局、色彩、内容和交互等方面的。这可以帮助您获得灵感并提升设计技能。 5. 练习和分享：不断地练习和分享您的作品，可以帮助您巩固所学的知识并获得反馈。通过分享您的作品，您可以与其他网页设计师交流，从中学习更多的技能和知识。 希望这些建议对您有所帮助！祝您学习愉快并设计出精美的网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值