HBuilderX
介绍
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby,本身主体是由Java编写。
安装网站
官网:https://www.dcloud.io/hbuilderx.html
ps:HBuilderX只是前端编写工具
HTML
介绍
HTML超文本标记语言实现页面展现,形成静态网页
静态页面HTML
介绍
超文本标记语言,是做网站页面的最基础的开发语言
结构
文档声明,用来声明HTML文档所遵循的HTML规范。
头部分,用来存放HTML文档的基本属性信息,比如网页标题、编码格式,这部分内容会被网页优先加载。
体部分,用来存放网页要显示的数据。
声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档,打开的方式一定要和保存文件时使用的编码一致,避免出现中文乱码问题。
语法
-
HTML标签
HTML是一门标记语言,标签分为开始标签和结束标签。
如果开始和结束中间没有内容,可以合并成一个自闭标签 -
HTML属性
HTML标签都可以具有属性,属性包括属性名和属性值,如果有多个属性,要以空格隔开。属性的值要用单引号或者双引号引开。
如: -
HTML注释
格式:
注意:不能交叉嵌套 -
如何在网页中做空格和换行
换行:
空格:在HTML中多个空格会被当做一个空格来显示
常用标签
标题标签
标签使用: <h1></h1> ~ <h6></h6>
<!doctype html>
<html>
<head>
<title>01</title>
<meta charset="utf-8"/>
</head>
<body>
<!--
标题标签:
包括:h1~h6
-->
<h1 align=”center”>我是1号标题</h1>
<h2>我是2号标题</h2>
<h3>我是3号标题</h3>
<h4>我是4号标题</h4>
<h5>我是5号标题</h5>
<h6>我是6号标题</h6>
</body>
</html>
展示如图:
列表标签:
常用标签:<ul> <li></li> </ul>
常用字段:circle、square、disc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!-- 列表标签:
ol + li 有序
ul + li 无序
type 定义列表符号,默认是 disc 小圆点
-->
<ul type="circle">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
<ul type="square">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
<ul type="disc">
<li>中国</li>
<li>美国</li>
<li>小日本</li>
</ul>
</body>
</html>
展示如图:
图片标签:
标签使用:<img src="图片名" border="展示多少px" width="展示多少宽%" height="展示多少高%">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!-- 图片标签:
img向网页中引入图片 (相对路径/绝对路径)
border:边框
width:宽度
height:高度
-->
<img src="1.jpg" border="10px" width="50%" height="30%">
</body>
</html>
展示如图:
超链接标题
标题使用:<a></a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!-- 超链接标签
href 指定要跳转的位置
target 指定要打开的方式
-->
<a href="http://www.baidu.com" target="_blank">点我</a>
<a name="_top">java从入门到精通</a>
<h6>你好java</h6>
<h6>你好java</h6>
<a href="#_top">回到顶部</a><!-- 获取_top的位置,像书签 -->
<br><br><br><br>
</body>
</html>
展示如下:
Input标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<input type="text" /> 普通文本框
<input type="password" /> 密码
<input type="radio"/>男 单选框
<input type="number" /> 数字值
<input type="week" /> 日历
<input type="checkbox" />杨幂 复选框
<input type="button" value="点我一下"/>
<input type="submit" value="提交数据"/>
</body>
</html>
展示如下:
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>各种标签</title>
</head>
<body>
<!--table表格标签
tr 表格里的行
td 表格里的列
border:表格的边框
cellspacing:单元格的间距
bgcolor:背景颜色
width:宽度
align:位置
-->
<table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center">
<tr>
<td colspan="2">11</td> <!-- colspan是列合并,合并2列-->
<!-- <td>12</td> -->
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->
</tr>
<tr>
<td>31</td>
<td>32</td>
<!-- <td>33</td> -->
</tr>
</table>
</body>
</html>
展示如下
表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<!-- get方式提交的数据都在地址栏里 http://127.0.0.1:8848/cgbtest/3.html?user=&pwd= -->
<!-- <form method="get"> -->
<!-- post提交安全不显示数据 -->
<form method="post">
<table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3">
<th colspan="2">注册表单</th>
<tr>
<td>用户名:</td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repwd"/></td>
</tr>
<tr>
<td>昵称:</td>
<td><input type="text" name="nick"/></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="mail"/></td>
</tr>
<tr>
<td>性别:</td>
<td>
<!-- 不配name属性,性别是多选!! sex属性的值按照1 2 提交-->
<!-- input中,type如果是radio或者checkbox的话,不配置value属性的话,默认提交on -->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="2"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<!-- name必须配,多选 ,提交的值就是1 2 3 -->
<input type="checkbox" name="like" value="1"/>篮球
<input type="checkbox" name="like" value="2"/>足球
<input type="checkbox" name="like" value="3"/>排球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name="city"> <!-- 实现多选,按name提交数据 1 2-->
<option value="1">北京</option>
<option value="2">上海</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" name="path"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
</td>
</tr>
</table>
</form>
</body>
</html>
展示如下
其他标签
<!-- 其他标签 div p span -->
<div>大家好</div>
<div>大家好</div>
<div>大家好</div>
<p> Nice</p>
<p> Nice</p>
<p> Nice</p>
<span> hello</span>
<span> hello</span>
<span> hello</span>
展示如下