HTML基础学习
网页的基本标签
<!--标题标签-->
<h1>第一个标题</h1>
<h2>第二个标签</h2>
<!--段落标签-->
<p>本作主人公冈部伦太郎是个患有严重中二病的大学生,</p>
<p>自称为“凤凰院凶真”的他和伙伴们组成了“未来发明研究所”,</p>
<p>在位于秋叶原的一个简陋实验室内进行各种古怪发明和调查。</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
2010年7月28日这天，冈部和青梅竹马真由理一同去了科学讲义会场，<br/>
在那里，他们遇见了天才少女牧濑红莉栖。让人意想不到的事情发生了，<br/>
冈部在会馆楼道内听到一声惨叫，他闻声而至，发现了倒在血泊中的牧濑。<br/>
冈部用手机短信将这件事告诉好友桥田至，这个举动，让世界都颠覆了。<br/>
实验室里那个所谓的“未来道具”，竟然真的可以左右世界的进程，冈部自<br/>
此成了孤独的观测者。<br/>
这一切都是命运石之门的选择。<br/>
来自豆瓣简介<br/>
<hr>
<!--字体样式标签-->
<h1>字体样式</h1>
粗体：<strong>字体样式</strong><br/>
斜体：<em>字体样式</em>
<br/>
<!--注释和特殊符号,不知道查百度-->
空 格<br/>
空   格<br/>
><br/>
𝕔版权所有
展示图
图像标签
-
常见图片的基本格式
-
JPG
-
GIF
-
PNG
-
。。。
-
-
相对路径（推荐）与绝对路径
-
把图片地址复制到该文件下
<!--src放图片路径
alt路径错误时显示的字
title 悬停文字
width 高度
height 宽度-->
<img src="图片/头像.png"
alt="我的头像"
title="悬停文字"
width="300"
height="350"> -
预览图
链接标签学习
-
本文链接与图片标签
<!--
a标签
href:必填，表示你要跳转的网页
target: 表示你窗口要在哪里打开
_bank:在一个新的窗口打开
_self:在当前窗口打开（一般默认为当前窗口）
-->
<a href="https://www.baidu.com" target="_bank">点击跳转</a>
<br>
<!--
图片标签
在中间插入<img>跳转到百度
-->
<a href="https://www.baidu.com">
<img src="图片/头像.png"
alt="我的头像"
title="悬停文字"
width="300"
height="350">
</a>
预览图
-
锚标签
</a>
<!--锚链接
1，需要一个锚标记
2，跳转到标记
3，#top:直接回到顶部
4, #down:底部
5，#章节
6，用<a name="down"></a>命名
-->
<a href="#top">
回到顶部
</a>预览图
-
功能性链接
<!--功能性链接
邮件链接：mailto:
QQ链接：百度搜索QQ推广，直接复制进来
-->
<a href="mailto:2945092984@qq.com">
点击联系我
</a>
列表
<ol>
<!--有序列表-->
<li>jj</li>
<li>jj</li>
<li>jj</li>
</ol>
<ul>
<!--无序列表-->
<li>xyz</li>
<li>zxc</li>
<li>cvvb</li>
<li>bnm</li>
</ul>
<dl>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
预览图
表格标签
媒体元素
<!--
scr:资源文件
controls:控制条
autoplay:自动播放（最好不要弄，烦）
muted:静音播放
-->
<video src="../video/食虫植物.mp4" controls autoplay muted>
</video>
<audio src="../audio/Я знаю твой телефон но никогда не позвонюr.mp3" controls autoplay muted>
</audio>
预览图
页面结构分析
iframe 内联
<!--B站的内联框架-->
<iframe src="//player.bilibili.com/player.html?aid=587082925&bvid=BV1iz4y117M4&cid=309479211&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
<!--基本内联框架
src:地址
w-h:高度宽度-->
<iframe src="https://www.bilibili.com/" name="hello" frameborder="0" width="1000xp" height="1000xp"></iframe>
<a href="https://www.bilibili.com/">点击跳转</a>
在网站里面生成网站
表单语法
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以说是网站，也可以是一个请求处理的地址
method:post,get 提交方式
get方式提交：我们可以在网页中看到提交的信息，不安全，高效
pose方式提交：比较安全，传输大文件
-->
<form action="图像标签.html" method="get">
<!--本文输入框：input type="text"-->
<p>名字：<input type="text" name="username"></p><!--text默认值-->
<!--密码输入框：input type="password-->
<p>密码：<input type="password" name="pwb"></p><!--password隐藏密码-->
<!--s-r： 登录-重置-->
<p>
<input type="submit">
<input type="reset">
</p>
</form>
预览图
表单元素格式
<!--表单语法补充-->
<!--本文输入框：input type="text"
value=""(初始值)
maxlength="8"(最大输入字符)
size="30"(文本框/输入的长度)
-->
<p>名字：<input type="text" name="username" value="音无Z" maxlength="8" size="30"></p><!--text默认值-->
<!--
radio:单选框（必须要放在同一个组里面,name来命名同一个组，不然和多选框没什么区别）
-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
预览图
按钮，多选框，下拉框，文本域和文件域
<!--多选框
input type="checkbox"
checked：默认值
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!--按钮
input type="button"普通按钮
input type="image"图片按钮
input type="submit"提交按钮
input type="reset"重置按钮/清空表单
-->
<p>按钮：
<input type="button" name="btn1" value="点击">
<input type="image" src="../images/1.png">
</p>
预览图
<!--下拉框
selected:下拉框默认选中
-->
<p>
<select name="列表名称">
<option value="F">日本</option>
<option value="C" selected>中国</option>
<option value="U">美国</option>
<option value="f">法国</option>
</select>
</p>
<!--
文本域
cols="50" rows="10"行和列
-->
<p>
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--
文件域
input type="file" name="file"
添加上传按钮：input type="button" value="上传" name="upload"
-->
<p>
<input type="file" name="file">
<input type="button" value="上传" name="upload">
</p>
预览图
浙公网安备 33010602011771号