Day11

最新推荐文章于 2024-07-06 23:14:34 发布
最新推荐文章于 2024-07-06 23:14:34 发布
阅读量163 收藏
点赞数
文章标签： web html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53409953/article/details/114973475
版权

认识Web

Web标准三层

结构（HTML）、表现(CSS)、行为（JavaScript）

结构：结构用于对网页元素进行整理和分类，咱们主要学习的是HTML
表现：表现用于设置网页元素的办事、颜色、大小等外观样式
行为：网页模型的定义及交互的编写

网页基本信息

<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>

<html lang="en">
<!--head标签标示网页头部-->
<head>
<!--meta标签描述性标签，它用来描述我们网站的一些信息-->
<!--meta一般来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说java，西部开源">
    <meta name="description" content="来这个地方可以学习Java">
    <!--title网页标题-->
    <title>我的第一个网站</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello World！
</body>
</html>

网页基本标签

<!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>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛,一只没有尾巴，</p>
<p>真奇怪，真奇怪，</p>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛,一只没有尾巴，</p>
<p>真奇怪，真奇怪，</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛,一只没有尾巴，<br/>
真奇怪，真奇怪，<br/>
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛,一只没有尾巴，<br/>
真奇怪，真奇怪，<br/>
<!--粗体 斜体标签-->
<h1>字体样式标签</h1>
<strong>I Love You</strong>
<em>I Love You</em>
<br/>
<!--特殊符号-->
空      格：空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
大于：&gt;
<br/>
小于：&lt;
<br/>
版权符号：&copy;
<!--
特殊符号记忆法：
&  ;


-->
</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src：图片地址（相对地址(推荐使用)，绝对地址）
../  ——上一级目录
alt：当图片没有显示时，图片上所显示的内容
title:当鼠标放在图片上所显示的文字
-->
<img src="../resources/image/1.jpg" alt="考试地址" title="悬停文字" width="600" height="300">
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--a标签
href：必填，表示要跳转到哪一个页面
target：表示窗口在那里打开
_blank：在新标签中打开
_self:在自己的网页中打开 是默认的
-->
<a href="我的第一个网页.html" target="_blank">点击跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击跳转到页面二</a>
<br/>
<!--图片超链接-->
<a href="2.图像标签学习.html"><img src="../resources/image/1.jpg" alt="考试地址" title="悬停文字" width="600"
height="300"></a>
<br/>
<p><a href="2.图像标签学习.html"><img src="../resources/image/1.jpg" alt="考试地址" title="悬停文字" width="600"
                                height="300"></a></p>
<p><a href="2.图像标签学习.html"><img src="../resources/image/1.jpg" alt="考试地址" title="悬停文字" width="600"
                                height="300"></a></p>
<p><a href="2.图像标签学习.html"><img src="../resources/image/1.jpg" alt="考试地址" title="悬停文字" width="600"
                                height="300"></a></p>
<p><a href="2.图像标签学习.html"><img src="../resources/image/1.jpg" alt="考试地址" title="悬停文字" width="600"
                                height="300"></a></p>
<!--锚链接--页面间跳转
1.需要一个标记
2.跳转标记
3.前面要写一个#
-->
<a href="#top">回到顶部</a>
<!--从一个页面跳到另一个页面的指定地方-->
<a name="down">down</a>
<!--功能性链接
邮件链接：mailto：
QQ链接：
-->
<a href="mailto：2529126203@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::53" alt="你好加我领取小电影" title="你好加我领取小电影"/></a>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--
表格标签：table
行标签：tr
列标签：td
跨行：rowspan
跨列：colspan
-->
<table border="2px">
    <tr>
        <td colspan="3">&nbsp;&nbsp;&nbsp;学生成绩</td>
    </tr>

    <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>100</td>
    </tr>

    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签学习</title>
