HTML--day02

最新推荐文章于 2024-09-14 15:26:51 发布

.桃子摇摇冰

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量361

点赞数 7

分类专栏：基本标签 html 文章标签： html linq

本文链接：https://blog.csdn.net/weixin_48675760/article/details/124988866

版权

基本标签同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

一、列表标签

无序列表

<ul>

</ul>

有序列表

</ol>

type类型 start 开始

自定义列表

<dl>

<dt>可以是文字也可以是图</dt>

</dl>

1、有序列表

    <!-- 有序列表 -->
    <!-- 
        1.li里面可以随意放标签，但是ol里面只能放li  
        2.数字是自动生成的
        3.type: 1 I A a i
        4.start:开始序号
    -->
    <ol>
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>
    <hr noshade>
    <ol type = "A"  start = "3">
        <li>ddd</li>
        <li>yia shia</li>
        <li>shiih eid</li>
    </ol>

2、无序列表

    <!-- 无序列表 -->
    <!-- 
        1.ul里面只能放li,li里面可以放其他标签
        2.默认的是黑色的实心圆
        3.type:disc,circle square none(用的多)
     -->
    <ul>
        <li>1234xu</li>
        <li>jjien</li>
        <li>jiemmoos</li>
    </ul>
    <hr noshade>
    <ul type = "circle">
        <li>1234xu</li>
        <li>jjien</li>
        <li>jiemmoos</li>
    </ul>

    <ul type = "square">
        <li>1234xu</li>
        <li>jjien</li>
        <li>jiemmoos</li>
    </ul>

    <ul type = "none">
        <li>1234xu</li>
        <li>jjien</li>
        <li>jiemmoos</li>
    </ul>

3、自定义列表

    <!-- 自定义列表 -->
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>

    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>

示例图片：

二、图片标签

1、路径的分类

①绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如bg.jpg"这个图片是存放在硬盘的“E.Nlbook\网页布局代码\第2章"目录下，那么“bg.jpg"这个图片的绝对路径就是"E:\book\网页布\代码\第2章lbg.jpg"。

注意：绝对路径在实际的开发过程中很少去使用，如果使用"E:\bookl网页布\代码\第2章\bg.jpg"来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用""\"或“/”字符作为目录的分隔字符

②相对路径

相对路径，就是相对于自己的目标文件位置。当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名;<img src="pic4.gif" />

2、图片标签

<img src = "图片路径" title = "鼠标悬停上去之后的提示信息" alt = "图片不显示之后（加载失败）的提示信息" width = "" height = "">

①同级目录

<body>
    <!-- 
        同级目录
        1.1.webp
        2../1.webp-----.当前目录下
        3.D:\VSC\img\1.webp---绝对路径（一般不使用）
     -->
    <img src="1.webp" alt="">
    <img src="./1.webp" alt="">
    <!-- <img src="D:\VSC\img\1.webp" alt=""> -->

    <img src="codeimg/3.webp" alt="">
    <img src="./codeimg/3.webp" alt="">
</body>

②多级目录

<body>
    <!-- ..----相当于往前退两级目录 -->
    <!-- 往前退两级目录，在目录codeimg中找图片2.webp -->
    <img src="../codeimg/2.webp" alt="">
    <img src="../1.webp" alt="">
</body>

③图片属性

a. alt = ""(图片不显示之后（加载失败）的提示信息)

b. title = ""(鼠标悬停上去之后的提示信息)

c. width/height = ""(宽高)

注：图片加载失败时，鼠标悬停在上面是会显示图片的提示信息

<body>

    <img src="11.webp" title = "玫瑰花" alt="请尝试刷新页面">
    <img src="1.webp" title = "玫瑰花" alt = "请尝试刷新页面">

    <img src="1.webp" width = "300px" height = "200px">
    <!-- 只写宽度/高度时，图片会等比例缩放 -->
    <img src="1.webp" width = "100px" >
</body>

示例图片:

三、费曼学习技巧案例

