首页 > Web开发 > 详细

html学习

时间:2020-02-27 21:29:03      阅读:29      评论:0      收藏:0      [点我收藏+]

标签:性别   textarea   嵌套   -s   测试   协议   

0索引

1font标签

2img标签

3友情链接

4table标签

5input标签

6框架标签

7网站注册案例


 


 

1font标签 

标签常用属性

  • color: 颜色
  • size : 改变字体大小 范围:1~7
  • face : 字体
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>网站信息页面</title>
    </head>
    <body>
        <h1> 标题1 </h1>
        <h2> 标题2 </h2>
        
        <hr /><!--水平分割线-->
        
        我要<font color="red" size="1">回家 !!!</font> <br />
        
        <p>
        <strong>黑马程序员</strong>的学员多为大学毕业后,<em>有理想、有梦想,</em>想从事IT行业,而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”,必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量,并降低企业的用人风险。
        </p>
    </body>
</html>

 


 

 

2img标签

  • 基本属性

src:指定图片的路径

width: 宽度

height: 高度
alt:图片加载错误时的提示信息。

  • 相对路径:

./代表的是当前路径

../代表的上一级路径

../../代表的上上-级路径

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--在网页中显示图片-->
        <img src="../img/logo2.png" width="30%"/>
        <img src="../image/header.jpg" width="30%" />
        <img src="../img/美女22.jpg" width="500px" alt="这张图片可能加载问题" />
    </body>
</html>

 


 

 

3友情链接

  • ul:无序列表
    • type:
  • ol有序列表:
    • type:样式
    • start:起始索引
  • li:列表项
  • a超链接标签
    • href:要坊何的讎接地址. 指定要跳转去的链接地址需要加上http协议,如果访问的是本网站的html文件可以直接写文
    • target:网站首页打幵方式:
        _self: 默认打开方式在当前窗口打开
      • _blank: 新起一个标签页打开页面

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>hello world</title>
    </head>
    <body>
        <!--无序列表
            ul
                li 列表项
            type属性 . 小圆圈, 小方块, 默认小黑点
        -->
        <ul type="circle">
            <li>百度</li>
            <li>新浪</li>
        </ul>
        
        <hr />
        <!--
            有序列表ol
            常用属性:
                type : 指定序号的类型
                start : 从几开始,必须得写数字
        -->
        <ol type="1" start="2">
            <li>百度</li>
            <li>新浪</li>
        </ol>
    </body>
</html>


 4表格

  • table标签:
    • border:指定边框
    • width:宽度
    • height:高度
    • bgcolor:背景颜色
    • align:对齐方式
  • tr标签
  • td标签:
    • colspan:跨列操作
    •  rowspan:跨行操作
  • 表格单元格的合并
  • 表格的嵌套
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            描述:表格基本属性表设置            
        -->
        <table border="1px" width="400px" align="center" >
            <tr align="center">
                <td bgcolor="antiquewhite">1</td>
                <td>1</td>
            </tr>
            
            <tr align="center">
                <td>1</td>
                <td>1</td>
            </tr>
            
            <tr align="center">
                <td>1</td>
                <td>1</td>
            </tr>            
        </table>
        
        <hr />
        <!--
            描述:表格的设置       
        -->
        <table border="1px" width="400px" align="center">
            <tr align="center">
                <td  colspan="2" rowspan="2">1</td>
                
                <td>1</td>
            </tr>
            
            <tr align="center">
                
                <td>1</td>
            </tr>
            
            <tr align="center">
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            
            <tr align="center" >
                <td>1</td>
                <td>1</td>
                <td rowspan="2">1</td>
            </tr>
            
            <tr align="center">
                <td>1</td>
                <td>1</td>
                
            </tr>
        </table>    
    </body>
</html>

 


 

 

5input标签

1表单标签<from></from>

  • action : 直接提交的地址
  • method :
    • get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
    • post 方式 会将参数封装在请求体中, 没有这样的限制


