其他分享
首页 > 其他分享> > 2021-04-11

2021-04-11

作者：互联网

html5知识点总结

idea中创建一个html文件
基本样式：

<!DOCTYPE html>  <!--向浏览器声明使用html规范-->
<html lang="en">
<head>  <!--head包含了所有的头部标签元素。可插入脚本（scripts）, 样式文件（CSS），及各种meta信息。-->
    <meta charset="UTF-8">   <!--meta标签描述了一些基本的元数据。-->
    <title>Title</title>
</head>
<body>

</body>
</html>

body中写网页内容
标题标签

<body>
<h1>一</h1>
<h2>二</h2>
<h3>三</h3>
<h4>四</h4>
<h5>五</h5>
<h6>六</h6>
<body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<h1>一</h1>
<h2>二</h2>
<h3>三</h3>
<h4>四</h4>
<h5>五</h5>
<h6>六</h6>
<!--p段落标签-->
<!--br换行标签-->
<p>工作提示：各学院，我校疫苗集中接种工作将于今日结束，请提醒如下事项：</p>
<p>1.还需接种的同学请于三点前到体育馆接种。</p>
<p>2.已接种的同学一定要把接种证保存好，注射第二支疫苗时还要用到接种证。</p>
3.接种前期为手写接种证的同学需要把相关信息补充完整。<br>
4.请各学院及时做好相关数据统计工作，按时完成相关数据报表。
<!--hr水平线标签-->
<hr/>
<hr/>
<!--粗体，斜体-->
<strong>粗体</strong>
<em>斜体</em>
<!--特殊符号-->
空&nbsp;&nbsp;格
1&nbsp;&nbsp;&nbsp;2<!--&nbsp;&nbsp;空格-->
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权所有韦老六<!--&copy;版权符号-->

</body>
</html>

图像引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址
相对地址，绝对地址
../ --上一级目录

-->

<!--img src= 放的是图像路径，alt放的是图片没加载出来的代替文字  -->
<img src="../resources/img/1.jpg" alt="账号密码" title="悬停文字" width="300"height="300">
<a href="4链接标签.html#zhong"><img src="../resources/img/1.jpg" alt="账号密码" title="悬停文字" width="300"height="300"></a>
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<a name="top">顶部</a>
<a href="#down">去底部</a>

<!--a超链接标签
href: 必填，表示要跳转到的那个页面url
target：表示窗口在哪里打开
    _blank   在新标签页中打开
        _self 在自己的网页中打开


-->

<a href="second.html" target="_blank">跳转到页面html</a>
<a href="https://www.baidu.com" target="_self">跳转到百度</a>
<h2 >微信名：Mark-Tao-Tao</h2>
<!--锚链接
要有#top （加标记点）
标记点 ：<a name="top">顶部</a>
页面内跳转和页面间跳转

-->
<a href="#top">回到顶部</a><a name="down"></a>
<a href="#zhong">回到中部</a>
<!--功能性链接
邮件链接：mailto：123123.@qq.com
QQ
-->

<a href="mailto:2623218691@qq.com">联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="加我领取100万" title="加我领取100万"/></a>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
    <link rel="stylesheet" href="../css/001.css">
</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前段</li>
    <li>C/C++</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前段</li>
    <li>C/C++</li>
</ul>
<hr/>

<!--自定义列表
dt:标签
dt:列表名称
dd:列表内容-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>linux</dd>
    <dd>c</dd>
    <dd>c++</dd>
    <dt>位置</dt>
        <dd>广西</dd>
        <dd>广东</dd>
        <dd>天津</dd>

</dl>

</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="lpx">
    <tr>
<!--        跨列 colspan

-->
        <td colspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>

    <tr>
<!--        跨行rowspan="2"  跨两行-->
        <td>2-1</td>
        <td rowspan="2">2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>

    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>

</table>
</body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--src  资源路径-->
<!--controls 控制条-->
<!--autoplay 自动播放
title 鼠标悬停提示-->
<video src="../resources/video/123.mp4"  controls autoplay>播放废狗明</video>
<audio src="../resources/audio/Mojito.mp3" controls autoplay></audio>

</body>
</html>

页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<!--
header标题太不区域的内容
footer标记脚部区域的内容
section一块独立区域
article独立的章内容
aside常用于侧边栏
nav导航类辅助内容
-->
<header>
    <h2>网页头部</h2>
</header>

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

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

</body>
</html>

