xwblog
0%

html

发表于 分类于
本文字数： 12k 阅读时长 ≈ 11 分钟
HTML

1.网页SEO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="zh">
<!-- 
        < body >、< /body>等成对的标签，分别叫做开放标签和闭合标签
        单独呈现的标签（空元素），如< hr/ >;意为用/来关闭空元素
     -->
<!-- 网页头部 -->

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="totoroBlog,Python,软件测试">
    <meta name="description" content="totoro的博客，欢迎访问">
    <title>SEO与网页整体结构</title>
</head>
<!-- 网页主体 -->

<body>
    Hello,World!
</body>

</html>

2.基本标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 用做网站SEO -->
    <meta name="keywords" content="totoroBlog,Python,软件测试">
    <meta name="description" content="totoro的博客，欢迎访问">
    <title>基本标签</title>
</head>

<body>
    <!-- 标题标签 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!-- 段落标签 -->
    <p>第一段落</p>
    <p>第二段落</p>
    <!-- 换行标签 -->
    <!-- 换行标签比较紧凑，段落标签有明显段落间距-->
    准备换行，这是行尾<br>新行开头<br>
    <hr>
    <!-- 水平线标签 -->
    华丽的分隔符
    <hr>
    <!--  -->
    <!-- 粗体、斜体、粗斜体 -->
    <strong>I Love You</strong>
    <em>I Love You</em>
    <strong><em>I Love You</em></strong>
    <!-- 特殊符号 -->
    <br>特殊符号:<br>
    空格：1&nbsp;2&nbsp;3&nbsp;4&nbsp;5&nbsp;<br>
    手动空格：1 2 3    4       5<br>
    大于号：&gt;<br>
    小于号：&lt;<br>
    版权符号：totoroBlog&copy;2020<br>
</body>

</html>

3.图像标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>
    <!-- 图像标签 -->
    <!--
    src:资源地址
    相对地址，绝对地址
    ../上级地址
    alt：在图片加载失败的时候，就会用文字代替
    title:鼠标悬停在图片上时，所显示的名字
    width height: 图片的高和宽
    -->
    <img src="./src/img/微信图片_20201224160900.jpg" alt="~_~😫,图片被吞掉了" title="你旺我旺大家旺">
    <img src="./src/img/xxx.jpg" alt="~_~😫,图片被吞掉了">
    <img src="./src/img/微信图片_20201224160900.jpg" alt="~_~😫,图片被吞掉了" width="128" height="128">
  </body>

</html>
·

4.链接标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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>
    <!--
        链接标签：
        href：跳转页面的地址
        a标签内文字：即显示的文字
            可以把图片放在a标签内，点击图片跳转网页
        title：链接描述
        target:表示在哪打开新网页。_self:当前标签打开 _blank:新的页面中打开
    -->
    <a name="top">这是顶部</a>
    <a href="https://www.baidu.com" target="_blank" title="百度一下">百度一下</a>

    <br>
    <a href="https://www.baidu.com"><img src="./src/img/baidu.png" alt="🤣图片不见了" title="百度一下"></a>
    <br>
    <a href="https://www.baidu.com"><img src="./src/img/baidu.png" alt="🤣图片不见了" title="百度一下"></a>
    <br>
    <a href="https://www.baidu.com"><img src="./src/img/baidu.png" alt="🤣图片不见了" title="百度一下"></a>
    <br>
    <a href="https://www.baidu.com"><img src="./src/img/baidu.png" alt="🤣图片不见了" title="百度一下"></a>
    <br>
    <a href="https://www.baidu.com"><img src="./src/img/baidu.png" alt="🤣图片不见了" title="百度一下"></a>

    <!-- 锚标签 -->
    <br>
    <a href="#top">回到顶部</a>
    <!-- 也可以在网址后添加#号跳到对应网站的对应位置 -->
    <a href="http://www.cyc2018.xyz/#java">Cyc2018#Java</a>
    <!-- 功能性链接 -->
    <a href="mailto:957584602@qq.com">邮箱联系</a>
    <!-- QQ链接 -->
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=957584602&site=qq&menu=yes"><img border="0"
            src="http://wpa.qq.com/pa?p=2:957584602:53" alt="点击这里给我发消息" title="点击这里给我发消息" /></a>
    <!-- 总结 -->
    <!-- 块元素:无论内容多少，该元素独占一行
        p hr h1~h6
        行内元素:内容撑开宽度，左右都是行内元素的可以排在一行
        a strong em
    -->
</body>

</html>

5.列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>

<body>
    <!-- 有序列表 -->
    <ol>
        <li>Python</li>
        <li>Java</li>
        <li>C++</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>Python</li>
        <li>Java</li>
        <li>C++</li>
    </ul>
    <!-- 无序列表嵌套 -->
    <ul>
        <li>Python
            <ul>
                <li>基础部分</li>
                <li>高级部分</li>
            </ul>
        </li>
        <li>Java
            <ul>
                <li>JavaSE</li>
                <li>JavaEE</li>
            </ul>
        </li>
    </ul>
    <!-- 自定义列表 -->
    <!--自定义列表
        dl：标签
        dt：列表名称
        dd：列表内容
    -->
    <dl>
        <dt>学科</dt>
        <dd>语文</dd>
        <dd>数学</dd>
        <dd>英语</dd>
    </dl>