<body>
    <h1>世上最强学习方法——费曼学习法（深度学习）</h1>
    <p>作者:秋小曦 2017.04.10 字数：1086 阅读：19865</p>
    <h3> 一、选择目标领域，并完全了解这个概念</h3>
    <p>
        将需要学习的概念写在纸上，尽可能的去熟悉这个概念。<br>
        <ol>
            <li>一定要将自己脑海的语言组织出来并反应在书面上</li>
            <li>如果写不出来再回去看哪里不懂</li>
        </ol>
    </p>
    <h3>二、向别人复述这个概念</h3>
    <p>
        &emsp;&emsp;向身边人复述一遍你所学习到的知识，如果没有，就只好假装自己是一个老师（脑洞少女的日常），<br>
        向学生复述这个概念，记住，尽量使用简单的语言，这一步是为了让你更好的融入自己的理解。在复<br>
        述时，一定会在所难免的会卡住，或者结巴，叙述不完整。这时候，恭喜你，喜提知识概念薄弱点。<br>
        这时候，将这些薄弱点重新学习巩固一遍，直到真正理解。
    </p>
        <img src="3.png" title = "费曼学习法" alt="请刷新页面" width="500" >
    <p>
        &emsp;&emsp;<strong>费曼学习法是我大学时经常使用的学习方法，适合较短时间内深入学习（期末考试抱大腿），</strong>对于这<br>
        个方法有点相见恨晚的感觉。最初是来自理查德·菲利普斯·费曼（美籍犹太裔物理学家，加州理工学<br>
        院物理学教授，1965年诺贝尔物理奖得主）。在教育方面，其最大的贡献在于费曼技巧，也就是说能<br>
        够用最单的语言介绍任何概念，无论这个概念多么复杂。
    </p>
        <img src="2.png" title = "费曼学习法四步" alt="请刷新页面" width="500">
    <p>&emsp;<strong>费曼学习法的具体步骤，很简单</strong></p>
    <ol>
        <li>确定学习目标</li>
        <li>模拟教学学习法</li>
        <li>回顾</li>
        <li>简化</li>
    </ol>
</body>

示例图片：

四、超链接标签

能够实现不同页面的跳转

<a href = "路径" title = "鼠标悬停上去之后的提示信息" target = "规定在何处打开文档" >

内容

</a>

①href

点击，跳转到什么地方去（可以是已知网站，也可以是自己写的）

注意：没有访问过时默认时蓝色的，访问过后时紫色的（可以改变颜色）

②target

Target属性：规定在何处打开文档

A：target = "_self" 默认值

B：target = "_blank" 新窗口打开

③图片跳转

直接将图片标签嵌套在a标签里面

<a href="day02--费曼学习法.html" target = "_blank"><img src="3.png" alt="" width="300">

</a>

<body>
    <!-- 没有访问过时默认时蓝色的，访问过后时紫色的(可以改变颜色) -->
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.baidu.com/" target = "_blank">百度</a>

    <a href="day02--费曼学习法.html" target = "_blank">费曼学习法</a>

    <a href="day02--费曼学习法.html" target = "_blank" title = "费曼学习法查询"><img src="3.png" alt="" width="300"></a>
</body>

五、table表格

1、数据表格的创建

    <table><!-- 创建表格 -->         
        <tr><!-- tr 表示行 --> 
            <td>1</td><!-- td 表示单元格 --> 
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

注意：这样子创建只有简单的内容显示，没有框架等。

2、表格的属性

a.宽度：width（单元格的宽度，内容长度一样是等分，内容不一样是自动的）

b.高度：height（单元格的高度）

c.边框：border（控制外边框的像素）

d.边框颜色：bordercolor

e.背景颜色：bgcolor

f.水平对齐：align = "left或right或center"

g.cellspacing = "单元格与单元格之间的间距"

h.cellpadding = "单元格与内容之间的空隙"

    <!-- width 单位：px,百分比(相对于父元素的) -->
    <!-- height 单位：px,百分比（相对于父元素的） -->
    <table border = "1" width = "300"  height = "200" 
    align = "center" bordercolor = "red"
    bgcolor = "green" cellspacing = "0"
    cellpadding = "10"><!-- 创建表格 -->         
        <tr><!-- tr 表示行 --> 
            <td>1</td><!-- td 表示单元格 --> 
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

前后对比：

3、行tr的属性

