# HTML学习笔记

最新推荐文章于 2023-02-04 20:54:59 发布

平凡无奇编码小菜鸡

最新推荐文章于 2023-02-04 20:54:59 发布

阅读量84

点赞数

分类专栏：前端知识

本文链接：https://blog.csdn.net/qq_42208746/article/details/114750472

版权

前端知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML学习

学习的过程必备：笔记本记笔记+电脑写代码+参考书/参考网站
笔记就不放上来啦！

编辑器

VS Code
Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

步骤 1: 新建 HTML 文件
在 VS Code 安装完成后，选择" 文件(F)->新建文件(N) “，在新建的文件中输入代码
步骤 2: 另存为 HTML 文件
然后选择” 文件(F)->另存为(A) "，文件名为test.html
步骤 3: 在浏览器中运行这个 HTML 文件
然后鼠标右击编辑器上的文件名，选择在默认浏览器打开（也可以其他的浏览器）
就能在浏览器中显示界面

基本标签

head标签内有title \meta \style \link \base \script。
body标签内有h1~h6（标题） \ p（段落）\ br（换行）\ a（超链接）\ img（图片）
div 用来划分一个区域

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>                <!--重要！！！防止页面出现乱码-->
    <title>学习的过程</title>               <!--网站标题-->
</head>
<body>
    <h2>春晓</h2>                           <!--页面二级标题-->
    <p>春眠不觉晓，<br>处处闻啼鸟，<br>夜来风雨声，<br>花落知多少。</p>
</body>
</html>

在这里插入图片描述

列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>                <!--防止页面出现乱码-->
    <title>学习的过程</title>               <!--网站标题-->
</head>
<body>
    <h1>问卷调查</h1>   
    <ol>                                   <!--有序列表-->
        <li>你通过什么途径学习</li>
        <ol type="A">
            <li>百度搜索</li>
            <li>谷歌搜索</li>
            <li>其他</li>
        </ol>
        <li>你觉得网页设计怎么样</li>
        <ol type="A">
            <li>酷炫大方</li>
            <li>简单</li>
            <li>粗糙</li>
        </ol>
        <li>你觉得这本书如何</li>
        <ul type="disc">                   <!--无序列表-->
            <li>通俗易懂</li>
            <li>内容丰富</li>
            <li>一般般</li>
        </ul>
    </ol>                       
</body>
</html>

在这里插入图片描述

表格

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>                <!--重要！！！防止页面出现乱码-->
        <title>学习的过程</title>               <!--网站标题-->
        <style type="text/css">
        table,tr,td{border: 1px solid silver;}
        </style>
    </head>
    <body>
        <table>
            <caption>学生成绩表</caption>         <!--表格标题-->
            <thead>                              <!--表头-->
                <tr>                             <!--行-->
                    <th>姓名</th>                <!--表头单元格-->
                    <th>性别</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>                              <!--表身-->
                <tr>
                    <td>张三</td>                <!--单元格-->
                    <td>男</td>
                    <td>250</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>男</td>
                    <td>520</td>
                </tr>
            </tbody>
            <tfoot>                              <!--表尾-->
                <tr>
                    <td>平均分</td>
                    <td colspan="2">385</td>     <!--合并列-->
                </tr>
            </tfoot>
        </table>
    </body>
    </html>

在这里插入图片描述

图片相对路径的确定

在这里插入图片描述
对于0313.html来说，一张图是在同一目录下；另一张是在同级目录img的下一级中。
第一种相对路径：<img src="1.jpg" />
第二种相对路径：<img src="img/1.jpg" />
那么对于0303_1.html来说，一张图位于上级目录；一张位于上级目录中的img文件夹中。
第一种相对路径： <img src="../1.jpg" />
第二种相对路径：<img src="../img/1.jpg" />
对于图片和文件建议使用英文，因为很多服务器是英文操作系统。

超链接

点击图片或文字跳转到新的页面

    <body>
       <a href="test/0313_1.html"><img src="1.jpg"/></a><br/>
       <a href="test/0313_1.html">点击跳转</a>
    </body>

表单

允许用户在表单中输入内容，比如文本域、下拉列表、单选框、复选框、按钮…

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>                <!--重要！！！防止页面出现乱码-->
        <title>学习的过程</title>               <!--网站标题-->
    </head>
    <body>
      <form>
          昵称：<input type="text"/><br/>
          密码：<input type="text"/><br/>
          邮箱：<input type="text"/>
          <select>
              <option>qq.com</option>
              <option>163.com</option>
          </select><br/>
          性别：男<input type="radio" name="gender" value="男"/>
                女<input type="radio" name="gender" value="女"/><br/>
          爱好：旅游<input type="checkbox" name="hobby" value="旅游"/>
               听歌<input type="checkbox" name="hobby" value="旅游"/>
               摄影<input type="checkbox" name="hobby" value="旅游"/>
               运动<input type="checkbox" name="hobby" value="旅游"/><br/>
          个人简介：<br/>
          <textarea rows="5" cols="20"></textarea><br/>
          上传个人照片：<br/>
          <input type="file"/><br/>
          <input type="submit" value="提交按钮"/>   
      </form>
    </body>
</html>

在这里插入图片描述

表单

iframe,在当前网页嵌入另一个网页。

平凡无奇编码小菜鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
# HTML学习笔记

HTML学习学习的过程必备：笔记本记笔记+电脑写代码+参考书/参考网站笔记就不放上来啦！编辑器VS CodeVisual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。步骤 1: 新建 HTML 文件在 VS Code 安装完成后，选择" 文件(F)->新建文件(N) “，在新建的文件中输入代码步骤 2: 另存为 HTML 文件然后选择”
复制链接

扫一扫