网站信息案例
字体标签 font
color: 颜色
size: 大小 1~7
face: 改变字体
p 段落标签
h标题标签 : 1~6
br 换行
hr 水平线
b 加粗
i 斜体
strong : 加粗 包含语义
em : 斜体 包含语义
网站图片案例
img标签
src : 指定图片的路径
width: 宽度
height: 高度
alt : 图片加载错误时的提示信息
相对路径:
./ 代表的是当前路径
../ 代表的上一级路径
../../ 代表的上上一级路径
友情链接:
ul: 无序列表
type :
ol: 有序列表
type : 样式
start : 起始索引
li : 列表项
a 超链接标签
href : 要访问的链接地址
如果是网络地址需要加上http协议 ,
如果访问的是本网站的html文件,可以直接写文件路径
target : 打开方式
_self: 默认打开方式,在当前窗口打开
_blank: 新起一个标签页打开页面
1 ????????<!--无序列表 2 ????????????ul 3 ????????????????li 列表项 4 ????????????type属性 . 小圆圈, 小方块, 默认小黑点 5 ????????--> 6 ????????<ul type="square"> 7 ????????????<li>百度</li> 8 ????????????<li>新浪微博</li> 9 ????????????<li>黑马程序员</li>10 ????????</ul>11 ????????12 ????????<hr />13 ????????14 ????????<!--15 ????????????有序列表16 ????????????常用属性:17 ????????????????type : 指定序号的类型18 ????????????????start : 从几开始,必须得写数字19 ????????-->20 ????????<ol type="a" start="2">21 ????????????<li>百度</li>22 ????????????<li>新浪微博</li>23 ????????????<li>黑马程序员</li>24 ????????</ol>
1 ????????<ul>2 ????????????<li style="display: inline;"><a href="http://www.baihe.com" target="_blank">百合网</a></li>3 ????????????<li style="display: inline;"><a href="http://www.jiayuan.com">世纪家园</a></li>4 ????????????<li style="display: inline;">珍爱网</li>5 ????????????<li style="display: inline;">非诚勿扰</li>6 ????????</ul>
网站首页
table标签
border: 指定边框
width : 宽度
height : 高度
bgcolor : 背景颜色
align : 对齐方式
tr标签
td标签
colspan: 跨列操作
rowspan: 跨行操作
表格单元格的合并
表格的嵌套
1 ????????<table border="1px" width="400px" bgcolor="yellow" align="center">2 ????????????<tr bgcolor="red" align="center">3 ????????????????<td colspan="2">11</td>4 ????????????????<td>13</td>5 ????????????????<td>14</td>6 ????????????????<td>15</td>7 ????????????</tr>8 ????????</table>
<!--
表单标签
action : 直接提交的地址
method :
get 方式 ?默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
post 方式 ?会将参数封装在请求体中, 没有这样的限制
input :
type: 指定输入项的类型
text : 文本
password : ?密码框
radio :单选按钮
checkbox : ?复选框
file ?: 上传文件
submit ??: 提交按钮
button ?: 普通按钮
reset : 重置按钮
hidden ?: 隐藏域
date ???: 日期类型
tel ????: 手机号
number ??: 只允许输入数字
placeholder : 指定默认的提示信息
name : 在表单提交的时候,当作参数的名称
id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
textarea : 文本域, 可以输入一段文本
cols : 指定宽度
rows : 指定的是高度
select ?: 下拉列表
option : 选择项
-->
1 ????????<form action="../04-网站首页/网站首页.html" method="post" > 2 ????????????<!--隐藏域 3 ????????????????主要是用来存放页面上一些ID信息 4 ????????????--> 5 ????????????<input type="hidden" value="sadfaldsfkjl@o3214813278" name="uid"/> 6 ????????????<!--文本输入框--> 7 ????????????用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" /><br /> 8 ????????????<!--密码框--> 9 ????????????密码: ??<input type="password" placeholder="请输入密码" /> <br />10 ????????????确认密码: <input type="password" ?/> <br />11 ????????????邮箱: ?<input type="text" ?/> <br />12 ????????????13 ????????????手机号码: <input type="tel" ?/> <br />14 ????????????靓照: <input type="file" /> <br />15 ????????????16 ????????????性别: <input type="radio" name="sex" />男17 ?????????????????<input type="radio" name="sex" ?/>女 18 ?????????????????<input type="radio" name="sex" />妖 <br />19 ????????????20 ????????????爱好:21 ????????????????<input type="checkbox" />抽烟22 ????????????????<input type="checkbox" />喝酒23 ????????????????<input type="checkbox" />烫头24 ????????????????<input type="checkbox" />撸代码25 ????????????????<input type="checkbox" />大宝剑26 ????????????????<br />27 ????????????28 ????????????择偶要求:29 ????????????????<textarea cols="40" rows="4"></textarea><br />30 ????????????籍贯 ???:31 ????????????????<select>32 ????????????????????<option>--请选择--</option>33 ????????????????????<option>湖北</option>34 ????????????????????<option>内蒙古</option>35 ????????????????????<option>火星</option>36 ????????????????</select>37 ????????????????38 ????????????????<br />39 ????????????出生日期: 40 ????????????????<input type="datetime-local" /> <br />41 ????????????验证码: <input type="text" ?/><br />42 ????????????43 ????????????<input type="submit" ?value="注册"/>44 ????????????<input type="button" ?value="普通按钮"/>45 ????????????<input type="reset" ?value="重置按钮"/>46 ????????</form>
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????</head> 7 ????<body bgcolor="pink"> 8 ????????<a href="data.html" target="rightFrame">收件箱</a><br /> 9 ????????<a href="#">发送箱</a><br />10 ????????<a href="#">垃圾箱</a><br />11 ????</body>12 </html>
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????</head> 7 ????<frameset rows="15%,*"> 8 ????????<frame src="aaa.html" /> 9 ????????<frameset cols="15%,*">10 ????????????<frame src="bbb.html"/>11 ????????????<frame src="ccc.html" name="rightFrame"/>12 ????????</frameset>13 ????</frameset>14 </html>
HTML
原文地址：https://www.cnblogs.com/samuraihuang/p/10390149.html