HTML

• 网站信息案例

  • 字体标签 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>

 

转载于:https://www.cnblogs.com/samuraihuang/p/10390149.html