HTML_img_a href_ol/ul/dl_table_video/audio__header/section/footer_form/method action 20230421

iehmltym

已于 2023-04-21 07:35:05 修改

阅读量198

点赞数

分类专栏： HTML2023 文章标签： html 媒体 java

于 2023-04-21 07:31:47 首次发布

本文链接：https://blog.csdn.net/qq_53433382/article/details/130279542

版权

HTML2023 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML_图像_链接_列表_表格_媒体_表单img_a href_230420

一、图像标签img

1。 src="图片地址"必须

相对地址（推荐），绝对地址
../ ---表示上一级目录 相对路径
../resources表示回到上一级HTML_0419目录

2。alt="加载失败的图片说明必须

alternative 可替换的 "

3。title=“悬停文字”

4。width = "图片宽度 "

5。height = “图片高度”

6。 idea 中，<img>内空格后会出现待选下拉框

src=“相对路径” alt=加载失败的图片说明两项为必填 >;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title3.图像标签学习</title>
<!--    要养成良好的编程习惯，在项目文件下建立resources资源目录文件夹
建立image 图片文件夹 -->

    <img 
    src="../resources/image/image00.jpeg " 
    alt="加载失败_电影截屏"
    title="我是title=的悬停文字,多悬会"  
    width="256" height="256" >
    
</head>
<body>

</body>
</html>

二、链接标签a href=“”

超链接

1.页面间链接

 从一个页面链接到另一个页面

2.锚链接

在a标签+name=锚点 name=top top就是标记name的名称

<a name="top">梦开始的地方</a><br/>
<a href="#top">回到顶部</a>

3. 功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title4。链接标签 </title>
</head>
<body>
<!--在a标签+name=锚点 name=top top就是标记name的名称-->
<a name="top">梦开始的地方</a><br/>
<a href="#down">去底部</a>
<!--链接标签 <a href=" "   > </a>-->
<!--链接标签快捷键 a + tab = <a href=""></a>  -->
<!--代码格式化快捷键 / 代码整理快捷键 option+command+L -->

<a href="1.我的第一个网页.html"> 点击我跳转至我的信息茧房</a><br/>
<a href="https://www.bilibili.com">点击我跳转至b站</a><br/>
<!--超链接—1。页面间链接-->
<!--
a标签的href+img = 图片超链接，必填，表示要跳转到哪个页面
target= 表示窗口在哪里打开
    _blank 在新标签页中打开
    _self 在现有标签页中打开

-->
<p>
    <a href="1.我的第一个网页.html" target=_blank>
        <img src="../resources/image/image00.jpeg" alt="加载失败_电影截图" title="我是图片超链接">

    </a>

</p>
<p>
    <a href="1.我的第一个网页.html" target=_blank>
        <img src="../resources/image/image00.jpeg" alt="加载失败_电影截图" title="我是图片超链接">

    </a>

</p>
<p>
    <a href="1.我的第一个网页.html" target=_blank>
        <img src="../resources/image/image00.jpeg" alt="加载失败_电影截图" title="我是图片超链接">

    </a>

</p>


<!--太长的代码块可以折叠起来-->
<!--超链接—2。锚链接-->
<!--href超链接跳转至锚点时，#+所标记的锚点的命名 打开页面时就是锚点位置
在URL后面直接#+a标签内锚点
如http://localhost:96742/HTML5_20230419/HTML2023/4.%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE.html?_ijt=9dhhueuk1h4cb1h7puer5mothb#down-->

<a href="#top">回到顶部</a>
<a name="down">已结束</a>

<!--超链接—3。功能性链接-->
<!--a标签内 href超链接+mailto： + 邮箱地址
会触发系统的邮箱应用程序，自动打开发邮件界面
qq 则搜索QQ推广/推广工具/选择组件样式/设置提示语/复制代码至-->
<a href="mailto:iehmltym@gmail.com">点击联系我</a>


</body>
</html>

4. 行内元素和块元素

块元素

无论内容多少，该元素独占一行
(p、h1-h6…)

行内元素