</head>
<body>
<!--无序列表
应用范围：导航，侧边栏.....
-->
<ul>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>
<br/>
<!--有序列表
应用范围：试卷，问答....
-->
<ol>
    <li>Java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>
<br/>
<!--自定义列表
dl：标签
dt：列表名称
dd: 列表内容
公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>c</dd>
    <dd>d</dd>
    <dd>e</dd>

    <dt>温州</dt>
    <dt>云南</dt>
    <dt>杭州</dt>
</dl>
</body>
</html>

媒体元素学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src：资源路径
controls：控制条
autoplay：自动播放

-->
<video src=""></video>
<audio src=""></audio>
</body>
</html>

内联框架iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--iframe内联框架
src：地址
w-h：宽度 高度
-->
<iframe src="5.列表.html" frameborder="0" name="hello" width="1000" height="800"></iframe>
<a href="2.图像标签学习.html" target="hello">点击</a>
</body>
</html>

表单

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
</head>
<body>
<!--表单 form
action：表单提交的位置，可以是网站，也可以是一个请求处理的地址
method： post，get 提交方式
 get方式提交：我们可以在url上看到我们提交的信息，不安全，高效
 post：比较安全，传输大文件
-->
<form action="1.基本标签.html" method="post">
<!--文本输入框 input
value 默认属性
maxlength 最长能写几个字符
size=30 文本框的长度
name 表示组 名字一样表示一个组
readonly 只读
disabled 禁选
hidden 隐藏
placeholder 提示信息
required非空判断
pattern 正则表达式
-->
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required maxlength="10" size="30" ></p>
    <p>密码：<input type="password" name="password"  ></p>
    <p>单选框：
<!--这是三个属性必须写-->
        <input type="radio" value="boy" name="sex" disabled />男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <!--多选框
checkbox 多选
他们的name组最好一样
-->
    <p>多选框：
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="eating"  name="hobby"/>吃饭
        <input type="checkbox" value="watching" name="hobby">看电视
        <input type="checkbox" value="playing" name="hobby">玩游戏
    </p>
<!--    按钮
input type="button" 普通按钮
input type="image"  图片按钮
<input type="submit"> 提交按钮
<input type="reset">  清空按钮
-->
    <p>按钮：
        <input type="button" value="点击变长" name="btn1">
<!--        <input type="image" src="../resource/image/1.jpg">-->
    </p>

<!--下拉框，列表框
select
selected 表示默认选项
-->
    <p>国家：
        <select name="国家" >
            <option value="China" selected>中国</option>
            <option value="USA" >美国</option>
            <option value="India">印度</option>
            <option value="Japan">日本</option>
        </select>
    </p>

<!--    文本域-->
    <p>
        <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>
    </p>
<!--    文件域-->
    <p>
        <input type="file" value="文件" name="files">
        <input type="button" value="上传" name="upload">
    </p>

<!--    邮箱验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>

<!--    自定义邮箱-->
    <p>自定义邮箱：
        <input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

    </p>
<!--    url验证-->
    <p>URL:
        <input type="url" name="url">
    </p>
<!--    数字验证
step 数字间隔
-->
    <p>数量：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

<!--    滑块
input type="range"
-->
    <p>音量：
        <input type="range" name="volume" max="100" min="0" step="1">
    </p>
<!--    搜索-->
    <p>搜索：
        <input type="search" name="search">
    </p>

<!--增强鼠标可用性-->

    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">

    </p>



    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

</form>
</body>
</html>

Div和span标签

<div  id="自定义模板名称">.....</div>
<div  class="自定义class名称">.....</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div标签</title>
</head>
<style>
    .jianxi{
        background-color: blue;
        width: 500px;
        height: 100px;
    }