</body>

</html>

6.表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>

<body>
    <!--表格table
        行 tr
        列 td
        表头 caption
    -->
    <table border="1px">
         <caption>我是表格标题</caption>
        <tr>
            <!-- 跨行 -->
            <td rowspan="2">1-1</td>  <!-- 1-1跨两行 -->
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <!-- 跨列 -->
            <td colspan="2">2-1</td>  <!-- 2-1跨两列 -->
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
        
        
    </table>
</body>

</html>

7.媒体元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>

<body>
    <!-- 视频元素 -->
    <!--视频
		src 资源路径
        controls 控制面板
        autoplay 自动播放
    -->
    <video src="./src/video/脑电数据相似度比对.mp4" controls width="800" height="600"></video>
    <!-- 音频元素 -->
    <audio src="./src/audio/久石让 - 天空の城ラピュタ (天空之城).mp3" controls></audio>

</body>

</html>

8.页面结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
    <!-- 
        header	标题头部区域的内容（用于页面或者页面中的一块区域）
        footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
        section	Web页面中的一块独立区域
        article	独立的文章内容
        aside	相关内容或应用
        nav	导航类辅助内容 
    -->
    <header>
        <h1>网页头部</h1>
    </header>
    <section>
        <h2>独立区域</h2>
    </section>
    <footer>
        <h3>网页脚部</h3>
    </footer>
</body>
</html>

9.内联框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>

<body>
    <iframe src="https://www.baidu.com" frameborder="0" width="800" height="600"></iframe>
    <!-- bilibili视频分享 -->

    <iframe src="//player.bilibili.com/player.html?aid=885854372&bvid=BV19K4y1V7QJ&cid=270583162&page=1" scrolling="no"
        border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="800" height="600">
    </iframe>

    <iframe src="//player.bilibili.com/player.html?aid=71816014&bvid=BV11E411k76T&cid=124600873&page=1" scrolling="no"
        border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="800" height="600">
    </iframe>
    <!-- 自定义跳转 在name=hello的iframe打开博客园 -->
    <iframe src="" frameborder="0" name="hello" width="500" height="1000"></iframe>
    <a href="https://www.cnblogs.com/totoroblog" target="hello">点击进入博客园</a>
</body>

</html>

10.学习表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>
    <!--表单form
        action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
        method：post get请求方式
    -->
    <form action="1.SEO与整体结构.html" method="GET">
        <!--文本输入框：input type="text"-->
        <p>用户名:
            <!-- placehoder	输入框内的提示信息 -->
            <input type="text" name="username" placeholder="请输入用户名" maxlength="10" size="20" id="mark">
        </p>
        <p>密码:
            <!-- required	不能为空 -->
            <input type="password" name="password" placeholder="请输入密码" required>
        </p>
        <p>
            <input type="submit">
            <input type="reset">
        </p>
        <!--    radio单选框标签 value即单选框的值，在提交时对应value
            name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
            checked:默认被选中
        -->
        <p>性别:
            <input type="radio" name="sex" value="boy" checked >男
            <input type="radio" name="sex" value="girl">女
        </p>
        <p>爱好:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" name="hobby" value="dance">跳舞
            <input type="checkbox" name="hobby" value="singe">唱歌
        </p>
        <p>文字按钮与图片按钮:
            <input type="button" name="btn1" value="文字按钮">
            <input type="image" src="./src/img/baidu.png" width="200" height="100">
        </p>
        <p>国家选择:
            <select name="location" id="locat">
                <!--下拉框：selected:默认选项-->
                <option value="china" selected>中国</option>
                <option value="USA">美国</option>
                <option value="UK">英国</option>
            </select>
        </p>
        <p>文本域:
            <textarea name="text" id="text0" cols="30" rows="10">文本内容</textarea>
        </p>
        <p>文件域:
            <input type="file" name="files" id="f1">
            <input type="button" name="upload" value="上传">
        </p>
        <!--邮件：会简单验证是否是邮箱地址
            url：会简单验证是否是网络地址
            number：数字验证
        -->
        <p>邮箱:
            <input type="email" name="email">
        </p>
        <p>网址:
            <input type="url" name="url">
        </p>
        <!--数字验证
           max最大数量
           min 最小数量
           step 每次点击增加或减少的数量-->
        <p>商品数量:
            <input type="number" name="num" max="100" min="1" step="1">
        </p>
        <p>音量:
            <input type="range" name="voice" min="0" max="100" step="2">
        </p>
        <p>搜索:
            <input type="search">
        </p>
        <p>增强鼠标可用性(点击跳转):
            <label for="mark">点我试试</label>
        </p>
        <input type="submit">
        <input type="reset">
        <!-- 一些其他属性
            readonly	只读，不可更改
            disable	禁用
            hidden	隐藏，虽然不可见但是会提交
            id	标识符，可以配合label的for属性增加鼠标的可用性
            patten	正则表达式验证
         -->
    </form>

</body>
</html>

-------------文章到底啦！感谢您的阅读-------------
感谢您的阅读和支持,您的支持是对我最大的帮助！

欢迎关注我的其它发布渠道