a.高度：height

b.背景颜色：bgcolor

c.文字对平对齐：align = "left或right或center"（单元格中的内容）

d.文字垂直对齐：valign = "top或middle或bottom"

    <table border = "1" width = "300"  height = "200" 
    cellspacing = "0" cellpadding = "10">
        <tr bgcolor = "blue" height = "100" align = "center" valign = "top">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

4、单元格td的属性

a.宽度：width

b.高度：height

c.背景颜色：bgcolor

d.文字水平对齐：align = "left或right或center"

e.文字垂直对齐：valign = "top或middle或bottom"

    <!-- td：如果一个单元格设置宽度，影响的是这一整列的宽度  -->
    <!-- td：如果一个单元格设置高度，影响的是这一整行的高度  -->
    <table border = "1" width = "300"  height = "200" 
    cellspacing = "0" cellpadding = "10">
        <tr bgcolor = "blue" height = "100" align = "center" valign = "top">
            <td width = "200">1</td>
            <td height = "100" >2</td>
        </tr>
        <tr>
            <td bgcolor = "red" align = "right" valign = "top">3</td>
            <td>4</td>
        </tr>
    </table>

5、表格合并

Colspan = "所要合并的单元格的列数"——必须给td

Rowspan = "所要合并的单元格的行数"——必须给td

注意：要将被挤出去的单元格注释掉

    <table border="1" cellspacing="0" width="300" height="300">
        <tr>
            <td>不毛</td>
            <td>魏国</td>
            <td>辽东</td>
        </tr>
        <tr>
            <td>蜀国</td>
            <td>西凉</td>
            <td>幽州</td>
        </tr>
        <tr>
            <td>南中</td>
            <td>吴国</td>
            <td>荆州</td>
        </tr>
    </table>

    <table border = "1" cellspacing = "0"width = "300" height = "300">
        <tr>
            <td>不毛</td>
            <td colspan="2" rowspan="2">魏国</td>
            <!-- <td>辽东</td> -->
        </tr>
        <tr>
            <td rowspan="2">蜀国</td>
            <!-- <td colspan="2">西凉</td> -->
            <!-- <td>幽州</td> -->
        </tr>
        <tr>
            <!-- <td>南中</td> -->
            <td colspan="2">吴国</td>
            <!-- <td>荆州</td> -->
        </tr>
    </table>

6、表格案例

    <table border="1" cellspacing="0" width="500" height="200">
        <tr height="50" align="center">
            <td width="130">会员姓名</td>
            <td width="200"></td>
            <td width="130">出生日期</td>
            <td width="200"></td>
        </tr>
        <tr height="50" align="center">
            <td>身份证号</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr height="50" align="center">
            <td>通信地址</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr height="50" align="center">
            <td>练习电话</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr height="50" align="center">
            <td>会员卡号</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
    </table>

7、表单标签

什么是表单？

表单的作用：收集用户信息

<form method = "get或者post" action = "向何处发送表单数据">

        <input/>

                A.属性 type定义输入框的类型

                        a）文本框 type = "text" 密码框 type = "password"

                        b）提交框 type = "submit" 和 <button>提交按钮</button>一样

                        c）按钮框 type = "button"单纯的按钮

                        d）重置框 type = "reset"清空的效果

                B.属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上

                C.属性 name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器

                D.value

</form>

注意：Form当中method的post和get的区别？

        1. get是从服务器上获取数据，post是向服务器传送数据。
        2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
        3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4 (InternetInformation Service互联网信息服务）中最大量为80KB，IIS5中为100KB

5.get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

<body>
    <form action="http://www.baidu.com/" method="POST">
        用户信息：<input type="text" placeholder="请输入你的用户名，注意大小写"
        name="username">
        <br>
        密码：<input type="password" placeholder="请输入密码" name="passwd">
        <br>
        <!-- <input type="submit" value="登录"> -->
        <button type="submit">登录</button>
        <!-- 提交信息到 action指定的地址  -->


        <input type="reset" value="重新输入">
        <!-- 普通按钮 -->
        <input type="button" value="aaa">
    </form>
</body>

GET于POST对比：

用户姓名和密码显示出来了