2输入标签
input :

  • type: 指定输入项的类型:
    • text : 文本
    • password : 密码框
    • radio : 单选按钮
    • checkbox : 复选框
    • file : 上传文件
    • submit : 提交按钮
    • button : 普通按钮
    • reset : 重置按钮
    • hidden : 隐藏域
    • select : 下拉列表
      option : 选择项
    • date : 日期类型
    • tel : 手机号(在手机上才能看到效果
    • number : 只允许输入数字
  • placeholder : 指定默认的提示信息
  • name : 在表单提交的时候,当作参数的名称
  • id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
  • textarea : 文本域, 可以输入一段文本
    • cols : 指定宽度
    • rows : 指定的是高度
  • 用form标签来包裹要提交的内容
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <!--用form标签来包裹要提交的内容-->
        <form action="table.html"  > <!--使用method="post"时因为链接中有中文,所以要在文件家中使用浏览器打开 -->
            <!--隐藏域
                主要是用来存放页面上一些ID信息
            -->
            <input type="hidden" value="[email protected]" name="uid"/>
            <!--文本输入框-->
            用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" /><br />
        密码:<input type="password" placeholder="请输入密码"/> <br />
        确认密码:<input type="password" /><br />
        邮箱:<input type ="text" /><br />
        手机号码:<input type="tel" /><br />       <!--使用number时在点击注册时会显示只能输入数字,tel在手机上会弹出一个数字键盘    -->
        照片:<input type="file" /><br />
        性别:<input type="radio" name="sex"/><!--加上相同的名字保证其是单选而不是多选  -->
            <input type="radio" name="sex" /><br />
        爱好 :<input type= "checkbox"/> 阅读
            <input type= "checkbox"/> 画画
            <input type= "checkbox"/> 代码<br />
        理想与追求:<textarea cols="3"></textarea><br /><!--    -->
        籍贯:    <select >
                    <option>--请选择--</option><!--要加上这句话否则下拉框无法完全显示 -->
                    <option value="安徽"></option>
                    <option value="江苏"></option>
                    <option value="关东"></option>
                </select><br />
        出生日期:<input type="datetime-local" /><br /> 
                                                   <!-- -->
        校验码:<input type="text" />
            <input type="submit" value="注册"/>
            <input type="button" value="普通按钮"/>
            <input type="reset" value="重置按钮"/>
            
         </form>
    </body>
</html>

 


 

 

6框架标签

使用frameset 需要将body标签取掉

  • cols : 按列划分页面
  • rows : 按行划分页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--
        如果使用frameset 需要将body标签取掉
            cols : 按列划分页面
            rows : 按行划分页面
    -->
    <frameset rows="10%,30%,*">
        <frame src="aaa.html" />
        <frame src="bbb.html" />
        <frame src="ccc.html" />
    </frameset>
</html>

网站后台:(QQ邮箱)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset rows="15%,*">
        <frame src="aaa.html" />
        <frameset cols="15%,*">
            <frame src="bbb.html"/>
            <frame src="ccc.html" name="rightFrame"/>
        </frameset>
    </frameset>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body bgcolor="pink">
        <a href="data.html" target="rightFrame">收件箱</a><br />
        <a href="#">发送箱</a><br />
        <a href="#">垃圾箱</a><br />
    </body>
</html>

 


 

7网站注册案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            创建一个5行一列的表格
            1. logo部分
            2. 导航栏
            3. 注册部分
            4. 页脚图片
            5. 网站声明信息
        -->
        <table border="1px" width="100%">
            <!-- logo部分-->
            <tr>
                <td>
                    <table width="100%">
                        <tr>
                            <td>
                                <img src="../img/logo2.png" />
                            </td>
                            <td>
                                <img src="../image/header.jpg" />
                            </td>
                            <td>
                                <a href="#">登录</a>
                                <a href="#">注册</a>
                                <a href="#">购物车</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <!---->
            <tr bgcolor="black">
                <td height="50px">
                    <a href="#"><font color="white">首页</font></a>
                    <a href="#"><font color="white">手机数码</font></a>
                    <a href="#"><font color="white">鞋靴箱包</font></a>
                    <a href="#"><font color="white">电脑办公</font></a>
                    <a href="#"><font color="white">香烟酒水</font></a>
                </td>
            </tr>
            
            
            <tr>
                <td background="../image/regist_bg.jpg" height="500px">
                    
                    <table border="5px" width="60%" height="80%" bgcolor="white" align="center" >
                        
                        <tr>
                            <td>
                                <form action="注册入门案例.html">
                                    <table width="60%" align="center"> 
                                        <tr>
                                            <td colspan="2"><font color="blue" size="5">会员注册</font> USER REGISTER</td>
                                        </tr>
                                        <tr>
                                            <td>用户名:</td>
                                            <td>
                                                <input type="text"  placeholder="请输入用户名"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>密   码:</td>
                                            <td>
                                                <input type="password"  placeholder="请输入密码"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>确认密码:</td>
                                            <td>
                                                <input type="password"  placeholder="请再次输入密码"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>email:</td>
                                            <td>
                                                <input type="text"  placeholder="请输入邮箱"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>姓名:</td>
                                            <td>
                                                <input type="text"  placeholder="请输入真实姓名"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>性别:</td>
                                            <td>
                                                <input type="radio" name="sex" /><input type="radio" name="sex" /><input type="radio" name="sex" /></td>
                                        </tr>
                                        <tr>
                                            <td>出生日期:</td>
                                            <td>
                                                <input type="date"  />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>验证码:</td>
                                            <td>
                                                <input type="text"  />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>
                                                <input type="submit" value="注册"  />
                                            </td>
                                        </tr>
                                    </table>
                                </form>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>


            <tr>
                <td>
                    <img src="../image/footer.jpg" width="100%" />
                </td>
            </tr>
            <!--第八部分: 放一堆超链接-->
            <tr>
                <td align="center">
                            
                    <a href="#">关于我们</a>
                    <a href="#">联系我们</a>
                    <a href="#">招贤纳士</a>
                    <a href="#">法律声明</a>
                    <a href="#">友情链接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服务声明</a>
                    <a href="#">广告声明</a>
                    <br />
Copyright © 2005-2016 传智商城 版权所有
                </td>
            </tr>
        </table>
    </body>
</html>

 

html学习

标签:性别   textarea   嵌套   -s   测试   协议   

原文:https://www.cnblogs.com/wml2018/p/12372316.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号