</style>
<body>
    <div id="shengping" class="jianxi">孔子（公元前551年9月28日～公元前479年4月11日），子姓，孔氏，名丘，字仲尼，鲁国陬邑（今山东省曲阜市）人，
    祖籍宋国栗邑（今河南省夏邑县），中国古代思想家、政治家、教育家，<strong><span>儒家学派创始人</span></strong>、“大成至圣先师”。</div>
    <div id="zhuopin">孔子开创私人讲学之风，倡导仁义礼智信。有弟子三千，其中贤人七十二。曾带领部分弟子周游列国十四年，
    晚年修订六经（《诗》《书》《礼》《乐》《易》《春秋》）。去世后，其弟子及再传弟子把孔子及其弟子的言行语录
    和思想记录下来，整理编成《论语》。该书被奉为儒家经典。</div>
    <div id="rongyu">孔子是当时社会上最博学者之一，在世时就被尊奉为“天纵之圣”“天之木铎”，更被后世统治者尊为孔圣人、至圣、至
    圣先师、大成至圣文宣王先师、万世师表。其思想对中国和世界都有深远的影响，其人被列为“世界十大文化名人”之首。
    随着孔子影响力的扩大，祭祀孔子的“祭孔大典”一度成为和中国祖先神祭祀同等级别的大祀。</div>
</body>
</html>

路径

相对路径：

  1. 图像文件和HTML文件位于同一文件夹，只需输入图像文件的名称即可，如""
  2. 图像文件和HTML文件位于下一级文件夹，输入文件夹名和文件名，如""
  3. 图像文件和HTML文件位于上一级文件夹，在文件名之前加入“…/”，如果是上两级，则需使用“…/…/ 以此类推，”如""

绝对路径：

  1. 即使图片在文档中的路径

HTML5新增标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入明星" list="star">
<datalist id="star">
<!--    datalist里面用id 来实现和input的连接 input用list-->
    <option value="Lucas"></option>
    <option value="Simon"></option>
    <option value="L1"></option>
    <option value="Lu"></option>
    <option value="Luc"></option>
    <option value="Sin"></option>
    <option value="Siome"></option>
</datalist>

<!--fieldset 和 legend 搭配使用-->
<fieldset>
    <legend>用户名</legend>
</fieldset>
</body>
</html>

表单综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <fieldset>
        <legend>学生档案</legend>
        <label >姓名:<input type="text" placeholder="请输入学生姓名" /></label><br/><br/>
        <label>电话：<input type="tel"/></label><br/><br/>
        邮箱：<input type="email"/><br/><br/>
        所属学院：<input type="text" placeholder="请选择学院" list="school" />
        <datalist id="school">
            <option value="Java学院"></option>
            <option value="PhP学院"></option>
            <option value="前端学院"></option>
            <option value="设计学院"></option>
        </datalist><br/><br/>
        出生日期：<input type="date"/><br/><br/>
        成绩：<input type="number" step="2"><br/><br/>
        毕业时间：<input type="date"/><br/><br/>
        <input type="submit"/>
        <input type="reset"/>
    </fieldset>

</form>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7SoQ0jO9-1616042790854)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210316181107170.png)]

