3.24 偷懒了几天。昨天加今天看完了狂神说的html 。因为html和mysql是一起学的,我看腻了mysql就去看html。在这里写一篇总结。附上html思维导图
HTML
Hyper Text Markup Language (超文本语言)
W3C标准:
- 结构化标准语言(XHTML、XML)
- 表现标准语言(CSS
- 行为标准(DOM、ECMASript)
IDEA 注释快捷键
ctrl+/
分割线 <hr>
换行 <br>
标题<h1> (h1、h2...)
定义段落 <p>
< !—a标签
Href:必填,表示要跳转到那个页面
Target:表示窗口在哪里打开
_blank //在新标签中打开
_self //在自己的网页中打开
-->
如 < a href=https://www.baidu.com target=”_self”>点击我跳转到百度</a>
<!--使用name作为标记-->
<a name="top">顶部</a>
<br>
<a href="https://www.baidu.com"target="_blank">点击我跳转到百度</a>
<br> <!- 换行 -->
<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>
<br>
<!-- 功能性链接
邮件链接 :mailto:
-->
<a href="mailto:kimloklee@foxmail.com">点击联系我</a>
<br>
<!--qq推广网页复制过来的-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2863183742&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:2863183742:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
======================================================================================================列表学习=====================================
<!--有序列表-->
<ol>
<li>JAVA</li>
<li>PYTHON</li>
<li>C</li>
<li>GO</li>
</ol>
<hr>
<!--无序列表
应用范围:导航,侧边栏
-->
<ul>
<li>JAVA</li>
<li>PYTHON</li>
<li>C</li>
<li>GO</li>
</ul>
<hr>
<!--自定义列表
dl: 标签
dt:列表名称
dd: 列表内容
应用:公司网站底部
-->
<dl>
<dt>课程</dt>
<dd>JAVA</dd>
<dd>PYTHON</dd>
<dd>C</dd>
<dd>GO</dd>
<dt>位置</dt>
<dd>郑州</dd>
</dl>
========================================================================================================表格学习===================================
<!-- 表格table
行 tr --rows
列 td
-->
<table border="1px">
<tr>
<td colspan="3">1-1</td> <!-- colspan 跨列-->
</tr>
<tr>
<td rowspan="2">2-1</td> <!-- rowspan 跨行-->
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
=========================================================================================================视频和音频=================================
<!--音频和视频
src:资源路径
sontrols:控制条
autoplay:自动播放
-->
<video src="../sources/video/rap.mp4" controls autoplay></video>
<audio src="../sources/audio/有人.m4a" controls ></audio>
==========================================================================================================页面结构=================================
<header>
<h2>
网页头部
</h2>
</header>
<section>
<h2>
网页主体
</h2>
</section>
<footer>
<h2>
网页脚部
</h2>
</footer>
=======================================================================================================iframe内联框架===============================
<iframe src="//player.bilibili.com/player.html?aid=467385773&bvid=BV1dL411P7tS&cid=553104379&page=1"-->
<!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<!-- iframe 内敛框架
src:地址
w-h:宽度高度
-->
<iframe src="https://www.4399.com" frameborder="0" width="1100px" height="900px"</iframe>
<!--跳转-->
<iframe src="" name="hello" frameborder="0" width="1100px" height="900px"></iframe>
<a href="5.列表.html" _blank>点击跳转</a>
<h1>注册</h1>
<!-- 表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get提交方式
value=“lok” --name默认初始值为lok
get方式提交我们可以在url中看到提交的信息 不安全
-->
<form action="6.表格学习.html" method="get">
<!-- 文本输入框 input标签
readonly 只读
required 非空才能提交
-->
<p>名字:<input type="text" name="username" required ="请输入用户名"></p>
<p>密码:<input type="password" name="pwd"></p>
<!-- 单选框属性
input type="radio"
value:是单选框的值
name: name一样的是一个组
disable 禁用
hidden 隐藏
-->
<p>性别:
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
</p>
<!-- 多选
input type="checkbox "
checked 默认选中
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby" checked>睡觉
<input type="checkbox" value="washing" name="hobby">洗澡
<input type="checkbox" value="tea" name="hobby">喝茶
<input type="checkbox" value="basketball" name="hobby">打球
</p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 清空表单
-->
<p>按钮:
<input type="button" name="btn1" value="点击变长">
</p>
<!-- 下拉框,列表框
selected 默认
-->
<p>国家:
<select name="列表名称">
<option value="china">中国</option>
<option value="america">美国</option>
<option value="japan" selected>日本</option>
<option value="india">印度</option>
</select>
</p>
<!-- 文本域 -->
<p>反馈:
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域 -->
<p>
<input type="file" name="files">
<input type="button" name=upload" value="上传" >
</p>
<!-- 邮箱验证
pattern 正则表达式
/-->
<p>邮箱:
<input type="email" name="email">
</p>
<!-- url-->
<p>url:
<input type="url" name="urls">
</p>
<!-- step步长 -->
<p>数量:
<input type="number" name="num" max="100" min="0" step="1">
</p>
<!-- 滑块 -->
<p>音量:
<input type="range" min="0" max="100" name="voice">
</p>
<!-- 搜索 -->
<p>搜索:
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)