从前端开始——01网页三剑客（html）

原创已于 2022-09-12 00:04:02 修改 · 980 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

于 2022-09-10 01:54:24 首次发布

前端学习专栏收录该内容

1 篇文章

订阅专栏

01小白学习步骤（参考该博主的博客）
学习路线：HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax（axios）→ASP.NET进阶（或PHP进阶）。
在这里插入图片描述
01段落与文字
02列表
03表格
04图像
05链接
06表单
07多媒体
08浮动框架iframe
09网页基本知识

01段落与文字

在这里插入图片描述
代码如下：

<html>
    <head>
        <title>平陈与宋</title>
    </head>
    <body>
        <div>
            <!-- h:标题，单独成行，数字表示字体大小 -->
            <h2>各科小常识</h2>
            <!-- br(break row):换行，自闭合标签，不需要</br> -->
            <!-- hr(horizontal row):水平线，自闭合标签，不需要</hr> -->
            <br><hr>
        </div>
        <div>
            <h2>语文</h2>
            <!-- p:段落 -->
            <p>《三国演义》中国古典四大名著之一。元末明初小说家罗贯中所著，是中国第一部长篇章回体历史演义小说。描写了从东汉末年到西晋初年之间的近100年的历史风云。</p>
            <br><hr>
        </div>
        <div>
            <h2>数学</h2>
            <!-- sup:上标，上标内容放入<sup></sup>中间 -->
            <p>勾股定理直角三角形:a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>.</p>
            <br><hr>
        </div>
        <div>
            <h2>英语</h2>
            <!-- cite:引用，引用内容放入其中 -->
            <cite>No pains, no gains.</cite>
            <br><hr>
        </div>
        <div>
            <h2>化学</h2>
            <!-- sub:下标，下标内容放入其中 -->
            <p>H<sub>2</sub>SO<sub>4</sub>是一种重要的工业原料，可用于制作肥料、洗涤剂等。</p>
            <br><hr>
        </div>
        <div>
            <h2>经济</h2>
            <p>版权符号：*<br>
            注册商标：&
            </p>
        </div>
    </body>
</html>

02列表

在这里插入图片描述代码如下：

<html>
    <head>
        <title>平陈与宋</title>
    </head>
    <body>
        <div>
            <h2>XX学习网问卷调查</h2>
            <div>
                <h5>你通过什么途径来到XX学习网？</h5>
                <!-- 有序列表 -->
                <ol>
                    <li>百度搜索</li>
                    <li>360搜索</li>
                    <li>其他</li>
                </ol>
            </div>
            <div>
                <h5>你觉得XX学习网页面设计如何？</h5>
                <ol>
                    <li>美观</li>
                    <li>粗糙</li>
                    <li>还行</li>
                </ol>
            </div>
            <div>
                <h5>XX学习网的“HTML入门”如何？（多选）</h5>
                <!-- 无序列表 -->
                <ul>
                    <li>浅显易懂，重点突出</li>
                    <li type="circle">内容丰富，技巧很多</li>
                    <li type="square">一句话，非常喜欢</li>
                </ul>
            </div>
            <div>
                <!-- dl(definition list):定义列表 -->
                <!-- dt(definition term):定义名词 -->
                <!-- dd(definition description):定义描述 -->
                <dl>
                    <dt>你觉得此次学习效果如何？</dt>
                    <dd>还可以（不违心）</dd>
                    <dd>很开心（还可以吧）</dd>
                    <dd>非常开心（我开个玩笑）</dd>
                </dl>
            </div>
        </div>
    </body>
</html>

03表格

在这里插入图片描述
代码如下：

<html>
    <head>
        <title>平陈与宋</title>
    </head>
    <body>
        <table>
            <!-- caption:表格标题（一般都是自动居中） -->
            <caption>个人爱好</caption>
            <!-- tr(table row):表格行 -->
            <!-- th(table header):表头单元格 -->
            <!-- td(table data cell):表格单元格 -->
            <tr>
                <th>会有哪些人呢？</th>
            </tr>
            <tr>
                <td>姓名：</td>
                <td>平陈与宋</td>
            </tr>
            <!-- rowspan:合并行 -->
            <!-- colspan:合并列 -->
            <tr>
                <td rowspan="3">爱吃的水果：</td>
                <td>苹果</td>
            </tr>
            <tr>
                <td>香蕉</td>
                <td>黄色的水果啦</td>
            </tr>
            <tr>
                <td colspan="2">橘子</td>
            </tr>
        </table>
        <!-- border:表格边框 -->
        <table border>
            <caption>个人爱好</caption>
            <tr>
                <th>会有哪些人呢？</th>
            </tr>
            <tr>
                <td>姓名：</td>
                <td>平陈与宋</td>
            </tr>
            <tr>
                <td rowspan="3">爱吃的水果：</td>
                <td>苹果</td>
            </tr>
            <tr>
                <td>香蕉</td>
                <td>黄色的水果啦</td>
            </tr>
            <tr>
                <td colspan="2">橘子</td>
            </tr>
        </table>
    </body>