内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套网页 内联框架</title>
</head>
<body>
<iframe src=""  name="hello" frameborder="0" width="800px" height="500px"></iframe>
<a href="4链接标签.html" target="hello"><h2>跳转</h2></a>
<!--iframe 内联框架
src 地址
name  框架标识名


-->
</body>
</html>

知识点综合运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人博客</title>
<!--    导入CSS文件link-->
    <link rel="stylesheet" href="../css/001.css">


</head>
<body>
<form action="5列表.html" method="get">


<div class="demo">
    <a href="1myfirst.html" class="a1" >韦</a>
    <a href="2second.html" class="a2">老</a>
    <a href="2second.html" class="a3">六</a>
    <a href="4链接标签.html" class="a4">主</a>
    <a href="../resources/img/1.jpg" class="a5" >页</a>
    <a href="1.jpg" class="a6">面</a>
</div>
   <<div class="demo2">
        <img src="../resources/img/2.jpg" alt="">
    </div>
    <br>
<hr/>
<hr/>
<p class="p3">
    <input type="button" name="btn1" value="这是按钮一个摆设">
    <input type="search" name="username" placeholder="输入韦老六的真名" maxlength="3" required>
    <input type="password" name="pwd" placeholder="韦老六的学号" maxlength="8" required>
</p>

<p class="p1">
    <input type="radio" value="wst" name="name"  checked>张飞
    <input type="radio" value="ltt" name="name"> 关羽
</p>
<p id="p2">
    国籍： <select name="country" >
    <option value="china">中国</option>
    <option value="japen" selected>日本</option>
    <option value="usa">美国</option>
    <option value="susu">苏联</option>
</select>
</p>
<p class="p2">
    会的技能&nbsp;         <input type="checkbox"  value="java" name="technolege" checked>java <br>
                     <input type="checkbox"  value="c" name="technolege" >c语言 <br>
                     <input type="checkbox"  value="ssm" name="technolege" >ssm <br>
                     <input type="checkbox"  value="springboot" name="technolege" >springboot <br>
                     <input type="checkbox"  value="mysql" name="technolege" >mysql <br>
                     <input type="checkbox"  value="qian" name="technolege" >前端基础
</p>
    <div class="demo3">
        1. Java核心方面，集合，多线程，异常处理，IO，JDBC，面向对象技能，大概率会问到，其它的没提到的，比如图形化界面，NIO，Socket网络编程，甚至Applet之类的，不会问到。<br>

        2. 数据库方面，会写增删改查的SQL语句，知道存储过程之类的概念，会通过索引优化查询条件，会建表，会些诸如子查询,group by,having，表关联查询等基本SQL技能，这里请注意，至少得用过一种商业化数据库。<br>

        3. 框架方面，需要有Spring+Spring MVC+mybatis框架的实际操作能力（不是商业项目开发能力），至于有Spring Boot或Spring Cloud，那更好了。<br>

        4. 综合技能方面，能知道基本的数据结构知识（线性表外带排序外带一些树的技能），基本的操作系统知识（一般仅限于线程进程概念），基本网络通讯知识（一般仅限于网络通讯模型和tcp udp协议），但这仅仅是“需要知道”而已。

    </div>
<div  class="demo4">
    <textarea name="tall" id="123" cols="30" rows="10" placeholder="写一段你想对韦老六说的话" required></textarea>
</div>
<p class="p4">你对韦老六的评价
    <input type="range" name="range" max="100" min="0" >
</p>
<p class="p3" >
    输入你的邮箱： <input type="email" name="email" placeholder="XXX@qq.com">
</p>

    <p class="demo5">
        <input type="submit" name="submit" value="OKK">
        <input type="reset" name="reset" value="重置">
    </p>
<!--    target新页面的打开方式-->
    <p class="demo5"><a href="https://www.baidu.com" target="_blank"><butten>去百度</butten> </a>&nbsp;&nbsp;
        <a href="6表格学习.html"><butten>去看看表格</butten></a>

    </p>
    <p > <a href="4链接标签.html#down"><img src="../resources/img/5.jpg" alt="图片未加载" title="快点我" width="160" height="80" ></a></p>
<div class="p5"><a href="../resources/video/123.mp4" controls autoplay><img src="../resources/img/1.jpg" alt="图片未加载" ></a></div>
</form>
<div class="wechat"><a href="4链接标签.html"><img src="../resources/img/6.jpg" alt=""></a></div>
</body>
</html>

标签：11,接种,java,04,Spring,2021,跳转,页面,nbsp
来源： https://blog.csdn.net/yalisada/article/details/115608780