内容撑开宽度，左右都是行内元素的可以在排在一行
( a . strong . em …

三、列表ol/ul_li;dl_dt_dd

1. 什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

2. 列表的分类

1. 有序列表

2. 无序列表

3. 定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title5。列表学习</title>
</head>
<body>

<!--有序列表ol /ol= order list -->
<ol>
    <li>Mysql</li>
    <li>Html/CSS</li>
    <li>JavaScript</li>
    <li>Java</li>
    <li>框架</li>
    <li>PHP</li>
    <li>AWS</li>
    <li>Azure</li>

</ol>
<hr/>
<!--无序列表 ul /ul ：unordered list -->

<ul>
    <li>Mysql</li>
    <li>Html/CSS</li>
    <li>JavaScript</li>
    <li>Java</li>
    <li>框架</li>
    <li>PHP</li>
    <li>AWS</li>
    <li>Azure</li>

</ul>
<hr/>
<!--自定义列表dl /dl：defintion list -->
<!--自定义列表：
dl 标签
dt 术语
dd 描述
用途：公司网页的底部
-->
<dl>
    <dt>学习资料</dt>
    <!--   dt /dt：defintion title 自定义标题-->
    <dd>MySql</dd>
    <dd>Html/Css</dd>
    <dd>JavaScript</dd>
    <dd>Java</dd>
    <!--   dd /dd 定义描述：Definition Description-->
    <dt>测试题</dt>
    <dd>MySql</dd>
    <dd>Html/Css</dd>
    <dd>JavaScript</dd>
    <dd>Java</dd>
</dl>
</body>
</html>

四、表格table+border_tr3>td4_col/rowspan

1. 为什么使用表格

简单通用

结构稳定

2. 基本结构

单元格

行列

跨行(合并单元格)

用行右膨胀跨列，在td列标签的开始标签内写要侵几列单元格 colspan=“4” 要侵四列

跨列(合并单元格)

想下膨胀跨行，在td标签的开始标签内写跨行 rowspan=“2” 要向下侵两行
td rowspan=“2” 我rowspan="2"跨列了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title之6。表格学习</title>
</head>
<body>
<!--表格table-->
<!-- table块元素内块元素 ：行rows tr-->
<!-- table块元素内块元素 ：列tabledata 单元格数据 -->
<!--&lt;!&ndash;table 的开始标签内 border="1px" 设置表格边框&ndash;&gt;-->

<table border="1px">

    <!--
     table /table块元素内
     tr*3>td*4 +Tap= 直接生成3行4列

    -->

    <tr>
        <!--用行右膨胀跨列，在td列标签的开始标签内 写要侵几列单元格 colspan="4" 要侵四列-->
        <td colspan="4">我colspan="4"跨行了</td>
    </tr>
    <tr>
        <!--想下膨胀跨行，在td标签的开始标签内 写跨行 rowspan="2" 要向下侵两行-->

        <td rowspan="2">我rowspan="2"跨列了</td>

        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

<table border="1">
<!--    align="center"居中对齐-->
    <tr>
        <td colspan="3" align="center">出勤表</td>
    </tr>
    <td rowspan="2">张三</td>
    <td>一月</td>
    <td>100%</td>
    </tr>
    <tr>
        <td>二月</td>
        <td>100%</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>一月</td>
        <td>90%</td>
    </tr>
    <tr>
        <td>二月</td>
        <td>80%</td>
    </tr>

</table>


</body>
</html>

五、视频和音频video_audio+controls

controls 视频控件
autoplay 自动播放
muted 关闭声音（某些高版本浏览器才能自动播放）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title7。媒体元素学习</title>
</head>
<body>
<!--音频和视频-->
<!--
controls 视频控件
autoplay 自动播放
muted 关闭声音（某些高版本浏览器才能自动播放）-->

<!--<video src="../resources/vedio/vedio_0420.mp4" controls muted  autoplay ></video>-->
<audio src="../resources/audio/audio_0420.mp3" controls muted autoplay ></audio>
</body>
</html>

六、页面结构分析header_section_footer

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域
footer	标记脚部区域的内容(用于整个页面或页面的一块区域
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用(常用于侧边档)
nav	导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title8。页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2></header>
<section>
    <h2>网页主体</h2></section>
<footer>
    <h2>网页脚部</h2></footer>

</body>
</html>

七、表单语法form_method action

1. form开始标签 method=“post|get” 表单提交方式必须

post|get ：规定如何发送表单数据常用值

get方式提交：在url中即可看到提交的信息，高效但不安全
post提交，则在url标签中没有输入参数，比较安全
但是在提交前审查/network/Payload/Form Data 可以看到发送的数据包/

username: 张三
pwd: 987654321
但是通过加密技术，可以将此处的信息进行加密
在Headers 中可以看到数据请求提交的Request URL，即src 地址。

2. form开始标签 action：表示向何处发送表单数据必须

action=""必填表单信息提交的位置，可以是网站也可以是一个请求处理地址
Request Method ：POST

示例表单

<form method="post" action="result.html">
<p>名字: <input name="name" type="text" > <p>
<p>密码: <input name="pass" type="password" > <p>
<input type="submit" name="Button" value="提交"><input type="reset" name="Reset" value="重填“>
布
</form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title10。表单学习——登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form-->
<!--要注意 一个完整的form标签，闭合标签应该将所有控件标签包含其中 -->
<!--action=""必填 表单信息提交的位置，可以是网站 也可以是一个请求 处理地址
method="post/get" 提交方式，
get方式提交：我们可以在url中看到我们提交的信息，高效但不安全
而用post提交，则在
url标签中<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title10。表单学习——登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form-->
<!--要注意 一个完整的form标签，闭合标签应该将所有控件标签包含其中 -->
<!--action=""必填 表单信息提交的位置，可以是网站 也可以是一个请求 处理地址
method="post/get" 提交方式，
get方式提交：我们可以在url中看到我们提交的信息，高效但不安全
而用post提交，则在
url标签中 没有输入参数，比较安全-->

<form action="1.我的第一个网页.html" method="post">
    <!--input 输入框 默认是文本 即type默认 ="text"-->
    所有的input标签尽量取名字 如name="username"
    <!--用户名 密码-->
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <!--提交 与 重置
    通过p标签将其并入同一个块元素内
    input的开始标签里 type标签里的submit-->
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html> 没有输入参数，比较安全-->


<form action="2.基本标签.html" method="get">
    <p>
        卡号：<input type="number"></p>
    <p> 密码：<input type="password"></p>

    <input type="submit">
    <input type="reset">
    <a href="mailto:iehmltym@gmail.com">点击告诉我密码</a>
</form>

</body>
</html>