HTML_02HTML总结

1.基本标签

标签	描述
< p>< /p>	段落标签，用于分段
< h1>< /h1> h1~h6	标题标签，设置标题级别
< br/>	换行；独目标签
< hr/>	水平线；独目标签
< pre>< /pre>	预留格式，将HTML源码上的格式照搬到网页上显示
< b>< /b>或< strong>< /strong>	字体加粗
< em>< /em>或< i>< /i>	字体变斜
< ins>< /ins>或< u>< /u>	带下划线的字
< del>< /del>或< s>< /s>	带删除线的字
x < sup>2< /sup>	右上角加字 x²
x< sub>2< /sub>	右下角加字 x₂
< font color = "green" size = "18">字体标签< /font>	字体标签，用于设置字体格式等。

1.1标题标签

<h1></h1>

用于设置标题级别

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 告诉浏览器以什么字符编码方式打开该页面，这个编码方式要与文件自身的编码方式相同，不然会乱码 -->
    <!-- Windows系统中的文件默认字符编码方式为gbk，如果未写这句，浏览器会以gbk的简体中文打开页面 -->
    <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>标题标签</title>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>

1.2段落标签和换行标签

<p></p>
<br/>

<!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>段落标签</title>
</head>
<body>
    <p>我是一个认真工作，认真钻研，勇于创新的人。</p>
    <p>能熟练运用电脑，掌握一定的office办公软件，与老师与同学保持着紧密的关系，<br/>乐于帮助同学解决学习与生活上的麻烦，善于总结归纳，善于沟通，有良好的敬业作风和团队合作精神。</p>
    <p>已熟悉与掌握本专业的相关知识，在大学4年间学会刻苦耐劳，努力钻研，学以致用，这就是我们所追寻的宝藏。</p>
</body>
</html>

1.3水平线

<!--水平线，独目标签-->
<hr/>

<!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>
    <br/><br/>
    <hr/>
    <br/><br/>
    <!-- 设置线条颜色 -->
    <hr color="red"/>
</body>
</html>

1.4预留标签

<pre></pre>

预留格式，将文本在HTML源码上的格式照搬到网页上显示。

<!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>预留格式</title>
</head>
<body>
    <pre>
            南阳理工学院（Nanyang Institute of Technology），简称“南阳理工”，
        是一所经教育部批准的全日制普通本科高等院校，入选教育部数据中国“百校工程”培育院校，为教育部 “卓越工程师教育培养计划”试点学校，是国家首批“新工科研究与实践项目”入选高校。 [1] 
            学校前身是1987年创办的南阳大学；
        1993年由国家教委正式批准建校，定名为南阳理工学院，原张仲景国医大学并入；2004年经国家教育部批准，升格为本科院校，实行省市共建、以市为主的办学体制。
            截至2017年5月，学院校区总面积1760亩，建筑面积58万平方米，
        有大型运动场2个，综合体育馆1座；学校设19个教学院部、50个本科专业；拥有教职工1500余人，在校普通本专科生和留学生20000余人。 [2] 
    </pre>

</body>
</html>

1.5文本格式化标签

<strong></strong>或<b></b> <!--字体加粗-->
<em></em>或<i></i> <!--字体变斜-->
<ins></ins>或<u></u><!--带下划线的字-->
<del></del>或<s></s> <!--带删除线的字-->

<!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>文本格式化标签</title>
</head>
<body>
    <!-- 字体加粗 -->
    <p><strong>字体加粗1</strong></p>
    <p><b>字体加粗2</b></p>

    <!-- 字体变斜 -->
    <p><em>字体变斜1</em></p>
    <p><i>字体变斜2</i></p>
    
    <!-- 带下划线的字 -->
    <p><ins>带下划线的字1</ins></p>
    <p><u>带下划线的字2</u></p>
    
    <!-- 带删除线的字 -->
    <p><del>带删除线的字1</del></p>
    <p><s>带删除线的字2</s></p>
</body>
</html>

1.6右上角加字和右下角加字

x<sup>2</sup>右上角加字
x<sub>2</sub>右下角加字

