HTML学习
1、软件使用:推荐:HBuilder
下载地址1:http://baoku.360.cn/soft/show/appid/103981735
下载地址2:https://pc.qq.com/detail/3/detail_22603.html
2、文字显示设置:
标题大小:
<!--最大为6-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
一条直线:
<hr />
换行:
<br/>
段落:
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
字体:
<!--
font常用属性:
color:颜色
size:字体大小1-7
face:字体
-->
我要<font color="aqua" size="1" face="微软雅黑">回家!!!!</font><br />
我要<font color="aquamarine" size="2" face="agency fb">回家!!!!</font><br />
我要<font color="blue" size="3" face="fantasy">回家!!!!</font><br />
我要<font color="red" size="4" face="calisto mt">回家!!!!</font><br />
我要<font color="saddlebrown" size="5" face="gadget">回家!!!!</font><br />
我要<font color="violet" size="6" face="new york">回家!!!!</font><br />
我要<font color="darkblue" size="7" face="calisto mt">回家!!!!</font><br />
PS:
<b>字体加粗</b>
<i>字体斜体</i>
<strong>字体加粗,带语义,加重语气(推荐)</strong>
<em>字体斜体,带语义,加重语气(推荐)</em>
3、图片显示设置:
图片显示:
<!--
常用属性:
src:指定图片路径
width:指定图片的宽度
height:指定图片高度
alt:文件加载失败时的提示信息
-->
<img src="../img/1.jpg" width="600" height="400" alt="这张图片加载有问题!"/>
路径问题:
<!--
路径问题:
./代表当前路径
../代表上级路径
../../代表上上级路径
-->
4、列表(有序列表和无序列表):
无序列表:
<!--无序列表:
ul
li 列表项
type属性:小圆圈,小方块,默认小黑点
-->
<ul type="circle">
<li>百度</li>
<li>新浪</li>
<li>谷歌</li>
</ul>
<ul type="disc">
<li>百度</li>
<li>新浪</li>
<li>谷歌</li>
</ul>
<ul type="square">
<li>百度</li>
<li>新浪</li>
<li>谷歌</li>
</ul>
有序列表:
<!--有序列表
ol
li 属性项
常用属性:type:指定序号的类型
start:指定从几号开始,必须写数字
-->
<ol type="1">
<li>百度</li>
<li>新浪</li>
<li>谷歌</li>
</ol>
<ol type="a" start="1">
<li>百度</li>
<li>新浪</li>
<li>谷歌</li>
</ol>
<ol type="A" start="2">
<li>百度</li>
<li>新浪</li>
<li>谷歌</li>
</ol>
<ol type="i" start="3">
<li>百度</li>
<li>新浪</li>
<li>谷歌</li>
</ol>
<ol type="I">
<li>百度</li>
<li>新浪</li>
<li>谷歌</li>
</ol>
PS:超链接
<!--
点击链接,跳转去指定的网站
a 超链接标签
常用的属性:
href:指定要跳转去的链接地址,需要加上http协议,如果访问的是本网站的html文件,可以直接写文件路径。
target:以什么方式打开
_self:默认打开方式,在当前窗口打开
_blank:新起一个标签页打开页面
-->
<ul>
<li><a href="http://www.baihe.com">百合网</a></li>
<li><a href="http://www.shijijiayuan.com" target="_blank">世纪佳缘</a></li>
<li>珍爱网</li>
</ul>
5、表格
表格标签:
<!--
table:
常用属性:
align:对齐方式
bgcolor:背景颜色
border:指定边框
width:宽度
height:高度
tr 标签:行
td 标签:列
-->
<table border="1px" width="400px" height="400px" bgcolor="yellow" align="center">
<tr bgcolor="red">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr align="center">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td align="center">1</td>
<td>1</td>
<td bgcolor="aqua">1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
表格合并:
<!--
table:
常用属性:
colspan:跨列
rowspan:跨行
注意:要把多于的表格删掉,不然会出错
tr 标签:行
td 标签:列
-->
<table border="1px" width="400px" height="400px" bgcolor="yellow" align="center">
<tr align="center">
<td colspan="2">1</td>
<td>1</td>
<td>1</td>
</tr>
<tr align="center">
<td>1</td>
<td colspan="2" rowspan="2">1</td>
<td>1</td>
</tr>
<tr align="center">
<td>1</td>
<td rowspan="2">1</td>
</tr>
<tr align="center">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
表格嵌套:
<!--
table:
常用属性:
将要嵌套的表格写入被嵌套表格内
width="100%"宽度填充满原表格
height="100%"高度填充满原表格
tr 标签:行
td 标签:列
-->
<table border="1px" width="400px" height="400px" bgcolor="yellow" align="center">
<tr align="center">
<td colspan="2">1</td>
<td>1</td>
<td>1</td>
</tr>
<tr align="center">
<td>1</td>
<td colspan="2" rowspan="2">
<table border="1px" width="100%" height="100%">
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
</td>
<td>1</td>
</tr>
<tr align="center">
<td>1</td>
<td rowspan="2">1</td>
</tr>
<tr align="center">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
6、输入框
<!--
表单标签:
action:提交的地址
method:get:默认提交方式,会将参数拼接在链接后面,有大小限制,4k
post;会将参数封装在请求体中,没有这样的限制
input:
type:指定输入项的类型
name:在表单提交时,当做参数的名称
id:给输入项取一个名字,以便于后期我们找到并操作它
radio:单选按钮
chackbox:多选
file:上传文件
submit:提交按钮
button:普通按钮
reset:重置按钮
hidden;隐藏域
date:日期类型
tel:手机号
number:只允许输入数字
placeholder:指定默认的提示信息
textarea:文本框,可以输入一段文本
cols:指定宽度
rows:指定高度
select:下拉列表
option:选择项
-->
<form action="主页.html">
<!--隐藏域
主要用来存放页面上的一些ID信息
-->
<!--文本输入框-->
用户名:<input type="text" id="username" placeholder="请输入用户名"/><br />
<!--密码框-->
密码:<input type="password" /><br />
确认密码:<input type="password" /><br />
邮箱:<input type="text" /><br />
手机号码:<input type="text"/><br />
靓照:<input type="file" /><br />
性别:
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
<br />
爱好:
<input type="checkbox">抽烟
<input type="checkbox">喝酒
<input type="checkbox">打麻将
<input type="checkbox">撩妹
<input type="checkbox">撸代码
<br />
择偶要求:
<textarea cols="40" rows="20"></textarea>
<br />
籍贯:
<select>
<option>----请选择----</option>
<option>湖北</option>
<option>湖南</option>
<option>北京</option>
<option>上海</option>
</select>
<br />
出生日期:
<input type="date" />
<br />
验证码:<input type="text" /><br />
<input type="submit" value="注册"/>
<input type="button" value="普通按钮"/>
<input type="reset" value="取消"/>
</form>
7、framset页面切割
<!--
framset:
cols:横向切割
rows:纵向切割
frame:
src:设置显示的页面
-->
<frameset rows="20%,*">
<frame src="up.html"/>
<frameset cols="20%,*">
<frame src="downleft.html"/>
<frame src="downright.html" name="rightFram"/>
</frameset>
</frameset>