web前端--HTML入门学习(一)

HTML入门学习

前言

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

一、了解html结构

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8"><!-- 编码方式-->
5
    <title> biaoti </title><!--head中必须有title,标题-->
6
</head>
7
<body>
8
<h1>标题元素</h1>
9
body内容
10
</body>
11
</html>

运行结果:

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

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

运行:

三、表格(行,列,合并,表头,表内容,表脚)

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>table</title>
6
</head>
7
<body>
8
<table border="5px" align="center">
9
<!-- 边框,表格居中-->
10
    <!-- thead,tbody,tfoot,表头,表内容,表脚-->
11
    <thead>
12
    <tr>
13
        <th>姓名</th>
14
        <th>性别</th>
15
        <th>年龄</th>
16
    </tr>
17
    </thead>
18
    <tbody>
19
    <tr>
20
        <td rowspan="2">Bob</td>
21
        <td>man</td>
22
        <td>23</td>
23
    </tr>
24
    <tr>
25
<!--        <td>Jerry</td>-->
26
        <td colspan="2">未知</td>
27
    </tr>
28
    </tbody>
29
    <tfoot>
30
    <tr>
31
        <th>总计</th>
32
        <th colspan="2">2</th>
33
<!--        <th>43</th>-->
34
    </tr>
35
    </tfoot>
36
37
</table>
38
</body>
39
</html>

运行:

四、表单(文字框的几种形式)

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>7表单shang</title>
6
</head>
7
<body>
8
<form>
9
    <input  type="text" size="50"><br><!--文本框长度50-->
10
    <input  type="text" value="占位符,可修改"><br>
11
    <input  type="text"  placeholder="不占位置"><br>
12
    <input  type="text"  placeholder="最多输入5位" maxlength="5"><br>
13
</form>
14
</body>
15
</html>