web前端学习:HTML5

文章目录

  • 网页页面结构分析
  • 网页基本标签学习
  • 图像标签
  • 列表标签
  • 表格标签
  • 视频与音频标签
  • iframe内联框架
  • 表单(养成加name的习惯)
    • 表单语法与提交方式
    • 表单元素格式
    • ==input里的value属性==
    • 具体的表单元素学习
    • 表单的应用
    • 表单的初级验证(安全性)

web前端学习:HTML5_第1张图片

web前端学习:HTML5_第2张图片
web前端学习:HTML5_第3张图片
web前端学习:HTML5_第4张图片

网页页面结构分析

web前端学习:HTML5_第5张图片

<body>
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>


<footer>
    <h2>网页脚部</h2>
</footer>

</body>

网页基本标签学习

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>2.基本标签学习</title>
</head>


<body>
<!--标题便签-->
<h1>一级标签</h1>
<h2>二级标签</h2>

<!--段落标签:p+tap键-->
    <p>跑得快   跑得快</p>
    <p>两只老虎 两只老虎</p>


<!--水平线标签-->
<hr/>


<!--换行标签-->
跑得快   跑得快<br/>
两只老虎 两只老虎<br/>

<!--粗体标签-->
粗体:<strong>I love you</strong>
斜体:<em>I love you</em>

<!--特殊符号-->&nbsp;&nbsp;<br/>
大于号&gt;<br/>
小于号&lt;<br/>
&copy;版权符号

</body>
</html>

图像标签

web前端学习:HTML5_第6张图片
块元素与行内元素
web前端学习:HTML5_第7张图片

列表标签

web前端学习:HTML5_第8张图片

表格标签

<body>
<!--表格
tr:行标签
td:列标签
-->
<table border="1px">
    <tr>
        <!--colspan:表示跨列-->
        <td colspan="3">1-1</td>
    </tr>

    <tr>
        <!--rowspan:表示跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>

</table>

</body>

视频与音频标签

web前端学习:HTML5_第9张图片
在这里插入图片描述

iframe内联框架

web前端学习:HTML5_第10张图片

<iframe src="" name="hello" frameborder="0" width="100px" height="100px"></iframe>

<!--这里的target不是将窗口跳转到_self或者_blank里,
而是跳转到iframe框架中。相当于在a标签中嵌套使用iframe
-->
<a href="https://www.csdn.net"  target="hello">点击我跳转</a>

<iframe src="https://hao.360.com" frameborder="0" width="100px" height="100px"></iframe>

web前端学习:HTML5_第11张图片
web前端学习:HTML5_第12张图片

表单(养成加name的习惯)

表单语法与提交方式

web前端学习:HTML5_第13张图片
get 和post它们是 HTTP 请求协议的请求方法,而 HTTP 又是基于TCP/IP的关于数据如何在万维网中如何通信的协议,所以 GET/POST 实际上都是 TCP 链接。
***get 和post的区别博文

get提交方式:(url含有提交的信息:不安全)
web前端学习:HTML5_第14张图片

在这里插入图片描述
post提交方式:(url没有提交的信息)
在这里插入图片描述
在这里插入图片描述

表单元素格式

web前端学习:HTML5_第15张图片

input里的value属性

web前端学习:HTML5_第16张图片

具体的表单元素学习

web前端学习:HTML5_第17张图片

web前端学习:HTML5_第18张图片
web前端学习:HTML5_第19张图片

表单的应用

web前端学习:HTML5_第20张图片

label for标签的定位功能:增强鼠标光标的可读性
web前端学习:HTML5_第21张图片
web前端学习:HTML5_第22张图片

表单的初级验证(安全性)

web前端学习:HTML5_第23张图片
web前端学习:HTML5_第24张图片

你可能感兴趣的:(Java学习,前端,html5,html)