html
html标签
块级标签
块级标签，一个标签占一行
- 六级标签：<h1>~<h6>
- 水平线标签：<hr /> 单闭合标签
- 段落标签：<p></p>
- 有序列表(ol/li)：
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
- 无序列表(ul/li)：
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
- 描述标签(dl/dt/dd):
<dl>
<dt>java</dt>
<dd>java详情</dd>
<dd>java发展</dd>
<dd>java就业</dd>
</dl>
- 表格标签(table/tr/th/td):
<table border="1" width="200" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<!-- 整列内容居中对齐 -->
<td align="center">1</td>
<td align="center">张三</td>
<td align="center">男</td>
<td align="center">20</td>
</tr>
<!-- 整行内容居中对齐 -->
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
</table>
- form标签
form表单标签，用作数据提交，标签本身没有可视化视图 ，一般结合其他可视化标签使用例如常用的table或者div标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>块级标签</title>
</head>
<body>
<!-- 定义一个锚标识 作用是被其他链接导航到此处位置-->
<a name="top"></a>
<!-- 这是网页显示的内容 -->
<!--
块级标签，一个标签占一行
六级标题标签 h1~h6
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 水平线标签，单闭合标签，不成对出现 -->
<hr />
<!-- 段落标签 p -->
<p>
1、使用编辑器创建项目时，如果勾选了“项目托管”，编辑器将自动安装插件；
2、您可以在插件市场直接搜索“codechina-workflow”下载，并解压缩到 plugins 目录下，由于插件还依赖编辑器核心插件“Git”，所以您还需要在【工具->插件安装->HBuilder核心插件】中手动选择安装该插件（编辑器暂不支持自动安装依赖插件）。
</p>
<p>
插件用途：
HBuilder 创建的项目支持直接托管到 Code China(后面 Code China 简称为 code。)，HBuilder 编辑器 + codechina-workflow 插件 + code 平台一起相结合完成用户的项目协作开发。
实现项目托管：
将项目托管到 code 有两种方式，一种是在新建项目时可以选择勾选 上传到Git代码托管平台，此操作会在编辑器创建好项目之后，将项目同步到 code 平台；
</p>
<hr />
<!-- 有序列表标签 ol/li -->
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<!-- 无序列表标签 ul/li -->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<hr />
<!-- 定义描述标签 dl/dt/dd -->
<dl>
<dt>java</dt>
<dd>java详情</dd>
<dd>java发展</dd>
<dd>java就业</dd>
</dl>
<hr />
<!-- 表格标签 -->
<table border="1" width="200" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<!-- 整列内容居中对齐 -->
<td align="center">1</td>
<td align="center">张三</td>
<td align="center">男</td>
<td align="center">20</td>
</tr>
<!-- 整行内容居中对齐 -->
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
</table>
<hr />
<!-- form表单标签，用作数据提交，标签本身没有可视化视图 ，一般结合其他可视化标签使用-
例如常用的table或者div标签 -->
<form action="后台程序处理的地址" method="get">
</form>
<hr />
<!-- 分区，分块标签 div -->
<div style="width: 300px;height: 300px;background-color: azure;">
常见问题：
1、用户信息授权： 将代码托管到 code 时，需要我们需要您同意授权使用您的用户信息登录 code 平台，其中手机号和邮箱是必须信息，如果取消授权手机号和邮箱，将导致操作失败。
2、补充手机号：
根据国家相关法律法规，发布内容需要补充用户手机号，所以托管仓库时，需要在 Dcloud 用户中心补充用户手机号。
3、使用哪个账号登录 code 查看自己的项目：
在登录 code 查看自己托管的项目时，您可以在 csdn 登录页面选择 HBuilder 第三方登录或者您在 Dcloud 平台绑定的手机号加验证码的方式登录 code。
</div>
<div style="width: 300px;height: 300px;background-color: aliceblue;">
<p>省份列表</p>
<ul>
<li>广西壮族自治区
<ul>
<li>南宁市</li>
<ol>
<li>青秀区</li>
<li>西乡塘区</li>
</ol>
<li>柳州市</li>
<li>桂林市</li>
</ul>
</li>
<li>湖南省</li>
<li>广东省</li>
</ul>
</div>
<!-- 跳到指定的锚位置 -->
<a href="#top">回到顶部</a>
<!-- 定义一个锚 -->
<a name="bottom"></a>
</body>
</html>
行级标签
行级标签，占满一行才换行显示
- 图片标签：<img src=“图片路径，也可以是网络路径” title=“鼠标移动到图片上显示的文字” alt=“图片无法显示的文字” />
- 范围标签：<span></span>
- 换行标签：<br />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行级标签</title>
</head>
<body>
<!-- 行级标签，占满一行才换行显示 -->
<!-- 图片标签 src指定图片路径，也可以是网络路径-->
<img src="img/show1_big.jpg" title="笔记本电脑" alt="笔记本电脑" />
<img src="img/show2_big.jpg" title="笔记本电脑" alt="笔记本电脑" />
<img src="https://gimg2.baidu.com" title="鼠标移动到图片上显示的文字" alt="图片无法显示的文字" />
<img src="https://img2.baidu.com/it/u=2116882029,1761299726&fm=26&fmt=auto&gp=0.jpg" width="100px" height="100px" title="鼠标移动到图片上显示的文字" alt="图片无法显示的文字" />
<!-- 范围标签 -->
清仓大甩卖，全场<span style="color: red;font-size: 70px;">1</span>元起
<p>
清仓大甩卖，全场<span style="color: red;font-size: 70px;">1</span>元起
</p>
<div id="">
<!-- br 换行标签-->
清仓大甩卖，<br/>全场<span style="color: red;font-size: 70px;">1</span>元起
</div>
<p>
其中第一种情况需要项目管理者根据实际项目协作需求确认是否正确赋予用户协作权限，<br/>
如需修改用户权限，可直接在 code 平台对应项目的项目成员设置页面直接对协作者用户权限进行编辑；<br/>
第二种情况需要用户自行确认加入项目协作时的登陆账号是否为 hbuilder 第三方登陆，<br/>
并且该账号与编辑器中的登陆账号是否一致。<br/>
</p>
</body>
</html>
超链接和from表单
- 超链接
<a href=""></a>
target="_self"本窗口打开
target="_self"新窗口打开
<!-- 超链接标签 a -->
<a href="index.html">块级目录</a><br/>
<!-- 默认本窗口打开链接地址 -->
<a href="index2.html" target="_self">行级目录</a><br/>
<a href="http://www.baidu.com" target="_blank">百度</a><br/>
<!-- 新窗口打开 target -->
<a href="index2.html" target="_blank"><img src="img/buynow.gif" ></a><br/>
- 锚链接
跳转到原页面指定位置
<a name=“top”></a>
<a href="#top">回到顶部</a>
跳转到其他页面指定位置
<a name=“bottom”></a>
<a href=“index.html#bottom”>跳到index.html页码底部</a> - 特殊字符
<!-- 特殊字符 -->
<div>
<!-- 空格 -->
张 三 <br/>
<!-- >大于（>）<小于（<） -->
大于小于：>< <br/>
<!-- " 双引号 -->
双引号：" <br/>
<!-- © 版权号 -->
版权号：© <br/>
逻辑与：& <br/>
<!--  半个汉字， 一个汉字 -->
用 户 名：<br/>
密  码：<br/>
出生日期：<br/>
</div>
- 表单
<!-- 表单元素 action指定提交的处理地址，不写默认当前页面
method属性执行提交的方式分为get和post两种，默认get-->
<div>
<form action="index.html" method="post">
<!--
type:输入框输入内容类型，很多种，常见的text普通文本
value：输入框的值
maclength:输入框内容最大长度
size:输入框宽度
readonly:只读，可以读取不可修改
disabled:不可用，无法读取到输入框数据，作用在按钮上
-->
姓名：<input type="text" maxlength="6" value="张三" size="3" readonly disabled/><br/>
<!-- placeholder 框内提示字 -->
账号：<input type="text" value="" placeholder="请输入账号"/><br/>
密码：<input type="password" placeholder="请输入密码" /><br/>
<!-- checked 默认勾选 -->
性别：<input type="radio" name="sex" value="1" checked/>男
<input type="radio" name="sex" value="0" />女
<br/>
兴趣：<input type="checkbox" name="hobby" value="1" />学习
<input type="checkbox" name="hobby" value="2" checked />游戏
<input type="checkbox" name="hobby" value="3" />足球
<input type="checkbox" name="hobby" value="4" checked/>篮球
<br/>
学历：<select>
<option value ="-1">请选择</option>
<option value ="1">专科</option>
<option value ="2" selected>本科</option>
<option value ="3">研究生</option>
</select>
<br/>
头像：<input type="file"/><br>
生日：<input type="date"/><br/>
备注：<textarea rows="10" cols="50"></textarea><br/>
<!-- 隐藏域，页面不显示，用来在页面之间传递值，这些值用户不需要关心，但是程序需要使用 -->
<input type="hidden" value="123456789" />
<!-- 提交和重置按钮，内置了相应的提交和重置表单事件 -->
<input type="submit" value="注册" />
<input type="reset" value="重置" /><br/>
<!-- 普通文本按钮 需要自行添加事件 -->
<input type="button" value="登录" disabled=""/><br/>
<!-- 普通图片按钮 内置了相应的提交事件事件 -->
<input type="image" src="img/buy.jpg" />
</form>
</div>
表格高级用法
普通表格
<!-- 普通表格 border边框1个像素，单元格间距0，单元格内边距0，表格宽度300像素-->
<h3>普通表格</h3>
<table border="1" cellspacing="0" cellpadding="0" width="300px">
<tr>
<th>编号</th>
<th>性别</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>女</td>
<td>20</td>
</tr>
</table>
跨列表格
<!-- 跨列表格 clospan -->
<h3>跨列表格 clospan</h3>
<table border="1" cellspacing="0" cellpadding="0" width="300">
<tr>
<!-- 一个单元格占二个单元格的宽度，跨两列 -->
<td colspan="2">学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>97</td>
</tr>
<tr>
<td>数学</td>
<td>98</td>
</tr>
</table>
跨行表格
<!-- 跨行表格 rowspan -->
<h3>跨行表格 rowspan</h3>
<table border="1" cellspacing="0" cellpadding="0" width="300">
<tr>
<!-- 一个单元格占二个单元格的高度，跨两行 -->
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>97</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>96</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
跨行跨列表格
<h3>跨行跨列表格</h3>
<table border="1" cellspacing="0" cellpadding="0" width="300">
<tr>
<!-- 一个单元格占二个单元格的宽度，跨两列 -->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!-- 一个单元格占二个单元格的高度，跨两行 -->
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>97</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>96</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
表格分组标签thead/tbody/tfoot
<h3>表格分组标签thead/tbody/tfoot</h3>
<table border="1" cellspacing="0" cellpadding="0" width="300">
<!-- 表格标题 -->
<caption>年终数据报表</caption>
<!-- 表格头部 -->
<thead style="background-color: aliceblue;">
<tr>
<th></th>
<th>1月</th>
<th>2月</th>
<th>3月</th>
<th>小计(RMB)</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody style="background-color: antiquewhite;">
<tr>
<th>北京</th>
<th>10</th>
<th>20</th>
<th>30</th>
<th>60</th>
</tr>
<tr>
<th>上海</th>
<th>10</th>
<th>20</th>
<th>30</th>
<th>60</th>
</tr>
<tr>
<th>天津</th>
<th>10</th>
<th>20</th>
<th>30</th>
<th>60</th>
</tr>
</tbody>
<!-- 表格尾部 -->
<tfoot style="background-color: aqua;">
<tr>
<th>总计(RMB)</th>
<th>30</th>
<th>60</th>
<th>90</th>
<th>180</th>
</tr>
</tfoot>
</table>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