</html>

04图像

绝对路径、相对路径辨析（参考该解释）
更推荐使用“相对路径”，即相对本文件的路径。
在这里插入图片描述

代码如下：

<html>
    <head>
        <title>平陈与宋</title>
    </head>
    <body>
        <!-- img:图像标签，自闭合标签 -->
        <!-- src:插入图片的地址，推荐使用相对路径 -->
        <!-- title:鼠标放在图片上，会显示的提示信息 -->
        <!-- alt:图片显示不出来时的提示信息 -->
        <h1>大家请看这个图片:</h1>
        <img src="01.png" alt="图片是不是忘了填到该路径下？？？" title="这就是CSS的作用！">
    </body>
</html>

请注意：alt属性是img标签必需属性，一定要添加；title属性是img标签可选属性，可加可不加。建议大家在实际开发中，对于img标签，要记得在alt属性中添加必要的描述信息。
在HTML 5中，引入了 figure和figcaption两个元素来增强图片的语义化。figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使得页面的语义更加良好。

05链接

（1）外部链接；
（2）内部链接：①内部页面链接；②锚点链接。
锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。（这个内部链接，锚点链接，我也不太懂，亲们有知道的可以告诉我进行修正）
在这里插入图片描述
代码如下：

<html>
    <head xmlns="http://www.w3.org/1999/xhtml">
        <title>平陈与宋</title>
    </head>
    <body>
        <div>
            <!-- 锚点链接（内部页面链接）：就是点击某一个超链接，它就会跳到当前页面的某一部分（我也不太懂啥意思） -->
            <a href="#music">推荐音乐</a><br>
            <a href="#movie">推荐电影</a><br>
        </div>
        <div>
            <a href="http://www.baidu.com" target="_blank">我想去百度网站</a><br>
            <a href="https://www.patest.cn/" target="_self">我想去PAT官网</a><br>
        </div>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        <div id="music">
            <h3>推荐音乐</h3>
            <ol>
                <li>林俊杰-爱不会绝迹</li>
                <li>郁可唯-水中花</li>
                <li>毛华锋-奇迹再现</li>
                <li>南征北战NZBZ-骄傲的少年</li>
            </ol>
        </div>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        <div id="movie">
            <h3>推荐电影</h3>
            <ul>
                <li>独行月球</li>
                <li>送你一朵小红花</li>
                <li>哈尔的移动城堡</li>
            </ul>
        </div>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
        ………………</br>
    </body>
</html>

06表单

表单标签共有4个：input、textarea、select和option。
其中select和option是配合使用的。
（1）input：大部分表单都是用这个标签完成的；
（2）textarea：多行文本框，可控制输入文本内容的行和列的数目；
（3）select和option：下拉列表。
同时，可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。
在这里插入图片描述
代码如下：

<html>
    <head>
        <title>平陈与宋</title>
    </head>
    <body>
        <form>
            <div>
                <!-- [input] type="text":单行输入框 
                                size:输入框的长度
                                maxlength:输入内容最大长度
                -->
                昵称：
                <input type="text" size="20" maxlength="5">
            </div><br>
            <div>
                <!-- [input] type="password":密码输入框 -->
                密码：
                <input type="password">
            </div><br>  
            <div>
                <!-- select/option:下拉框 -->
                邮箱：
                <input type="text" size="20" maxlent="20">
                <select>
                    <option value="1">@qq.com</option>
                    <option value="2">@163.com</option>
                    <option value="3">@126.com</option>
                    <option value="4">@outlook.com</option>
                    <option value="5">@gmail.com</option>
                    <option value="6">其他</option>
                </select>
            </div><br>
            <div>
                <form method="get">
                    性别：
                    <!-- [input] radio：单选框
                    实现需要外层定义form,并且form中定义methon="get"
                        里层input需要定义同名的name
                    -->
                    <input name="sex" type="radio">男
                    <input name="sex" type="radio">女
                </form>
            </div><br>
            <div>
                <!-- [input] checkbox:多选框 -->
                兴趣：
                <input type="checkbox">旅行
                <input type="checkbox">摄影
                <input type="checkbox">运动
                <input type="checkbox">看电影
                <input type="checkbox">其他
            </div><br>
            <div>
                <!-- textarea:多行文本框 -->
                个人介绍<br>
                <textarea rows="5" cols="20"></textarea>
            </div><br>
            <div>
                <!-- [input] image:图像形式的提交按钮
                            background属性设置图片
                 -->
                上传个人照片：
                <input type="image" style="background:url('01.png')">
            </div><br>
            <div>
                <!-- [input] file:文件上传 -->
                上传个人简历：
                <input type="file">
            </div><br>
            <div>
                <!-- [input] reset:重置按钮不起作用？？？？ -->
                <input type="button" value="注册">
                <form>
                    <input type="reset" value="重置">
                </form>
            </div>
        </form>
    </body>
