HTML
IDEA打开
打开IDEA，创建html类，则生成一个html文件，点击此处运行
注释<!--注释内容-->
基本标签
<head><!-- head :头部标签，代表网页的头部-->
<meta charset="UTF-8"><!-- meta :描述性标签，用来描述网站的一些信息-->
<meta name="keyword" content="JUJU"><!-- 定义一个关键词JUJU-->
<meta name="description" content="一个网站用以注册评论交流"><!-- 解释这个网站用来做什么的-->
<title>JUJU最帅</title><!-- title :网页的标题 </head><body><!-- body :主体标签，代表网页的主体-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>分段符号</p>
<p>分段符号</p>
<br/><!-- <br/> :分行符号，仍然是同一段-->
</body>
<!-- 水平线标签 --> <hr/><!-- 根据网页界面大小自动生成水平线 <hr>与<hr/>都可--> <!-- 特殊符号 --> <!-- 因为在html中，源代码的中的连续空格执行后只显示一个，所以要用到空格的转译符号 --> ><!-- 大于符号 > --> <<!-- 小于符号 < --> ©<!-- 版权符号 © -->
图片标签
<img src="../地址路径" alt="输出错误返回" title="悬停文字" width="宽度，填写数字" hight="长度，填写数字">
<!-- ../ 为上一级；src 代表图片路径 -->
<!-- alt 内填写输出错误时返回值；title 内填写鼠标悬停在图片上显示的文字 -->
<!-- 注意“src”与“阿alt”为必填关键词 -->链接标签
1.网页跳转
<a href="输入网址或路径">输入超链接的点击内容</a>
<!-- 以上为跳转网页 点击内容也可以为图片（<img src="../地址路径" alt="输出错误返回">）-->2.同网页位置跳转，即锚链接
<a name="输入名字"></a>
<!-- 以上为定位标记，可设置在任意位置 -->
<a href="#标记名字">输入锚链接的点击内容</a>列表标签
1.有序列表
<ol>
<li>会自动生成前缀1.</li>
<li>会自动生成前缀2.</li>
<li>会自动生成前缀3.</li>
</ol>
2.无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>表格标签
<table><!-- 表格标签 -->
<tr></tr><!-- 行标签 -->
<tr></tr>
<td></td><!-- 列标签 -->
<td></td>
</table>
在表格标签中，行列的使用一般都为包含使用，如
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>或者
<table>
<td>
<tr></tr>
<tr></tr>
<tr></tr>
</td>
</table>以上代码，运行后表格默认没有边框，如图
若要增加边框，则
<table border="2px">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>效果如下
跨行跨列
<table border="2px">
<tr>
<td colspan="3">a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td rowspan="2">a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>效果如下
跨行跨列需要谨记删除多余冗长，否则就会造成如上效果
媒体标签
音频标签
<audio src="音频文件路径"></audio>最基础的音频标签就如上所示，这样的标签运行后，自动播放循环。如果要添加控制操作可以添加关键词controls，如下
<audio src="音频文件路径" controls></audio>还有许多其他关键词，这里不一一介绍。
视频标签
视频标签与音频标签大致相同
<video src="视频文件路径"></video>大部分音频关键词与视频关键词拼写、作用相同。大家可以自行摸索
最常用的两个就是：controls控制（控制播放进度，音量大小与下载）autoplay自动播放
网页结构
<header></header><!-- 头部标签 -->
<section></section><!-- 主体标签 -->
<footer></footer><!-- 底部标签 -->iframe内联框架
<iframe src="网址或路径" name="框架标识名" width="宽度，数字" height="高度，数字"></iframe>抽象的说就是在自己的网站内嵌入另一个网站，类似主网站与子网站的关系。如图
表单标签
<form action="表单提交的位置，可以是一个网站，也可以是一个请求" method="提交方式，一般为post或get">
<p>
用户：<input type="类型，一般用户名为text类型" name="标识名">
</p>
<p>
密码：<input type="类型，一般密码为password类型" name="标识名">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>效果如下
get的提交类型不安全，比如
会在表单提交位置的url显示出来，虽然速度快，但是不安全
单选框和多选框
单选框
单选框的type类型为radio，其中value为必填项
<input type="radio" value="男" name="sex">
<input type="radio" value="女" name="sex">
<!-- 以上为单选框 -->效果如下
注意，当单选框的“name”值不相同的时候，表明其不属于同一组，每组单选框内容都可以各自单选，如
<input type="radio" value="男" name="sex1">
<input type="radio" value="女" name="sex2">
多选框
多选框type类型为checkbox，value也为必填属性，
代码如下
<p>
<input type="checkbox" value="吃饭" name="hobby">吃饭
<input type="checkbox" value="睡觉" name="hobby">睡觉
<input type="checkbox" value="敲代码" name="hobby">敲代码
<input type="checkbox" value="踢球" name="hobby">踢球
<input type="checkbox" value="美女" name="hobby">美女
</p>效果如图
按钮
按钮的type类型为button，其中value为必填属性，否则按钮上不显示文字
代码如下
<input type="button" value="嘿嘿嘿" name="btn1">
<input type="button" value="点击变长" name="btn2">效果如下
其中还有图像按钮，type类型为image
<input type="image" src="图片路径">效果如下，图片可点击
下拉框
下拉框代码如下
<select name="列表名"><!-- <select>为下拉框的标签 -->
<option value="国家" selected>中国</option><!-- 下拉框的显示值放在<option>与</option>之间 -->
<option value="国家">小日本</option>
<option value="国家">棒子</option>
<option value="国家">枪战美利坚</option>
<option value="国家">牛粪国</option>
</select>其中有关键词selected，表示默认选项。效果如下
文本域
文本域的代码为
<textarea name="标识名" cols="列数" rows="行数"></textarea>效果如下
其中右下角的斜杠可自由变换文本域的大小
滑块与搜索框
<input type="range" name="range">滑块代码如上，效果如下
<input type="search" name="search">搜索框代码如上，效果如下，搜索框的特点就是，当你点击时，会弹出历史记录
拓展
type还有许多其他类型，比如email邮件类型，url类型，number类型。
email类型有简单的检查功能，会检查输入中是否有@字符，@字符后是否有内容等
<label for="id名">点击内容</label>以上代码的作用是跳转到id处。增强鼠标可用性.以下代码为定义id的方法
在目标位置，增加id=""，如
<input type="image" src="../Image/wang1.jpg" id="girl">只读、隐藏域、禁用
readonly<!-- 只读 -->
<input type="类型，一般用户名为text类型" name="标识名" readonly><!-- readonly 的使用 -->
只读，可以选中，不可修改
<p>
<input type="radio" value="男" name="sex" disabled>男<!-- disable 禁用 -->
<input type="radio" value="女" name="sex">女
</p>
hidden<!-- 隐藏 -->
<p>密码：<input type="password" name="password" hidden></p>隐藏后
隐藏前
表单初级验证
placeholder="文本内容"
<input type="text" name="userName" placeholder="请输入用户名">
当光标在输入框内，并且没有输入时，placeholder内容存在，输入任意内容后，placeholder内容消失
pattern="正则表达式"
<input type="text" name="userName" pattern="^[A-Za-z0-9]{4,15}$">pattern内输入正则表达式，规定输入规范。正则表达式构成复杂，可以直接在网上搜索查询。
2755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
