web前端--HTML入门学习（一）（代码及运行）

最新推荐文章于 2024-03-31 20:00:32 发布

前端小窝

最新推荐文章于 2024-03-31 20:00:32 发布

阅读量402

点赞数

分类专栏： # HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44105459/article/details/100705861

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML入门学习

前言

推荐使用IDEA，webstorm等编辑器，运行时在谷歌浏览器中打开
推荐学习视频：https://www.bilibili.com/video/av5862916

一、了解html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><!-- 编码方式-->
    <title> biaoti </title><!--head中必须有title，标题-->
</head>
<body>
<h1>标题元素</h1>
body内容
</body>
</html>

运行结果：

二、插入超链接，改变字体等

<!--<!DOCTYPE html>-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
title
<!--超链接  -->
<a href="01.html" target="_blank">1</a>
<!--保留原有页面，跳到新页面-->
<a href="01.html">2</a>
<!--直接跳到新页面，原有页面消失-->
<a href="01.html" target="_self">3</a>
<em>斜体</em><u>下划线</u><s>划去效果</s><b>加黑效果</b>
<!--<img src="/404.png" width="412" height="235" />-->
</body>
</html>

运行：
在这里插入图片描述

三、表格（行，列，合并，表头，表内容，表脚）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
<table border="5px" align="center">
<!-- 边框，表格居中-->
    <!-- thead，tbody，tfoot，表头，表内容，表脚-->
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2">Bob</td>
        <td>man</td>
        <td>23</td>
    </tr>
    <tr>
<!--        <td>Jerry</td>-->
        <td colspan="2">未知</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th>总计</th>
        <th colspan="2">2</th>
<!--        <th>43</th>-->
    </tr>
    </tfoot>

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

运行：
在这里插入图片描述

四、表单（文字框的几种形式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7表单shang</title>
</head>
<body>
<form>
    <input  type="text" size="50"><br><!--文本框长度50-->
    <input  type="text" value="占位符，可修改"><br>
    <input  type="text"  placeholder="不占位置"><br>
    <input  type="text"  placeholder="最多输入5位" maxlength="5"><br>
</form>
</body>
</html>

!](https://img-blog.csdnimg.cn/20190910173657433.png)

前端小窝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端--HTML入门学习（一）（代码及运行）

HTML入门学习前言推荐使用IDEA，webstorm等编辑器，运行时在谷歌浏览器中打开推荐学习视频：https://www.bilibili.com/video/av5862916一、了解html结构<html lang="en"><head> <meta charset="U...
复制链接

扫一扫

专栏目录