<!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>右上角加字和右下角加字</title>
</head>
<body>
    <!-- 右上角 -->
    <p>
        x<sup>2</sup>
    </p>
    <!-- 右下角 -->
    <p>
        x<sub>2</sub>
    </p>
</body>
</html>

1.7字体标签

<font color = "green" size = "18">字体标签</font>

字体标签，用于设置字体格式等。

<!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>字体标签</title>
</head>
<body>
    <font color = "blue" size = "18">字体格式</font>
</body>
</html>

2.实体符号

&nbsp;<!-- 空格 -->
&lt;  <!-- 小于号 -->
&gt;  <!-- 大于号 -->

<!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>
    <!-- 空格&nbsp; -->
    <p>很&nbsp;多&nbsp;&nbsp;空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
    <!-- 小于号&lt; -->
    <p>1 &lt; 10</p>
    <!-- 大于号&gt; -->
    <p>10 &gt; 1</p>
    <p>&lt;&lt;高等数学&gt;&gt;</p>
</body>
</html>

3.背景颜色和背景图片

3.1背景颜色

在body标签里配置bycolor属性指定背景颜色。

在后面的引号里填颜色对应的单词。

<!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>背景颜色和背景图片</title>
</head>
<!-- body标签的bgcolor属性指定背景颜色 -->
<body bgcolor="green">
    
</body>
</html>

3.2背景图片

在body标签里配置background属性指定背景图片。

在后面的引号里填图片的本地路径或者网络路径。

<!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>背景颜色和背景图片</title>
</head>
<!-- body标签的background属性指定背景图片 -->
<body background= "https://s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/background.bc725153.png">
</body>
</html>

4.图片

<!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>图片</title>
</head>
<!-- 背景图片是嵌入页面的，图片是浮于页面的 -->
<body background="https://s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/background.bc725153.png">
    <!-- <img src="https://pic.imgdb.cn/item/6103916c5132923bf8511d15.jpg"></img> -->
    <!-- 如果在开始标签和结束标签之间没有内容的话，可以将结束标签删除掉，在开始标签末尾添加一个/ -->
    <!-- src：图片路径 -->
    <!-- title：光标移动到图片上时显示的信息 -->
    <img src="https://pic.imgdb.cn/item/6103916c5132923bf8511d15.jpg" title="这是一个狗头"/>
    <!-- alt：图片没能加载出来时显示的信息 -->
    <img src="tps://pic.imgdb.cn/item/6103916c5132923bf8511d15.jpg" alt="这原本是一个狗头"/>
    <!-- width：指定图片宽度 -->
    <img src="https://pic.imgdb.cn/item/6103916c5132923bf8511d15.jpg" width="150px"/>
    <!-- 图片高度会自动跟随宽度等比例缩放，如果手动设置高度，可能会导致失真 -->
    <img src="https://pic.imgdb.cn/item/6103916c5132923bf8511d15.jpg" width="150px" height="60px"/>
    <!-- 宽度也可用百分比表示，代表占据当前页面的百分比部分 -->
    <img src="https://pic.imgdb.cn/item/6103916c5132923bf8511d15.jpg" width="25%"/>
</body>
</html>

5.超链接

5.1BS架构原理的简单描述