</html>

07多媒体

embed:在网页中插入音频、视频和flash;
bgsound:为某个网页设置背景音乐,不过bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。
代码如下：

<html>
    <head>
        <title>平陈与宋</title>
    </head>
    <body>
        <h1>暂时没有找到代码，可能后续更新！！！</h1>
    </body>
</html>

08浮动框架iframe

iframe：在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。iframe框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置。

<html>
    <head>
        <title>平陈与宋</title>
    </head>
    <body>
        <div>
            <!-- iframe:浮动框架标签
            src:浮动框架源文件（必须属性）
             -->
            <h1>XX学习网</h1>
            <iframe src="2_list.html" width="400px" height="300px"></iframe>
        </div>
    </body>
</html>

09网页基本知识

（1）HTML、XHTML和HTML5的区分

（1）HTML,全称HyperText Mark-up Language (超文本标记语言)，指的是HTML 4.01，是构成网页文档的主要语言。
（2）XHTML,全称 Extensible HyperText Mark-up Language (扩展的超文本标记语言)，XHTML是HTML的过渡版本，XHTML是XML风格的HTML 4.01，XHTML相对于HTML来说，在语法上更加严格。
（3）HTML和XHTML的区别：

在XHTML中，所有标签必须闭合，
在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大写。不过标签的属性值可以大写。
在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。
在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。

（4）HTML 5,指的是下一代的HTML,也就是HTML 4.01的升级版。HTML 5 除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket.本地存储等。这些新增的技术都是使用JavaScript来操作。

（2）div、span、id、class、br、strong、em、del、ins、img

div和span标签区别如下：
div和span没有任何语义,正是因为没有语义，这两个标签一般都是配合CSS来定义元素样式的。div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。div常用于页面中较大块的结构划分，然后配合CSS来操作；span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS 操作。除了 div和span外，还有一个label标签。div和span是无语义标签，但label 是有语义标签。label 只适用于表单中，用于显示在输入控件旁边的说明性文字。

id和class标签区别如下：
对于页面关键结构，建议使用id；对于小地方，建议使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作，也建议加上id.以便搜索引擎识别页面结构。

br标签:
W3C标准规定，＜br/＞标签仅仅用于段落中的换行，不能用于其他情况。也就是说，＜br/＞标签只适合用于p标签内部的换行，不能用于其他标签。

strong和em标签:
strong用于实现加粗文本，em用于实现斜体文本。W3C对这两个标签赋予“强调”的语义，在strong或者em标签内部的文本被强调为重要文本。并且搜索引擎对这两个标签也赋予一定的权重。

del和ins标签：
在HTML中，del和ins这两个标签是配合使用的。del表示“delete”，用于定义被删除的文本。ins表示“insert”，用于定义被更新的文本。一般情况下，我们会使用CSS来重新定义del和ins标签的样式。

img标签：
想要在页面显示一张图片，我们有两种方式：一是使用img标签；二是使用背景图片。这两种实现方式最明显的区别在于：使用img标签添加图片，是通过HTML来实现；使用背景图片，是通过CSS来实现。我们应该根据HTML的语义来判断。如果图片作为HTML的一部分，并且想要被捜索引擎识别，则应该使用img标签，例如常见的各种图片列表。如果图片仅仅是起到修饰作用，并且不想被搜索引擎识别，则应该使用背景图片。
这个图片从某个博客里面摘取的
这个是从这个博客里面截取的：地址

（3）浏览器标题栏小图标

<link rel="shortcut icon" type="image/x-icon" href="favicon.icon"/>

rel和type这两个属性的取值是固定形式，无需多讲。href属性取值为小图标的地址, 这个地址是根据小图标在站点文件夹路径而定的，跟图片引用路径是一样的道理。这里注意一下，小图标格式是.ico

（4）HTML5新增语义化标签
（不懂啥是语义化的直接可以理解为新增的标签）
header — 头部标签

nav — 导航标签

article — 内容标签

section — 块级标签

aside — 侧边栏标签

footer — 尾部标签
在这里插入图片描述
（这图也是偷得，自己懒得画，暂时也画不这么好看）

（5）HTML的语义化知识点
具体内容查看该博主博客