HTML

前端HTML

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
<!DOCTYPE html>
<!-- 语言选择 -->
<html lang="zh-cn">
    <head>
        <!-- html的编码方式 -->
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-wigth"/>
        <!-- 标题显示 -->
        <title>Test</title>
    </head>
    <body>
        <!-- 不加标签直接写在html会被当成普通文字显示 -->
        <!-- hello,world. -->
        <!-- <h1>~<h6>是标题标签，<h1>是顶级标题标签 -->
        <!-- <h1>不属于自闭和标签，需要在标签外写</h1> -->
        
        <!-- 
        <h1>hello,world</h1>
        <h2>hello,world</h2>
        <h3>hello,world</h3>
        <h4>hello,world</h4>
        <h5>hello,world</h5>
        <h6>hello,world</h6> 
        -->

        <!-- <p>是段落标签，用于显示一个段落 -->
        <!-- <p>hello,world</p>
        <p>hello,world</p> -->
        <!-- 列表分为有序列表和无序列表 -->
        <!-- ul时列表标签，<li>标签标识每一个选项 -->
        <ul>
            <!--
                 <img src="" alt="1"/>
                 <img src="" alt="2"/> 
            -->
           
            <!-- 
                <li>1</li>
                <li>2</li>  
           
            -->
           
            <!-- 也有嵌套元素 <li>标签内嵌套了一个<h1>标签 -->
            <!-- <li><h1>1</h1></li>
            <li><h1>2</h1></li> -->
            <!-- <li>标签会在列表元素前加一个点 -->
            <!-- <h1>1</h1>
            <h1>2</h1> -->
        </ul>
        <ol>
            <!-- 在有序列表中会在列表元素前写上序号 -->
            <!-- <li>1</li>
            <li>2</li> -->
        </ol>
        <!-- img用于显示图片，src写入图片的路径，alt写入图片的名称，也就是描述文本，当图片无法显示时就会显示该名称 -->
        <!-- src和alt也被叫做标签的属性，img属于自闭和标签，在自己的标签内闭合 -->
        <!-- <img src="img_path" alt="bshaojiu"/> -->
        <!-- <a>标签内的href属性指定点击标签后到达的网站,target选择打开的方式，选择新的页面打开还是在本页面开启 -->
                
        <a href="https://smg1205.github.io/" target="_blank">smg的blog</a>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html land="zh-cn">
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <h1>This is Picture.</h1>
        <img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.6szqS1IlGtWsaiHQUtUOVwHaQC&" alt="firefox-icon"/>
        <p>hello,world</p>
        <p>你可以选择你喜欢的地方</p>
        <ul>
            <li>法国</li>
            <li>英国</li>
            <li>中国</li>
        </ul>
        <a href="https://cn.bing.com/search?q=%E5%9B%BE%E7%89%87" target="_blank">你可以在这里看有关国家的图片</a>
    </body>
</html>
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
<!DOCTYPE html>
<html lang="zh-cn">
    
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            ol {
                list-style: none;
            }
        </style>
    </head>
    
    <body>
        <!-- 偏下 -->
        <!-- <sub>123</sub> -->
        <!-- 偏上 -->
        <!-- <sup>123</sup> -->
        <!-- <hr>分割线，并且换行 -->
        <!-- <hr> -->
        <!-- <br>换行，没有分割线 -->
        <!-- <br> -->
        <!-- <hr> -->
        <!-- 在文字中间画线 -->
        <!-- <del>123</del>
        <p><sub>我</sub><del>喜欢学</del>前端<br>
        <sup>我</sup><del>喜欢学</del>后端</p>
        <h1>12323</h1> -->

        <!-- <pre>
            <h1>12323</h1>12323
        </pre> -->
        <!-- <div> -->
            <!-- <h2>你<del>喜欢学</del></h2> -->
            <!-- 
            空心点: circle
            实心方块：square
            不显示符号: none 
            -->
            <!-- <ul type="square">
                <li><i>高数</i></li>
                <li><strong>离散</strong></li>
                <li><i><strong>马原</strong></i></li>
            </ul> -->
        <!-- </div> -->
        <!-- a用小写字母开始排序
            A用大写字母开始排序
            i/I 用罗马字母开始排序 -->
        <!-- 通过设置list-style来强制变为无序 -->
        <ol type="I">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ol>
        <!-- <dl>
            <dt>1111</dt><dd>222</dd>
            <dt>3333</dt><dd>444</dd>
        </dl> -->

    </body>
</html>
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>
    <head lang="zh-cn">
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            
            <center>
                居中对齐
            </center>
        </div>
        <!-- title是指鼠标悬浮的时候显示的文字，target页面打开方式，_new不管点击几次都只打开一个一个页面-->
        <!-- accesskey指定alt加另外一个字母快捷打开 -->
        <a href="https://smg1205.github.io/" name="baidu" target="_blank" title="wiki" accesskey="I">smg的blog</a>
        <!-- 本页面跳转，top和bottem-->
        <a name="top" href="#top">你好</a>
        <!-- 其他页面跳转 -->
        <a name="other_bottom" href="demo_1.html#bottom" target="_new">你好</a>
        <a href="demo_2.html">空连接</a>
        <!-- title鼠标悬浮在图片上的文字，长度，宽度-->
        <img src="img_path"  alt="加载图片失败" title="kelaier" width="300px" height="600px">
        
    </body>
</html>
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
<!DOCTYPE html>
<html>
    <head lang="zh-cn">
    <meta charset="utf-8">
    </head>
    <!-- <table>表格标签,<tr>定义行,<td>定义每一行的内容 -->
    <!-- border设置表格线,cellspacing设置线之间的距离 -->
    <body>
        <table border="1px" cellspacing="0px">
            
            <!-- 对单元列的表格头部标题设置 -->
            <!-- <th>people_1</th><th>people_2</th> -->
            <tbody>
                <tr bgcolor="pink" align="center">
                    <!-- 对单元行的表格头部标题设置 -->
                    <th>people</th>
                    <td>
                        <img src="img_path" alt="pci_1"> <!-- <thead>hehe</thead> -->
                    </td>
                    <!-- <th>people</th> -->
                    <td>
                        <img src="img_path" alt="pic_2">
                    </td>
                </tr>
                <!-- <th>hahaha</th><th>hehehe</th> -->
                <tr bgcolor="blue" align="center">
                    <th>hahaha</th>
                    <!-- colspan设置要合并的行的列数 -->
                    <td colspan="1">
                        20
                    </td>
                    <td>
                        18 <!-- <tfoot>haha</tfoot> -->
                    </td>
                </tr>
            </tbody>
            <!-- <caption>hahahahah</caption> -->
            <!-- 表格的标题，不论放在哪都会将该标签放到表格头部 -->
        </table>
        <!--  -->
        <form method="GET" name="haha" action="#">
            <label for="text">
                密码 <input id="text"type="text" placeholder="输入密码">
            </label>
            <br>
            <input type="radio" name="xxx" > haha <br>
            <input type="radio" name="xxx" > hehe <br>
            <br>
            <input type="checkbox" name="hhh" value="haha"> haha <br>
            <input type="checkbox" name="hhh" value="hehe"> hehe <br>
            <br>
            <input type="file">
            <br>
            <input type="submit" name="提交">
            <select>
                <option>name</option>
                <option>age</option>
                <option>time</option>
            </select>
            <textarea cols="30" rows="3">
            </textarea>
        </form>
    </body>
</html>
前端
#前端
HTML
http://example.com/2024/01/16/前端/
作者
smg
发布于
2024年1月16日
许可协议