第一步：用户在浏览器地址上输入url。(http://www.baidu.com)

第二步：回车(这一步相当于通过浏览器向服务器发送了一个请求)

请求：request
Browser ---->Server(浏览器向服务器发送数据)

第三步：服务器会给浏览器一个响应，发送一段HTML代码给浏览器，浏览器执行HTML代码，展示一个效果。

响应：response
Server ---->Browser(服务器向浏览器发送数据)

目前用户通过浏览器向服务器发送请求有两种方式：

用户直接在浏览器地址栏输入url，回车。
用户点击网页上的超链接。

两种方式本质上没有区别，但第二种傻瓜式操作更加方便。

5.2在网页上生成超链接

<!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>超链接</title>
</head>
<body>
    <!-- href属性表示：hot references，用来指定链接的路径，这个路径可以是网络上的一个路径，也可以是本地的一个路径 -->
    <!-- href:指定网络链接 -->
    <a href="http://www.baidu.com">网络</a>
    <br>
    <!-- href:指定本地路径 -->
    <a href="10-图片.html">本地</a>
    <br>
    <!-- 可以使用图片做热链接 -->
    <a href="http://www.baidu.com">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度" width="150px">
    </a>
    <br>
    <!-- target属性 -->
    <!-- target属性用来设置最终打开窗口的位置 -->
    <!-- 
		_self：当前窗口
		_blank：新窗口
		_parent：当前窗口的父窗口
		_top：当前窗口的顶级窗口
	-->
    <!-- 默认在当前窗口打开 -->
    <a href="http://www.baidu.com">默认本页面打开</a>
    <br>
    <!-- _self:在本窗口打开 -->
    <a href="http://www.baidu.com" target="_self">本页面打开</a>
    <br>
    <!-- _blank:在新窗口打开 -->
    <a href="http://www.baidu.com" target="_blank">新页面打开</a>
    <hr>
    <!-- 当前窗口的子窗口 -->
    <iframe src="https://www.cnblogs.com/TSCCG/"></iframe>
</body>
</html>

5.3演示超链接的target属性

新建三个html文件，分别代表当前窗口self，当前窗口的父窗口parent和当前窗口的顶级窗口top。

当前窗口的顶级窗口：top

<!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>top</title>
</head>
<body>
    <!-- 代表当前窗口的顶级窗口 -->
    <h2>top</h2>
    <!-- 嵌套当前窗口的父窗口 -->
    <iframe src="11.2parent.html" width="600" height="300"></iframe>
</body>
</html>

当前窗口的父窗口：parent

<!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>parent</title>
</head>
<body>
    <!-- 代表当前窗口的父窗口 -->
    <h2>parent</h2>
    <!-- 嵌套当前窗口 -->
    <iframe src="11.3self.html" width="300" height="150"></iframe>
</body>
</html>

当前窗口：self

<!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>self</title>
</head>
<body>
    <h2>self</h2>
    <!-- 在当前窗口打开 -->
    <a href="https://www.cnblogs.com/TSCCG/" target="_self">self</a>
    <!-- 在当前窗口的父窗口打开 -->
    <a href="https://www.cnblogs.com/TSCCG/" target="_parent">parent</a>
    <!-- 在当前窗口的顶级窗口打开 -->
    <a href="https://www.cnblogs.com/TSCCG/" target="_top">top</a>
</body>
</html>

演示：

6.表格

<!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>表格</title>
</head>
<body>
    <table align="center" border="1" width="600" height="300" cellpadding="0" cellspacing="0">
        <!-- 表头 -->
        <thead>
            <tr>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>员工薪资</th>
            </tr>
        </thead>
        <!-- 表体 -->
        <tbody align="center">
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>3000</td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>4000</td>
            </tr>
            <tr>
                <td>003</td>
                <td>王五</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>004</td>
                <td>赵六</td>
                <td>13000</td>
            </tr>
        </tbody>
        <!-- 表尾 -->
        <tfoot>
            <tr>
                <!-- 跨列 -->
                <td colspan="2">总计</td>
                <td align="center">20000</td>
            </tr>
            <tr>
                <!--跨行合并单元格 -->
                <td rowspan="2">负责人</td>
                <td colspan="2" align="center">阿珍</td>
            </tr>
            <tr>
                <td colspan="2" align="center">阿强</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

7.列表

<!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>列表</title>
</head>
<body>
    <!-- 无序列表 -->
    <h2>无序列表</h2>
    <!-- type属性可以指定位于前面小图标的格式 -->
    <!-- 指定为空心圆点 -->
    <ul type="circle">
        <li>中国
            <!-- 指定为小方块 -->
            <ul type="square">
                <li>河南
                    <!-- 指定为实心圆点 -->
                    <ul type="disc">
                        <li>濮阳</li>
                        <li>南阳</li>
                        <li>郑州</li>
                    </ul>
                </li>
                <li>北京</li>
                <li>上海</li>
                <li>广州</li>
            </ul>
        </li>
        <li>漂亮国</li>
        <li>霓虹国</li>
    </ul>
    <hr>
    <!-- 有序列表 -->
    <h2>有序列表</h2>
    <ol>
        <li>北京奥运会
            <ol type="I">
                <li>乒乓球
                    <ol type="i">
                        <li>单人</li>
                        <li>双人</li>
                    </ol>
                </li>
                <li>排球</li>
                <li>水球</li>
            </ol>
        </li>
        <li>里约奥运会
            <ol type="A">
                <li>乒乓球
                    <ol type="a">
                        <li>单人</li>
                        <li>双人</li>
                    </ol>
                </li>
                <li>排球</li>
                <li>水球</li>
            </ol>
        </li>
        <li>东京奥运会</li>
    </ol>
</body>
</html>

8.表单

8.1表单概述

表单就是用于收集用户数据的。

所有的选项必须都写进form标签里。

form中的action属性类似于超链接中的src，用于指向所要提交数据的服务器地址。

<form action="http://127.0.0.1:8081/crm/register">
    <!-- 内容 -->
</form>

一个页面可以有多个表单。

注意：所有浏览器提交数据的格式都是：

name=value&name=value&name=value&name=value

如：http://127.0.0.1:8081/crm/register?username=zhangsan&password=123
只有带有name属性的数据才能够被提交。
表单中如果有一些项目用户没有填写，提交的就会是空字符串。

8.2注册案例

<!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>注册案例</title>
</head>
<body>
    <!-- 所有浏览器提交数据的格式都是：name=value&name=value&name=value&name=value -->
    <!-- http://127.0.0.1:8081/crm/register?username=zhangsan&password=123 -->
    <!-- 只有带有name属性的数据能够被提交 -->
    <!-- 表单中如果有一些项目用户没有填写，提交的就会是空字符串 -->
    <form action="http://127.0.0.1:8081/crm/register">
        <!-- 用户名 -->
        <!-- type属性选择text输入文本框,value属性不需要设置，由用户输入 -->
        <!-- maxlength：最多输入10个字符 -->
        用户名<input type="text" name="username" maxlength="10">
        <br>
        <!-- 用户密码 -->
        <!-- type属性选择password密码文本框,value属性不需要设置，由用户输入 -->
        用户密码<input type="password" name="password" maxlength="20">
        <br>
        <!-- 性别 -->
        <!-- radio：单选框，只能选择一个选项，且所有选项name必须相等，同时需要程序员设置value的值 -->
        性别
        <input type="radio" name="sex" value="1">男
        <!-- checked：设置默认选项 -->
        <input type="radio" name="sex" value="0" checked>女
        <br>
        <!-- 兴趣爱好 -->
        爱好
        <!-- checkbox：复选框，同样所有选项的name都必须一致，value的值需要提前设置 -->
        <input type="checkbox" name="hobby" value="smoke">抽烟
        <input type="checkbox" name="hobby" value="drink" checked>喝酒
        <input type="checkbox" name="hobby" value="firehair">抽烟
        <br>
        <!-- 现居住地 -->
        现居住地
        <!-- 国家 -->
        <!-- 下拉列表 -->
        <select name="country">
            <option>请选择国家</option>
            <!-- selected属性：表示在下拉表单里设置默认选项 -->
            <option value="China" selected>中华人民共和国</option>
            <option value="America">美国</option>
            <option value="England">英格兰</option>
        </select>
        <!-- 市 -->
        <select name="city">
            <option>请选择市</option>
            <option value="Beijing" selected>北京</option>
            <option value="Shanghai">上海</option>
            <option value="Guangzhou">广州</option>
        </select>
        <br>
        <!-- 文本域 -->
        <!-- value由用户书写 -->
        简介：
        <br>
        <!-- cols代表能一行能写30个字，rows代表显示2行 -->
            <textarea name="introduce"cols="30" rows="2"></textarea>
        <br>
        <!-- 提交表单 -->
        <!-- 提交按钮不能有name属性，不然会将按钮的value一并发送到服务器端 -->
        <input type="submit" value="注册">
        <!-- 重置表单 -->
        <input type="reset">
    </form>
</body>
</html>

点击注册，浏览器就会把用户输入的数据提交给服务器：
http://127.0.0.1:8081/crm/register?
username=zhangsan
&
password=123
&
sex=1
&
hobby=smoke
&
hobby=drink
&
country=China
&
city=Beijing
&
introduce=%E6%B3%95%E5%A4%96%E7%8B%82%E5%BE%92

8.2file控件

向后台发送文件

<!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>file</title>
</head>
<body>
    <!-- 后台java程序会以IO流的方式接收这个文件 -->
    <form action="http://www.baidu.com">
        选择文件：
        <input type="file">
        <br>
        <input type="submit" value="上传文件">
    </form>
</body>
</html>

8.3隐藏域控件

不希望用户在浏览器看到，但是希望可以将这个数据提交过去。

<!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>hidden隐藏域</title>
</head>
<body>
    <!-- hidden隐藏域控件 -->
    <form action="http://www.baidu.com">
        <!-- 没有使用隐藏域 -->
        <input type="text" name="usercode1" value="123">
        <br>
        <!-- 使用隐藏域 -->
        <input type="hidden" name="usercode2" value="456">
        <br>
        <!-- 提交表单 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

点击提交按钮后，将隐藏的数据也一并提交了

https://www.baidu.com/?
usercode1=123
&
usercode2=456

8.4readnly和disabled

readonly和disabled修饰的数据都是只读的，

readonly可提交，

disabled不可提交。

<!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>readonly和disabled</title>
</head>
<body>
    <form action="http://127.0.0.1:8082/crm/save">
        机构代码：<input type="text" name="orgcode" value="123" readonly>
        <br>
        用户代码：<input type="text" name="usercode" value="456" disabled>
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

提交的数据：
http://127.0.0.1:8082/crm/save?orgcode=123

9.HTML元素的id属性

1.在HTML中任意一个节点上，都有一个id属性。

2.在同一个网页上，id属性不可重复。

3.id代表了这个节点，相当于是该节点的身份证号。

4.后期在JavaScript中，要对HTML的节点进行增删改，需要先获取该节点对象。

id属性可以让我们方便地获取到该节点对象。

<!DOCTYPE html>
<html lang="en" id="myhtml">
<head id="myhead">
    <meta charset="UTF-8" id="charset">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="mytitle">HTML元素的id属性</title>
</head>
<body id="mybody">
    <ul id="myul">
        <li id="myli1">1</li>
        <li id="myli2">1</li>
    </ul>
    <form action="http://www.baidu.com" id="myform">
        <input type="text" name="username" id="username">
    </form>
</body>
</html>

HTML其实是一棵树：

10.div和span

1.div和span都是图层(div和span都是盒子)

什么是图层？
- 类似于ps里的图层。
- 每一个图层在网页中都是一个独立的盒子。
- 图层的最主要作用就是：网页布局。
现在为什么不用table布局？
- table布局的话，不灵活。
- 用div和span布局更加灵活。

2.每一个div和span的左上角定点，都有x和y轴的坐标，通过这个坐标可以定位div和span在网页中的位置。后面可以通过css样式进行定位。

3.div和span的区别：

div默认情况下独占一行。
span不会独占一行。

<!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>div和span</title>
</head>
<body>
    <div>
        div
    </div>
    <div>
        <span>span</span>
        <span>span</span>
        <span>span</span>
    </div>
</body>
</html>

posted @ 2021-07-30 22:13 TSCCG 阅读(57) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

TSCCG

HTML_02HTML总结

HTML_02HTML总结

1.基本标签

1.1标题标签

1.2段落标签和换行标签

1.3水平线

1.4预留标签

1.5文本格式化标签

1.6右上角加字和右下角加字

1.7字体标签

2.实体符号

3.背景颜色和背景图片

3.1背景颜色

3.2背景图片

4.图片

5.超链接

5.1BS架构原理的简单描述

5.2在网页上生成超链接

5.3演示超链接的target属性

6.表格

7.列表

8.表单

8.1表单概述

8.2注册案例

8.2file控件

8.3隐藏域控件

8.4readnly和disabled

9.HTML元素的id属性

10.div和span

公告