HTML学习日志

12.18

重新整理复习了HTML的学习内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>  <!--必须放在title前面以及其他meta前面-->
        <title>Hello </title>  <!--JavaScript引入用script标签,css用link标签-->
    </head>
    <body> 
        <!--文本-->
        <h3>出发</h3>  <!--h1-6为标题标签,依次减少,h意为header-->
        <p>岁月漫长,心怀热爱</br>携手共赴,星辰大海</p> </br> <!--</br>为换行标签,也可以用两个<p>标签换行-->
        <strong>岁月漫长,心怀热爱</br>携手共赴,星辰大海 </strong></br>   <!--strong 和b为粗体标签,因为strong比b更具语义性尽量用strong-->
        <em>岁月漫长,心怀热爱</br>携手共赴,星辰大海</em></br>  <!--em i cite三个都可以表示斜体,尽量用em,原因如上-->
        <!--sup为上标,sub为下标-->
        <em><s>岁月漫长,心怀热爱</s></br><u>携手共赴,星辰大海</u></em> </br> <!--s为删除线 ,u为下划线-->
        <big>岁月漫长,心怀热爱</big></br> <!--big变大,small变小-->
        <small>携手共赴,星辰大海</small>
        <p>岁月漫长,心怀热爱</br>
            <hr/>   <!--水平线标签-->   <!--div标签用来划分html的区域-->
            携手共赴,星辰大海</p>
        <!--列表-->
        <ol type="A">
            <li>当你想鸟一样</li>    <!--ol为有序列表,type可以决定列表的序号,1为数字,a与A为字母,i与I为罗马数字-->
            <li>飞往你的山</li>
        </ol>
        <ul type="square">  <!--ul为无序列表,type类型为disc为默认实心圆,circle为空心圆,square为正方体-->
            <li>没有什么能阻止一株草对阳光的渴望</li>
            <li>没有什么能够压抑一只鸟对天空的向往</li>
            <li>对每一个怀抱坚定信念的生命而言</li>
            <li>再大的风雨也不能凝固跳跃的心脏</li>
        </ul>
        <dl>  <!--dl定义列表,dt名词,dd描述-->
            <div id="名人语录">
            <dt>周小平</dt>
            <dd>江山不负英雄泪,且把利剑破长空</dd>
        </dl>
        <!--表格-->
        <table>  <!--<table>和</table>表示整个表格的开始和结束-->
            <caption>学生成绩表</caption>  <!--captain为标题标签,一个表格只能有一个标题-->
            <thead>
                <tr>  <!--<tr>和</tr>表示行的开始和结束-->
                <th>姓名</th>  <!--th为表头单元格-->
                <th>性别</th>
                <th>成绩</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                  <td>张三</td>   <!--<td>和</td>表示单元格的开始和结束-->
                  <td>男</td>
                  <td>250</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>男</td>
                    <td>520</td>
                </tr>
            </tbody>  <!---thead和tbody与tfoot使表格更好的语义化-->
            <tfoot>
                <tr>
                    <td>平均分</td>
                    <td colspan="2">385</td>  <!--rowspan合并行,colspan合并列-->
                </tr>
            </tfoot>   <!--tfoot一般用于统计数据-->
        </table>
        <!--图片和超链接-->
        <img src="c:\Users\YuXu\OneDrive\图片\Saved Pictures\R-C.jpg" alt="风景" title="view"/>
        <!--src用于指定这个图片所在的路径,alt和title都是用于指定图片的提示文字,src和alt这两个是必选属性,而title是可选属性-->
        <!--上述图片的相对路径为img src="R-C.jpg"/-->
        <a href="http://www.lvyestudy.com/html/a-tag" target="_blank">lvyestudy</a>    
        <!--href表示你想要跳转到那个页面的路径,target属性来定义超链接打开窗口的方式,_blank在新窗口打开链接-->
        <a href="#名人语录">跳转</a>
        <!--#表示锚点链接,跳转到该页面内部某处-->
        <!--表单-->
        <form method="post"><!--表单名称name 提交方式method 提交地址action 打开方式target 编码方式enctype	-->
            爱好<input type="text" value="eating" size="8" maxlength="7">
            <!--单行文本框type类型为text,设置文本框的默认值value 设置文本框的长度size 设置文本框中最多可以输入的字符数maxlength-->	
            生日<input type="password"><!--密码文本框-->
            生日:
            <input type="radio" name="birth" value="July checked" />七月
            <input type="radio" name="birth" value="June" />六月<br>
            <!--单选框,name属性表示单选按钮所在的组名,而value表示单选按钮的取值,checked默认选中-->
            你喜欢的水果:<br/>
            <input type="checkbox" name="fruit" value="苹果"/>苹果
            <input type="checkbox" name="fruit" value="香蕉"/>香蕉
            <input type="checkbox" name="fruit" value="西瓜"/>西瓜
            <input type="checkbox" name="fruit" value="李子"/>李子<br>
            <!--复选框-->
            <input type="button" value="普通按钮"/><!--value为按钮上的字-->
            <input type="submit" value="提交按钮"/>
            <input type="reset" value="重置" /><!--重置按钮一般用来清除用户在表单中输入的内容,重置按钮只能清空它“所在form标签”内表单中的内容-->
            <input type="file"/><br><!--文件上传按钮-->
            自我介绍:<br>
            <textarea rows="5" cols="3" value="10">你好</textarea>
            <!--多行文本框textarea-->  
            <select multiple size="6">
                <option>HTML</option>
                <option>CSS</option>
                <option selected>jQuery</option> <!--selected为是否选中,value为选项值-->
                <option>JavaScript</option>
                <option>Vue.js</option>
            </select><!--下拉列表,设置下拉列表可以选择多项multiple 设置下拉列表显示几个列表项,取值为整数size -->    	
            <!--内嵌框架--> 
            <iframe src="http://www.lvyestudy.com/html/iframe-tag" width="200" height="200"></iframe>        



        </form>

    </body>  
</html>

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值