HTML
注释
<!-- -->
meta
<meta charset="UTF-8">
<!-- meta 描述性标签，用来描述我们网站的一些信息 -->
<!-- meta 一般用来做SEO-->
<meta name="keywords" content="我学java">
<meta name="description" content="来这个地方可以学习java">网页标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页基本标签</title>
</head>
<body>
<!--标题标签 h1-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落标签 p*+tab键-->
<p> 我爱你 爱着你</p>
<p>就像老鼠爱大米</p>
<p>风雨总会见彩虹 ！！！！</p>
<!--水平线标签 <hr/>-->
<hr>
<!-- 换行标签 <br/>-->
我爱你 爱着你 <br/>
就像老鼠爱大米 <br/>
风雨总会见彩虹 ！！！！<br/>
<!--字体样式标签 粗体 strong 斜体 em-->
<strong> 我爱你</strong>
<em> 我爱你 </em>
<br>
<!--特殊符号-->
空 格
>
<
<br>
<!--版权符号-->
©
</body>
</html>图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--
src: 图片地址
相对地址推荐使用 绝对地址
../ 返回上一级目录
alt: 如果找不到图片会显示的文字
-->
<img src="../Resources/image/1.JPG" alt="我们爱的照片" title="悬停文字" height="200" width="200">
</body>
</html>超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--
a超标签
href必填： 表示跳转到哪一个页面
target: 表示在那里打开
_blank:在新的网页中打开
_self ：在自己的这个界面打开
-->
<!--使用id作为锚标记-->
<a id="top">顶部</a>
<a href="基本标签.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br>
<a href="基本标签.html">
<img src="../Resources/image/1.JPG" alt="我们爱的照片" title="悬停文字" height="200" width="200">
</a>
<br>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<a id="down"> down</a>
<!--
功能性标签 邮件链接 mailto：-->
<a href="mailto:1196691345@qq.com">点击我发邮件</a>
</body>
</html>行内元素和块元素
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>c/c++</li>
<li>大数据</li>
</ol>
<!--无序列表-->
<ul>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>c/c++</li>
<li>大数据</li>
</ul>
<!--
自定义列表
dl： 标签
dt: 列表名称
dd： 列表内容-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>java</dd>
<dd>java</dd>
<dd>java</dd>
</dl>
</body>
</html>表格标签
<body>
<!--表格 table
行 tr
列 td-->
<table border="1px">
<tr>
<!--colspan 跨列 -->
<td colspan="4">1-1</td>
</tr>
<!--rowspan 跨行-->
<tr>
<td rowspan="2">2-1</td>
<td>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>媒体元素
<body>
<!--
音频和视频
src: 资源路径
controls： 控制条
autoplay： 自动播放
-->
<video src="../Resources/video/c33202403f914af49a0a449860e9eeba.MP4" controls autoplay></video>
<audio src=""></audio>
</body>网页界面结构分析
<body>
<header> <h2> 网页头部</h2></header>
<section> <h2> 网页主体</h2></section>
<footer> <h2> 网页脚部</h2></footer>
<!-- nav 导航栏辅助类内容-->
</body>内联框架iframe
<body>
<!--
src： 地址
w-h 宽度高度
-->
<iframe src="https://www.bilibili.com/read/cv5702420/?spm_id_from=333.999.0.0"
frameborder="0" id="hello" width="800" height="1000"></iframe>
</body>表单的基本标签
<!DOCTYPE html>
<html lang="en">
<header>
<meta charset="UTF-8">
<title>登陆注册</title>
</header>
<body>
<h1> 注册</h1>
<!--表单form
action: 表单提交的位置，可以是一个网站，也可以是一个请求处理地址
method： post，get 提交方式
get: 我们可以在url中看到我们提交的内容，不安全，高效
post： 比较安全，传输大文件
value="我好帅" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框长度为30
readonly 只读
hidden 隐藏
placeholder 提示信息
required 非空
pattern 正则表达式
-->
<form action="页面结构.html" method="post" >
<!-- 文本输入框 <input type="text">-->
<p>名字： <input type="text" name="username" value="dsdd" readonly ></p>
<!-- <input type="password"> -->
<p> 密码： <input type="password" name="pwd" hidden></p>
<!-- 单选框标签 <input type="radio"/>
value:表示单选框中的值
name：表示组 一个组的就只能选一个 两个组的可以两个都选
checked 默认选中
disabled 禁用
-->
<p>性别:
<input type="radio" value="boy" name="sex" disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<!-- 多选框
<input type="checkbox"
>
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby" checked>睡觉
<input type="checkbox" value="code" 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="button1" value="点击我">
<!-- <input type="image" src="../Resources/image/1.JPG">-->
</p>
<!-- 文件域-->
<p>
<input type="file" name="files">
</p>
<!-- 下拉框
<select name="列表名称"> </select>
<option value="china" selected>中国</option>
selected 表示默认已经选的值
-->
<p>国家：
<select name="列表名称">
<option value="china" selected>中国</option>
<option value="us">美国</option>
<option value="eth">瑞士</option>
<option value="yindu">印度</option>
</select>
</p>
<!-- 文本域-->
<p>反馈：
<textarea name="textarea" cols="50"rows="10">文本内容</textarea>
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
<!-- 邮件验证-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--URL-->
<p>url:
<input type="url" name="url">
</p>
<!-- 数字 -->
<p>数字：
<input type="number" name="num" max="100"min="0" step="10">
</p>
<!-- 滑块-->
<p>音量：
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<!--搜索框-->
<p>搜索：
<input type="search" name="serach">
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">你点击我</label>
<input type="text" id="mark">
</p>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
