HTML基础

最新推荐文章于 2024-08-15 11:09:11 发布

Roylelele

最新推荐文章于 2024-08-15 11:09:11 发布

阅读量148

点赞数

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

本文链接：https://blog.csdn.net/weixin_67793092/article/details/132917139

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML描述网页骨架，是一个标签化的语言。

一.安装和使用VSCode

安装

安装使用VSCode编写代码，搜索安装：

下载完成：

使用

1.直接选择文件夹打开

2.创建代码文件

右键创建文件

3.编辑代码

写完代码后记得ctrl+s保存

系统设置自动保存

运行

运行代码用浏览器运行

双击这个html就可以运行

二.HTML结构

1.html代码通过标签来组织，形如<html></html>用尖括号组织的，成对出现的东西就是标签。

2.一个标签是成对出现的，<html>开始标签 </html>结束标签

3.标签是可以嵌套的

4.可以在开始标签中，给标签赋予属性，属性相当于是键值对，可以有一个或多个

HTML常见标签

<html>:文件最顶层的标签，树根节点。

<head>:存放了这个页面的一些属性。

<body>：存放了这个页面包含哪些内容。

输入hello world还有更快的方法：输入英文！，按下tab,此时就能生成一个基本的页面。只需要去编辑body的内容即可。

注释标签

注释的内容不会在页面上显示，但是右键查看网页源代码可以看见注释。

在VSCode中注释的快捷键：ctrl+/

想要取消再次按一次ctrl+/

标题标签

html里面标签是否换行，和代码的编写无关，而是和标签自身有关（有的标签独自占一行，有的标签不独占）

在html源代码中写的换行会被忽略，写的多个空格会被视为是一个。

段落标签：<p>

每个段落之间，不光是要换行，同时还有一个明显的段落间距。（可以通过css调整段落间距）

换行标签：<br>

格式化标签

变粗：<strong>、< b>

倾斜:<em>、<i>

删除线:<del>、<s>

下划线：<ins>、<u>

图片标签：<img>

网页上是可以显示图片的。

img有一个核心的属性，src（必填项），src描述了该图片的路径（路径可以是一个本地的绝对路径，也可以是一个相对路径，还可以是网路路径）

绝对路径：

相对路径：

直接复制文件地址：

<img>的其他属性

alt属性

在图片挂了的时候，就会显示alt对应的文本

title属性

鼠标悬停在图片上，会给出一个提示。

width/height属性

描述图的属性

高度和宽度可以同时设置，也可以只设置一个。如果只设置一个，另一个会等比例缩放。

单位:px（像素）

超链接标签：<a>

“链接”link (快捷方式）

“超”链接跳转到的页面，可以是在当前网站之外的。

还有一个属性target，一般写作target="_blank",就可以打开一个新的标签业。（而不会替换原有页面）

表格标签

<table>表示整个表格

<tr>表示一行

<td>表示一个单元格

<th>表示表头的一个单元格

<!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>
   <body>
     <table>
        <tr>
             <th>姓名</th>
             <th>电话</th>
        </tr>

        <tr>
            <td>小明</td>
            <td>123</td>
        </tr>

        <tr>
            <td>小红</td>
            <td>234</td>
        </tr>

        <tr>
            <td>小强</td>
            <td>456</td>
        </tr>
     </table>
   </body>
</html>

让上面的数据更像一个表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            text-align: center;
        }
    </style>
</head>
   <body>
     <table width="500px" height="300px" border="1px" cellspacing="0">
        <tr>
             <th>姓名</th>
             <th>电话</th>
        </tr>

        <tr>
            <td>小明</td>
            <td>123</td>
        </tr>

        <tr>
            <td>小红</td>
            <td>234</td>
        </tr>

        <tr>
            <td>小强</td>
            <td>456</td>
        </tr>
     </table>
   </body>
</html>

列表标签

有序列表：<ol> //ordered list

无序列表：<ul> // unordered list

列表项：<li> //list item

input标签

单行文本框

text和password

单选框

radio属性

选择框标签，一般需要与name属性一起使用

checked属性

会使打开页面后，默认选择当前选项，但可以修改选项。

复选框

可以选择多个，属性checkbox，也可以使用checked属性默认选中

按钮

button

对于按钮点击之后要干什么，需要通过js来配合。

文件选择框

file

select标签

textarea多行编辑框

上述这些标签，也可以称为是“控件”，是构成一个图形化界面的基本要素。

无语义标签

没有特定含义，可以使用在各种场景中。

div默认独占一行，span默认不独占一行。

div标签 span标签

HTML的相关文档：mdn文档

三.展示案例

展示个人简历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
</head>
<body>
    <h1>Roylele的简历</h1>
    <h2>基本信息</h2>
    <img src="lefu.png" alt="" height="200px">
    <p>求职意向：软件开发工程师</p>
    <p>联系方式：111</p>
    <p>邮箱：123456@qq.com</p>
    <p>
        <a href="https://www.csdn.com">我的博客</a>
    </p>
    <p>
        <a href="https://github.com">我的github</a>
    </p>

    <h2>教育背景</h2>
    <ol>
        <li>1990-1996 小太阳小学</li>
        <li>1997-2000 小太阳中学</li>
        <li>2001-2004 小太阳高中</li>
        <li>2005-2008 小太阳大学</li>
    </ol>

    <h2>专业技能</h2>
    <ul>
        <li>熟练掌握Java的基本语法，熟悉面向对象程序思想</li>
        <li>熟悉常用的数据结构和算法，比如顺序表、链表、二叉树、堆、哈希表等</li>
        <li>熟悉操作系统中的典型概念，熟练掌握并发编程，对于多线程安全、加锁等操作具有深刻的认识</li>
        <li>熟练掌握网路编程，熟悉网路原理，熟悉TCP/IP协议栈中的典型工作机制</li>
        <li>熟练掌握SQL，能够进行增删改查，熟悉SQL的索引和事物等机制</li>
    </ul>

    <h2>我的项目</h2>
    <ol>
        <li>
            <h3>留言墙</h3>
            <p>开发时间：2008-2011</p>
            <div>功能介绍</div>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
        </li>

        <li>
            <h3>学习小助手</h3>
            <p>开发时间：2011-2012</p>
            <div>功能介绍</div>
            <ul>
                <li>支持题目的回顾</li>
                <li>支持错题功能</li>
            </ul>
        </li>
    </ol>

    <h2>个人评价</h2>
    在校期间，多次获得奖学金，学习成绩优良。
</body>
</html>

成果展示：