Demo0000001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
day11
sktvsfaker的博客
05-12 247
作业 1.已经列表points中保存的是每个点的坐标(坐标是用元组表示的，第一个值是x坐标，第二个值是y坐标) ```python points = [ (10, 20), (0, 100), (20, 30), (-10, 20), (30, -100) ] # 以下问题使用实参高阶函数来解决 # 1）获取列表中y坐标最大的点 # 2）获取列表中x坐标最小的点 # 3）获取列表中距离原点最远的点 # 4）将点按照点到x轴的距离大小从大到小排序 points = [ (10, 20), (0, 100),
HTML页面显示时间——网页数字时钟、钟表
热门推荐
cnds123的专栏
09-02 4万+
一个HTML网页上动态显示系统时间——网页数字时钟、钟表，本文从简单到复杂给出一些例子。
HTML基础（一）
牢骚太盛防肠断，风物长宜放眼量
05-17 6528
本文是作者在学习html过程中对知识的初步整理 1.第一个程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个HTML页面</title> </head> <body> hello HTML,I am shuaigeliu </body> </html> htm.
八卦时钟代码
小屁孩大帅-保密的博客
01-12 6868
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dupengfei.top</title> <style> html{ background: #000; color: #666; font-size: 12px; ...
html+css+js clock钟表
07-13
动态时钟 body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;} .box{ width: 400px; height: 400px; border:10px solid #8bf2f1;margin:100px auto; border-radius: 50%; box-shadow: 0px 0px 20px 3px #444 inset; position: relative;} /*原点*/ .origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;} /* 指针 */ .clock_line{ position: absolute;position:absolute;z-index:20;} .hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px; transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;} .minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000; transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;} .second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60; transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;} .dot_box{width: inherit; height: inherit;} /*时钟数*/ .dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;} .clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7; position:absolute;top:199px;left:200px;} .scale-show{ width:12px;height:2px;background-color:#555;float:left;} .scale-hidden{width:183px;height:2px;float:left;} /*日期*/ .date_info{width:160px;height:28px; line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555; font-weight:bold;} .time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; } .time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;} #minute_time{border-left:1px solid #fff;border-right:1px solid #fff;} <div class
HTML5之实现酷炫旋转时钟效果
NoviceZ的博客
07-06 1428
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ background: #000000; color: #666; font-size: 12px; ..
Day11.zip
04-10
很抱歉，但根据您给出的信息，"Day11.zip" 的描述中并未提供任何具体的IT知识点。标签为空，也无法提供额外的上下文信息。压缩包子文件的文件名称列表仅有一个条目 "11-Day"，这同样没有提供足够的信息来生成相关的...
Java入门基础学习资料day11
10-22
此java基础课程，适合0基础小白，课程一共11天...day11【final、权限、内部类、引用类型】 此课程全部课程资料获取： JavaEE基础学习资料地址汇总：https://blog.csdn.net/weixin_46271129/article/details/133979063
day11函数进阶.py
09-08
day11函数进阶.py
day11-多线程 java
06-10
day11-多线程 java
day11课上代码.py
最新发布
07-10
day11课上代码.py
显示网页时钟，和顶级窗口
啥也不是的博客
01-16 299
显示网页时钟 在 js 中有一个内置类是日期类，支持类：date，可以用来获取时间/日期 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取下拉列表选中项的 value</title> </head> <body> <script type="text/javascript"> //获
一个html实现的小时钟，动态显示当前时间，可以直接运行使用
Java小皮孩
10-20 9159
一些小技巧，好玩的时钟，实时显示当前时间，附源码，可以直接拿取使用
JavaScript学习（十二）原生JS写时钟
June.1
04-08 1万+
一、时钟案例练习 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html, body {...
HTML制作简单的时钟
Lin_52025的博客
08-03 9142
HTML制作简单的时钟 使用HTML、CSS、jQuery、JS制作时钟，能获取到系统时间使得时钟上的指针进行实时的改变，话不多说上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi...
用html5编写一个简单的时钟
lsxlyy的博客
05-19 847
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&
HTML、JavaScript时钟的代码实现
qq_52908359的博客
05-08 154
<!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&g...
VSCode推荐插件：Copy Class Name快速复制html中的类名
彭世瑜的博客
07-06 326
插件地址：https://marketplace.visualstudio.com/items?复制Vue和React中HTML代码的类名，实现快速复制。选中代码，右键复制类名，再粘贴到文件中即可。
Warning[Pe177]: variable "pTxData" was declared but never referenced D:\桌面\无线节点\Day11BasicRF\project\collect.c 22
05-24
这个警告是在编译代码时产生的，它告诉你在文件"D:\桌面\无线节点\Day11BasicRF\project\collect.c"中，第22行声明的变量"pTxData"从未被引用。这意味着你声明了一个变量，但在代码的后续部分中没有使用它。为了消除...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值