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>
扫一扫
4465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
