html详细笔记及练习的几个例子

最新推荐文章于 2024-06-12 10:36:38 发布

未可知。

最新推荐文章于 2024-06-12 10:36:38 发布

阅读量281

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_52099241/article/details/125750894

版权

这篇博客详细记录了HTML的学习笔记，并通过实际例子展示了如何使用HTML代码模拟百度验证码表单。作者分享了自己的理解和注解，提醒读者在查看代码时注意图片和链接的路径调整。

摘要由CSDN通过智能技术生成

html详细笔记及练习的几个例子

基本是一边是代码一边把html用我自己的理解解释了一下，如有不对请指正

大家复制到自己的编译软件里打开看更方便，有的图片和链接的路径需要用自己的

在代码段的中后部用纯html代码粗略模拟了一个百度的验证码表单，写着练手的

<!DOCTYPE html>
<!-- 警示信息，注意的意思，<!DOCTYPE html>是说document type文档的类型是html   -->
<!--html超文本标记语言-->
<!--    单标签meta，  -->
<!--  <xxx>双标签的起始标签  </xxx>双标签中的结束标签  -->
<!--<html lang="en">是整个网页的根标签，这个lang=en的意思是当前语言为英文 -->
<html lang="en">

<head>
    <!--head是头部标签，-->
    <meta charset="UTF-8">
    <!--设置字符编码，utf-8是文档编码的类型的一种，一般都是utf-8-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document网页的标题</title>
    <!--title网页的标题-->
</head>

<body>
    <!--身体，可视区域，打大部分代码的地方-->

    <!--h1-h6是标题标签，1到6不同大小，效果是让被hn包裹的文字放大加粗-->
    <h1>h1在此1</h1>
    <H2>h2在此22</H2>
    <H3>h3在此333</H3>

    <P>自然段换行效果</P>

    <P>p用来标识段落，
        里面不识别换行空格，多个空格默认只识别成一个<br> 但可以用br标签换行 </P>

    <hr color="red" size="40">
    <!-- hr是一条分割线 此处为了方便展示写入了属性 颜色和尺寸 -->

    <!--标签的属性是书写在起始标签内部的,标签的属性如果有多个，属性中间需要有空格-->
    <!--web标准，要求html，css，js自己干自己的事，html只负责搭建骨架，css只负责页面的美化，js负责用户的交互-->

    <!--div可称为盒子，整个界面可以放无数个div，但默认每行只能存在一个div（大盒子），
    其他元素会另起一行显示，div是一个块级元素，他可以嵌套,默认和浏览器一起变化大小-->
    <p>
    <div>
        盒子1
        <div>
            盒子1里的盒子2
        </div>
    </div>

    外面的<div>盒子3</div>
    </p>
    <p>
        <!--span默认和文字内容一样大，在一行内显示（span是行内元素），也可以嵌套，
            （不推荐嵌套块级元素）-->
        <span>
            span1
        </span>

        <span>
            span2<br>
            <span>
                span2里的 span3 多个空格默认只识别成一个
            </span>
        </span>

    </p>
    <p>
        <!--格式化标签，可以让文本有一些特殊的格式，如b加粗，i斜体，s删除线，u下划线-->

        <!--上面的bisu尽量少用，strong加粗，em倾斜，del删除线，ins下划线，
            这四个是常用的语义化词，可以方便代码阅读，推荐使用-->

        <b>jojo今天不做人啦！！！</b>
        <br>
        <i>jojo今天不做人啦！！！</i>
        <br>
        <s>jojo今天不做人啦！！！</s>
        <br>
        <u>jojo今天不做人啦！！！</u>
        <br>
    </p>
    <p>
        <!-- 在此是碰到了一些问题，在网络查到了问题解决办法
        但一般来说绝对路径用的地方很少，这个问题推荐有了其他部分的学习再回来看 -->

        <!-- CSDN博主「silence_xj」给出了问题的答案 
        原文链接：https://blog.csdn.net/silence_xj/article/details/115713725 -->

        <!-- 绝对路径：是指目录下的绝对位置，直接到达的目标位置，通常是从盘符开始的路径。
如果使用这个绝对路径时，发现谷歌浏览器或其他的浏览器都不能加载图片（图片在路径中是真实存在的），
而在使用相对路径时，图片可以正常的加载出来，
并且从计算机你放的盘，进入这个绝对路径打开html文件时，图片可以正常加载

在webstorm中，它帮你虚拟了一个服务器（可以认为在此虚拟服务器外的文件相当于在另一个电脑里），
因此你点击webstorm右上角的浏览器图标打开网页时，网页路径是localhost:****而你的图片也显示不出来；
你可以摁住Shift再点击右上浏览器图标使用本地打开的方式，
此时打开的网页路径是file:///****，这时候你的图片应该就能显示出来了。-->

        <!--img是图像标签,src是一个属性，代表图片的路径，路径有两种，分为绝对路径和相对路径，
            alt属性是图片不能显示的时候，替换成的一个文本，如该图无法显示-->
        <!--相对路径还有./和../代表上个层级和上上个层级-->
        <img src="F:/webstudy/buka/html学习/百度表单效果/logo_baidu.jpg" alt="图片走丢了">
        <!--上面为绝对路径，电脑里的精准位置-->
        <br>
        <img src="temp_20211104021423648.ico" alt="该图无法显示">
        <!--上面为相对路径，基于自身位置，在同一层内，基本就是同一文件夹里的意思-->
        <br>
        <img src="./temp_20211104021423648.ico" alt="这图没了">
        <br>
        <img src="./错误路径.ico" alt="这图没了">
        <br>
        <!--title属性是鼠标放上去显示的信息-->
        <img src="temp_20211104021423648.ico" alt="该图无法显示" title="bilibili">
        <br>
        <!--width是宽像素值，height是高像素值，单位是px   -->
        <img src="temp_20211104021423648.ico" alt="该图无法显示" width="100" height="200">

    </p>
    <p>
        <!--超链接：访问另外一个地址   a是双标签 href是地址， -->
        <a href="https://www.baidu.com/">去百度</a>
        <br>
        <!--打开一个新界面，target标签=blank时-->