1.标签的style属性

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
<!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>
        h1 {
            text-align: center;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<!--大多数标签都有style属性，可以在head头标签里用style的属性值标签一次性改变一种标签，也可以在body标签里的某个标签里用style属性和属性值只改变这一个标签-->

<body>
    <h1>居中对齐的标题</h1>
    <h1>黄色标题</h1>
    <p>红色段落</p>
    <a href="https://th.bing.com/th/id/R.e40690c18cdae70edc9396b13522185c?rik=sVz9lHDz3lEsxg&pid=ImgRaw&r=0"
        style="text-decoration: none;">这是一个好图片</a>
    <!--style="text-decoration: none;"超链接这个属性可以去掉下划线-->

</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
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
<h1>这是1号标题</h1>

    <font size="6">这是6号字体文本</font>

    <h2>这是2号标题</h2>

    <font size="5">这是5号字体文本</font>

    <h3>这是3号标题</h3>

    <font size="4">这是4号字体文本</font>

    <h4>这是4号标题</h4>

    <font size="3">这是3号字体文本</font>

    <h5>这是5号标题</h5>

    <font size="2">这是2号字体文本</font>

    <h6>这是6号标题</h6>

    <font size="1">这是1号字体文本</font>

    <!--  n号标题对应7-n号字体文本大小-->

    <p>这是一个段落</p>

    <p>这是另一个段落</p>

    <!-- 注意：浏览器会自动地在段落和标题的前后添加空行，会直接换行再空行，同一个段落换行用<br>，一般的标签是不会自己换行的
        html中所有连续的空格换行空行都是算作一个空格，省略了多余的空格空行换行，也就是说，有时候缩进不严格，有时候输出会多出空各。（</p> 是块级元素）-->
	<p>

        春眠不觉晓，

        处处闻啼鸟。

        夜来风雨声，

        花落知多少。

    </p>

    <p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
	<pre>

        春眠不觉晓，
 
        处处闻啼鸟。
 
        夜来风雨声，
 
        花落知多少。
 
    </pre>

    <!--预览文本标签，保留排版（空格空行换行）-->

	
    <p>该段落文字从左到右显示。</p>

    <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

    <q>世界很美</q>

    <!--这个q标签用于加双引号，常用于引用人的话-->

    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

    此例演示如何标记删除文本和插入文本。

    <!--<abbr>  定义缩写
    <address>   定义地址
    <bdo>       定义文字方向
    <blockquote>    定义长的引用
    <q>         定义短的引用语
    <cite>      定义引用、引证
    <dfn>       定义一个定义项目。
        这些一般都是p段落标签的属性-->


3.a标签和它的单双向锚点

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 如何定锚点
1.a标签name和id属性
2.其他标签的id属性
-->
<!--
    属性
        href：跳转链接(必需属性：未设置则a标签与普通文本无区别)
        target:
        _self当前窗口打开默认
        _blank 新开空白窗口打开
        _parent
        _top
-->

<body>
    <a href="https://download-cdn.jetbrains.com/cpp/CLion-2023.2.2.exe" download>下载Clion</a>

    <!--上面这个是下载链接不打开网页-->
    
    
    <a href="5.列表.html">列表</a>
<!-- 绝对路径-->
<a href="E:\WebStormProject\html5\5.列表.html">绝对路径列表</a>
<!-- 网络路径-->
<a href="http://www.baidu.com">百度</a>
<!-- 新开窗口打开-->
<a href="5.列表.html" target="_blank">列表</a>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><b
    
    
    

    
    <a href="https://www.jxust.edu.cn/"><img
            src="https://th.bing.com/th/id/R.cbe5d465d13f9e3d47bf01dfef14e3f9?rik=eS9ZwVCDEEfFEA&pid=ImgRaw&r=0"
            alt="失败了" title="oh nice"></a>
    
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="https://www.baidu.com" target="_blank">
        <img src="https://th.bing.com/th/id/R.45c5d20f24f31d725c464126d640e46a?rik=amBpLdzrB9zDQw&riu=http%3a%2f%2ftu.52guzhuang.com%2fd%2ffile%2fp%2f2016-11-14%2fa2zgrfbhjdu7743.jpg&ehk=jz%2bScVdYDISwvDKqpuO2GFfpojC5bTUd9bgAq%2bpTGSU%3d&risl=&pid=ImgRaw&r=0"
            title="大长腿美女姐姐" border="5" align="right"></a <br />
    <a href="#回去家乡看看" id="去看看美女姐姐">回去家乡看看</a>
    <pre>
        雁门太守行
        李贺〔唐代〕
    
    黑云压城城欲摧，甲光向日金鳞开。
    角声满天秋色里，塞上燕脂凝夜紫。
    半卷红旗临易水，霜重鼓寒声不起。
    报君黄金台上意，提携玉龙为君死。
    </pre>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h2 id="华为mate60pro">华为mate60pro 遥遥领先 遥遥领先 遥遥领先！</h2>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#华为mate60pro">华为mate60pro</a>
    <a href="#去看看美女姐姐" name="回去家乡看看">去看看美女姐姐</a>
    <a href="#">开头1</a>
    <a href="">开头2</a>
    <!--上面这俩直接回到开头very好用-->
	<!--id属性比name更强，从另一个网页获取这个网页的id位置只要再这个网页的urL后面加上#和id	的值-->

    <!-- href属性指向a标签的name值，注意加上#-->
    <!-- href属性指向a标签和其他标签的id值，注意加上#-->
    <!--本html内双向锚点就必须是俩a标签，至于是name还是id属性互锚随便，最好是name，因为其他标签要用id，做一个区别，但是如果涉及跨html文件双向锚点就用id把-->
</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
52
53
54
55
56
57
58
59
60
61
62
63
<!-- 单标签无属性 -->
<!-- <xxx />-->
<!-- 单标签有属性 -->
<!-- <xxx xxx=xxx />-->
<!-- 双标签无属性 -->
<!-- <xxx></>xxx>-->
<!-- 双标签有属性 -->
<!-- <xxx xxx=xxx ></xxx>-->

<!-- 整体结构
<html></>html>当前是个网页
<head></head>头部区域
<body></body>身体部分
-->
<!-- 下面是版本声明html5 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title> <!-- 页面标题-->
    <link rel="stylesheet" href="引入我们的css文件的路径">
    <script src="引入的js文件路径" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <!-- 浏览器可见内容 -->
    hello
</body>
</html>```

## 3.标题和水平线

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
    (1)body标签的属性
    <bgcolor>背景颜色</bgcolor>
    1.颜色名 2.rgb 3.16进制
    <text>字体颜色
    (2)h标签（标题标签） h1~h6
    不建议在页面写多个h1，h1可以搜索搜索引擎获取到，写多个可能进入搜索引擎黑名单
    (3)hr标签
     宽度：width属性 1.% 2.px
     对齐方式： align(默认center)
     水平线粗细: size
-->
<body bgcolor="#ffc0cb" text="blue">
    Hello
    <h1>Hello</h1>
    <h2>Hello</h2>
    <h3>Hello</h3>
    <h4>Hello</h4>
    <h5>Hello</h5>
    <h6>Hello</h6>
    <hr width="50%" align="left" size="5"/>
    <hr width="500px" align="right" size="10"/>
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
    1.段落和换行
        段落标签
            <p></p>段落会自动换行
            对其方式:align（默认居左）
        换行
        <br/>
-->
<body>
<p align="left">这是段落1</p>
<hr/>
<p align="right">这是段落2</p>
<hr/>
<p align="center">这是段落3</p>
<hr/>
<p align>
    这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行Hello
    这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行Hello这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行
    这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行
</p>

<p align="justify"> <!-- 两端对齐-->
    这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行Hello
    这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行Hello这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行
    这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行这是段落4多行
</p>
<hr/>

<hr/>
    Hello<br/>
    World
</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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
    列表
      无序列表
        <ul>
          <li></>li>
          <li></>li>
         </>ul>
         常用属性:
            type列表的图标
                square 实心方块
                circle 空心圆
                disc   实心圆默认
      有序列表
        <ol>
          <li></>li>
          <li></>li>
        </>ol>
        常用属性:
            type列表的图标
            1 数字序号
            a 小写字母
            A 大写字母
            i 小写罗马字母
            I 大写罗马字母


-->
<body>
<h2>无序列表</h2>
<ul>
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ul>
<hr/>
<ul type="square">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ul>
<hr/>
<ul type="circle">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ul>

<h2>有序列表</h2>
<ol>
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ol>
<hr/>
<ol type="a">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ol>

<ol type="A">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ol>
<hr/>
<ol type="i">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ol>
<ol type="I">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ol>

</body>
</html>

自定义列表

场景:

在网页的底部导航中通常会使用自定义列表实现。

标签组成:
标签名 说明
dl 表示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容

显示特点:
• dd前会默认显示缩进效果

注意点:
• dl标签中只允许包含dt/dd标签
• dt/dd标签可以包含任意内容

小结
有序列表由几个标签组成?分别表示什么?

• ol标签:表示有序列表的整体
• li标签:表示有序列表的每一项

有序列表标签的嵌套规范是什么?

• ol标签中只允许嵌套li标签
• li标签中可以嵌套任意内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>
</body>
</html>

7.div和span

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
    div和span
        div标签
            层 块级元素 标签会自动换行
            常用于布局
            常用属性：
                align div元素中内容的对其方式
        span
            块，行内元素 标签不会自动换行
-->
<body>
    <div align="center">
        层块级元素div,标签自动换行
    </div>
    <div>
        层块级元素div,标签自动换行<br/>
        自动调整大小
    </div>

    <hr/>
    <span>名字张三</span>

</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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <!--
        格式化标签
            font
                设置字体相关的属性
                color 字体颜色
                size 字体大小 1-7
                face 字体风格
            pre
                定义预格式化的文本
                保留文本中的空格和换行
            b/strong 加粗
            i 斜体
            u 下划线
            del 中划线
            sub 下标
            sup 上标



        -->

        你好
        <br/>
        <font color="red" size="7" face="楷体">你好</font>
        <hr/>
        Hello         World
        <pre>Hello         World</pre>
        <hr/>
        <p><b>粗体</b></p>
        <p><strong>粗体</strong></p>
        <hr/>
        <p><i>斜体</i></p>
        <p><u>下划体</u></p>
        <p><del>中划体</del></p>
        <p>H<sub>2</sub>O</p>
        <p>2<sup>2</sup></p>
</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
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
img标签是一个行内标签不会自动换行
必需属性
src：图片地址
title：当图片悬停到图片上时显示的文字
alt：当图片加载失败时显示的属性
width：宽度
height:高度（只设置一个会等比缩放）
border:边框
align：对其方式 如何根据周围的文本排列图像
在我们的img外面套一个a标签可以实现跳转
-->
<body>
<h2>本地资源</h2>
<img src="img/jxust.jpg"><br/>
<h2>网络资源</h2>
<a href="https://www.baidu.com" target="_blank">
    <img src="https://www.baidu.com/img/pcguoqing_fc97127958bbaff5dbb6b51b665665ea.gif" title="百度" border="2" align="right">
</a>

<h2>显示失败</h2>
<img src="img/jxust1.jpg" alt="加载失败"><br/>
</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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
table 表格的定义
tr  表格中的行
td  表格中的标准单元格
th  表格中的表头单元格（标题效果）
每tr可以包含一个或多个td或th
1.table常用属性
border表格的边框
width宽度(若是百分比就是父元素的50%宽度,若上级元素未设置则参考屏幕宽度)
align对其方式
height高度（同理）
2.tr的常用属性
align 每行中文本水平对齐方式
valign 每行中文本垂直对齐方式
bgcolor 这一行表格的颜色
3.td的常用属性
rowspan纵向合并
colspan横向合并
-->

<body>
<table border="1" width="500px" style="border-collapse: collapse" align="center" height="300px">
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr align="center" valign="top" bgcolor="#faebd7">
        <td rowspan="2">101</td>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr align="right">
        <td>李四</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr align="left">
        <td>103</td>
        <td>王五</td>
        <td>18</td>
        <td>男</td>
    </tr>
</table>
<hr/>
<h2>纵向合并</h2>
<table border="1" width="500px" style="border-collapse: collapse" align="center">
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr align="center" >
        <td rowspan="2">101</td>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr align="center">
        <td>李四</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr align="center">
        <td>103</td>
        <td>王五</td>
        <td>18</td>
        <td>男</td>
    </tr>
</table>
<hr>
<h2>横向合并</h2>
<table border="1" width="500px" style="border-collapse: collapse" align="center">
    <tr>
        <th colspan="2">班级+姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr align="center" >
        <td>101</td>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr align="center">
        <td>102</td>
        <td>李四</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr align="center">
        <td>103</td>
        <td>王五</td>
        <td>18</td>
        <td>男</td>
    </tr>
</table>


</body>
</html>

11.表单

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
    所有标签都有的属性
    id属性：用来表示元素的唯一性
    name属性：用来提交数据给后台的参数名
    style属性：设置元素的行内样式css（具体样式）
    class属性： 设置元素的样式名
    表单
    form
        表单用于向服务器传输数据 是块级元素 其前后会产生折行
        表单提交时必须设定表单元素的name属性值,否则无法获取数据
    常用属性:
    action:提交表单的地址
    method：提交方式get/post
    target：提交数据打开窗口的方式
        _self当前窗口
        _blank 空白窗口
    需要结合表单元素一起使用
-->

<body>
    <form action="https://www.baidu.com">
        姓名:<input type="text">
        <button>提交</button>
    </form>
    <form>
        姓名:<input type="text" name="username">
        <button>提交</button>
    </form>
</body>

</html>

12.input标签

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
input标签
    1.type 元素的类型
    text 文本框
    2.value 元素的默认值
    3.readonly 只读
    4.最长长度 maxlength
    5.若上传文件的表单则表单需要设置一个属性enctype="multipart/form-data",提交方式为post请求
    6.disabled 禁用
-->

<body>
    只读文本框: <input type="text" value="张三" readonly><br>
    限制字数文本框: <input type="text" value="张三" maxlength="10"><br>
    密码框:<input type="password"><br>
    单选框：<input type="radio" value="man" name="sex">男 <input type="radio" value="woman" name="sex">女
    <!--    用name属性标注为一组是必须的（一组才保证单选效果）,value不是必须的但是和提交的数据有关-->
    复选框：<input type="checkbox" value="1" name="cb">1
    <input type="checkbox" value="2" name="cb">2
    <input type="checkbox" value="3" name="cb">3<br>
    文件域：<input type="file"><br>
    <!--选择文件一般用于提交数据-->
    隐藏域：<input type="hidden" value="admin"><br><!--就是看不到的-->
    普通按钮: <input type="button" value="普通按钮">
    提交按钮 <input type="submit" value="提交按钮">
    重置按钮 <input type="reset" value="重置按钮"><br>
    日期框 <input type="date">

</body>

</html>

13.textarea和label

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</title>
</head>
<!--
可输入多行文本的控件
textarea
    属性cols文本的可见宽度
       rows文件可见行数

label
    聚焦
    for属性
    当for属性和id属性值一致时,点击lable标签会自动为元素聚焦
-->
<body>
    姓名：<input type="text" name="uname" /><br>
    简介：<textarea cols="30" rows="10"></textarea>
<hr>
    <label for="uanme">姓名：</label><input id="uanme" type="text" name="uname" /><br>

</body>
</html>

14.button标签

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</title>
</head>
<!-- input 也是ok的-->
<body>
<!-- 默认值是submit 是个坑-->



<form action="https://www.baidu.com" method="get">
  <input type="text" name="uname">
  <input type="button" value="普通按钮">
  <input type="submit" value="提交按钮">
  <input type="reset" value="重置按钮">
  <hr>
  <button type="button">普通按钮（能加图标诶！）</button>
  <button type="submit">提交按钮</button>
  <button type="reset">重置按钮</button>
</form>

</body>
</html>

15.下拉框

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
下拉框标签
select 下拉框标签
option 下拉框选项标签
1.select常用属性
multiple 设置下拉框可多选
size 设置可见选项数
disabled 禁用
2.option属性
selected 默认选择项
disabled 禁用某个选项
value 向服务器提交的选项值,如未设置则提交的是内部的标签值
-->
<body>
    <select name="city">
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>

    <select name="city" >
        <option value="">请选择城市</option>
        <option>上海</option>
        <option selected = "selected">北京</option>
        <option>深圳</option>
    </select>
</body>
</html>

16.常用字符实体和标签分类

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
例子  < >以及空格和版权在我们的html会被识别很无法导致正确显示
常见：
小于号 < &lt
大于号 > &gt
空格 &nbsp
版权  &copy

标签分类
1.块级元素
元素都是从新一行开始,并且其后的元素也是另起一行；元素的高度宽度行高以及顶和底间距都可设置；元素宽度在不设置的情况下，是他本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
2.行级元素
和其他元素都在一行上，元素的高度，宽度和顶部和底部间距不可赦之，元素的宽度就是它包含的文字或者图片的宽度，不可改变
3.行内块级元素
和其他元素都在一行上，元素的高度宽度行高以及顶和底间距都可设置
-->

<body>
 <h2>你 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp好</h2>
    <h2>你
        好</h2>
    <!--&lt 小于号-->
    <!--&gt 大于号-->
    <!--连续的空格换行空行会省略成一个空格的效果，所以才要&nbsp来替代空格，才可以有多个空-->
    版权声明：&copy


<h2>&lth2&gt你&nbsp&nbsp好&lth2&gt</h2><br>
版权声明：&copy


</body>
</html>

17.杂记

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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        #example1 {
            border: 20px solid #e61616;
            padding: 100px 40px;
            background: #716363;
            width: 900px;
            height: 1000px;
            border-radius: 25px;
        }

        #example2 {
            border: 20px solid red;
            padding: 100px;
            border-radius: 100px 20px;

        }

        #example3 {
            border: 20px solid red;
            padding: 100px;
            border-radius: 100px 20px;

        }

        .example4 {
            border: 20px solid red;
            padding: 100px;
            border-radius: 100px 20px;

        }
    </style>
</head>
<!--这个 border: 
           #example1 {
            border: 20px solid #e61616;
            padding: 100px 40px;
            background: #716363;
            width: 900px;
            height: 1000px;
            border-radius: 25px;
        }
          #example1的#是专门配合div的id使用，id可获取header头标签中style标签中特定的css样式
          border是边框 可以有宽度 一定要有solid否则不显示，后面还可以些red等颜色然后微调
            padding是内边距，写一个就是上下左右都是，写俩就是上下和左右
            background 改变背景颜色
            width默认div格子的宽度
            height默认div格子的高度
              border-radius是左上右下和右上左下的弧度，估计数字就是内接圆半径
              写一个四个角都一样，写俩就会斜

-->

<body>
    <div id="example1">
        <p>border-radius 属性允许您为元素添加圆角边框！</p>
    </div>
    <br><br>
    <div id="example2">
        <p>如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角。</p>
    </div>
    <div id="example2">
        <p>潘多拉魔盒打开。</p>
    </div>

    <div id="example3">
        <p>如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角。</p>
    </div>
    <div class="example4">
        <p>我知道自己过去很贱。</p>
    </div>
    <div class="example4" title="美女的块块" dir="">
        <p>我知道自己过去很贱。</p>
    </div>
    <!--似乎id和class都可以反复用，有点奇怪-->
</body>

</html>