HTML复习

发表于 更新于 分类于 阅读次数： Valine：

基本用法

回顾

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--表示html的开始，后面表示语言为中文-->
<head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>这是一个标题</title>
</head>
<body bgcolor="white" ><!--html的主体内容,
    标签拥有基本属性和动态属性
    比如：
    bgcolor是基本属性
    onclick是动态属性
-->
hello
<button onclick="alert('你好啊啊')">按钮</button>

<!--标签分为单标签br:换行，hr横线-->
举头望明月，<br>低头思故乡<hr>
</body>
</html>

标签语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!--表示html的开始，后面表示语言为中文-->
<head><!--头部信息，一般包含三部分内容，title，css标签，js代码-->
    <meta charset="UTF-8">
    <title>这是一个标题</title>
</head>
<body >
<!--标签不能交叉使用，标签要正确关闭-->
<br/>1
<!--属性必须要有值，属性值必须加上引号,注释不能嵌套-->
<font color="blue">你好</font>

</body>
</html>

常用的标签

font

1
<font COLOR="red" face="宋体" size="5">字体标签，更改颜色等</font>

特殊字符

1
2
我是&lt;br&gt;标签
我是&nbsp;&nbsp;空格

image-20220322200303349

标题标签

1
2
3
4
5
6
7
<!--标题对齐位置-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题1</h5>
<h6>标题6</h6>

超链接

1
2
3
<!--a标签是超链接，拥有两种值，_self代表当前页面，而_blank表示打开新页面进行跳转-->
<a href="www.baidu.com" target="_blank">百度</a>
<a href="www.baidu.com" target="_self" >百度</a>

列表标签

1
2
3
4
5
6
<ul>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>第四</li>
</ul>
1
2
3
4
5
6
<ol type="A">
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>第四</li>
</ol>

img标签

1
2
3
4
5
<!--. 表示当前文件所在的目录 ..表示当前文件所在的上一级目录
border表示设置文件边框
alt属性表示当指定路径找不到图片时，用来代替显示文本的内容
-->
<img src="D:\壁纸\彩云.png" width="50%" height="30%" alt="没有找到">

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table border="1" width="300" height="300" cellspacing="10">
    <tr align="center">
        <th >11</th>
        <th>12</th>
        <th>13</th>
    </tr> <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr> <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
    </tr>
</table>

image-20220322204319879

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
<table border="1" width="300" height="300" cellspacing="10">
    <tr>
        <th >11</th>
        <th>12</th>
        <th>13</th>
    </tr>
    <tr>
        <td colspan="2">21</td>
        <td>23</td>
    </tr>
    <tr>
        <td rowspan="2">31</td>
        <td>32</td>
        <td>33</td>
    </tr>
    <tr>
        <td>41</td>
        <td>42</td>

    </tr>
    <tr>
        <td>51</td>
        <td>52</td>
        <td>53</td>
    </tr>

</table>

image-20220322204732063

iframe标签

1
2
3
4
5
6
7
8
9
10
11
<body >
我是一个完整的页面
<iframe src="Hello.html" name="abc"></iframe>
<!--iframe和超链接标签的使用步骤如下
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性上设置iframe的name属性值

-->
<a href="Hello.html" target="abc">hello.html页面</a>
<a href="test.html" target="abc">test.html页面</a>
</body>

表单标签（重点）

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
<!--表单就是html中用来收集用户信息所有元素集合，然后把这些信息发送给服务器
        input type=text标签是文本输入框
        input type=password密码输入框
        name可以进行分组，checked是默认
        checkbox表示复选
-->
<form>
    <label>
        用户名称：
        <input type="text" value="默认值">
    </label><br/>
    <label>
        密码：
        <input type="password">
    </label><br/>
    <label>
        性别：
        <input type="radio" name="sex" checked="checked">
    </label>男 <label>
    <input type="radio" name="sex">
</label>女<br>
    <label>
        兴趣爱好:
        <input type="checkbox">
    </label>java<label>
    java
    <input type="checkbox">
</label><label>
    javascript
    <input type="checkbox">
</label>javaee<br>
    <label>
        国籍：
        <select>
            <option selected="selected">中国</option>
            <option>美国</option>
        </select>
    </label><br>
    <label>
        自我评价：<textarea rows="5" cols="100" >默认值</textarea>
    </label>
    <br>
    <input type="button" value="按钮">
    <input type="file">
    <!--重置-->
    <input type="reset" >
    <input type="submit" >
</form>

一般情况下表单与嵌套在表格之中，更加美观

表单提交细节
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
<!--
font标签是表单标签
  action属性设置提交的服务器地址
  method属性设置提交方式GET或Post
  表单提交的时候，数据没有发给服务器的三种情况
  1.表单没有name属性值
  2.提交表单是没有有效的信息，单选复选下拉框中都需要添加value属性
  3.表单项不在默认的form标签中
-->
<form ACTION="https://www.baidu.com" method="post">
    <label>
        用户名称：
        <input type="text" value="默认值">
    </label><br/>
    <label>
        密码：
        <input type="password">
    </label><br/>
    <label>
        性别：
        <input type="radio" name="sex" checked="checked" value="男">
    </label>男 <label>
    <input type="radio" name="sex">
</label>女<br>
    <label>
        兴趣爱好:
        <input type="checkbox">
    </label>java<label>
    java
    <input type="checkbox">
</label><label>
    javascript
    <input type="checkbox">
</label>javaee<br>
    <label>
        国籍：
        <select>
            <option selected="selected">中国</option>
            <option>美国</option>
        </select>
    </label><br>
    <label>
        自我评价：<textarea rows="5" cols="100" >默认值</textarea>
    </label>
    <br>
    <input type="button" value="按钮">
    <input type="file">
    <!--重置-->
    <input type="reset" >
    <input type="submit" >
</form>

get与post的不同

GET请求：

  1. 在浏览器中地址是 action属性+？+请求参数
  2. 不安全，其信息在浏览框中都可以看出来
  3. 有数据长度的限制

POST请求：

  1. 浏览器只有服务器地址
  2. 比较安全
  3. 理论上没有数据长度的限制

其他标签

1
2
3
4
5
6
7
8
9
10
11
<!--
div标签默认不在一行
span他的长度是封装数据的长度
p段落标签默认会在段落上方或者下方空出一行
-->
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span1</span>
<p>你好呀</p>