每一年都奔走在自己热爱里

没有人是一座孤岛，总有谁爱着你

HTML5基础学习

1.W3C标准

  • World Wide Web Consortium：万维网联盟
  • W3C标准包括：
    • 结构化标准语言：HTML,XML
    • 表现标准语言：CSS
    • 行为标准：DOM,ECMAScript(javascrip)

2.网页基本信息

  • 实例

    <!DOCTYPE html>
<!--<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本-->
<html>
<head>
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

  • 注释:

    <!——注释内容-->

  • 头部标签

    <head>
    <!--放置网页头部需要的信息-->
</head>

  • 段落标签

    <p>
    <!--段落标签-->
</p>

  • 换行标签

    <p> 
使用 br 元素<br>在文本中<br>换行。 
</p>

    运行结果：

  • 水平线标签

    <hr>	定义水平线。

  • 图像标签

    <img src="smiley-2.gif" alt="Smiley face" title="Smiley face" width="42" height="42">
<!--src代表资源位置，alt图片的替代文字，title鼠标移动到图片时的提示文字，及图像宽度/高度。

  • 链接标签

    <a href="//www.runoob.com">访问菜鸟教程!</a>
<!--href URL规定链接的目标 URL。-->
<!--target 规定在何处打开目标 URL。仅在 href 属性存在时使用。
			_blank
            _parent
			_self
			_top

			_blank：新窗口打开。
			_parent：在父窗口中打开链接。
			_self：默认，当前页面跳转。
			_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。-->

  • 列表标签

    <!--有序列表标签-->
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<!--<ul>	定义一个无序列表
	<ol>	定义一个有序列表
	<li>	定义一个列表项		-->

    运行效果：

  • 表格标签

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签练习二</title>
</head>
<body>
<table border="1" cellspacing="0" align="center">
    <caption>学生成绩表</caption><!--	定义表格标题-->
        <thead> <!--<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）也可不加！-->
        <tr ><!--定义表的一行-->
            <th>编号</th><!--定义表的一列-->
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        </thead>
    <tbody>
    <tr>
        <td align="center">1</td>
        <td align="center">小龙女</td>
        <td align="center">女</td>
        <td align="center">100</td>
    </tr>
    <tr>
        <td align="center">2</td>
        <td align="center">杨过</td>
        <td align="center">男</td>
        <td rowspan="3" align="center">90</td><!--规定单元格可横跨的行数。-->
    </tr>
    <tr>
        <td align="center">3</td>
        <td align="center">金轮法王</td>
        <td align="center">男</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td align="center">总成绩</td>
        <td colspan="3" align="center">150</td><!--规定单元格可横跨的列数。-->
    </tr>
    </tfoot>
</table>
</body>
</html>

    运行效果：

  • 媒体元素

    <!--
<audio>New	定义声音，比如音乐或其他音频流。
<source>New	定义media元素 (<video> 和 <audio>)的媒体资源。media
<track>New	为媒体(<video> 和 <audio>)元素定义外部文本轨道。
<video>New	定义一个音频或者视频
-->    
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

  • 内联标签

    <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

  • 表单

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<form action="#" method="get">
    <!--method	get
				post	规定用于发送表单数据的 HTTP 方法。
		action	URL		规定当提交表单时向何处发送表单数据。
	-->
    
    
    <table border="1" align="center" width="500">
        <tr>
            <td>
                <label for="uesrname"><p>用户名</p></label> <!--指向特定的标签-->
            </td>
            <td>
                <input type="text" name="username" placeholder="请输入账号" id="uesrname">
            </td>
        </tr>
        <tr>
            <td>
                <p>密码</p>
            </td>
            <td>
                <input type="password" name="password" placeholder="请输入密码"><!--placeholder输入提示-->
            </td>
        </tr>
        <tr>
            <td>
                <p>Email</p>
            </td>
            <td>
                <input type="email" name="email" placeholder="请输入Email">
            </td>
        </tr>
        <tr>
            <td>
                <p>请输入姓名</p>
            </td>
            <td>
                <input type="text" name="name" placeholder="请输入真实姓名">
            </td>
        </tr>
        <tr>
            <td>
                <p>手机号码</p>
            </td>
            <td>
                <input type="text" name="phone" placeholder="请输入您的手机号码">
            </td>
        </tr>
        <tr>
            <td>
                <p>性别</p>
            </td>
            <td>
                <input type="radio" name="gender">男
                <input type="radio" name="gender">女
            </td>
        </tr>
        <tr>
            <td>
                <p>出生日期</p>
            </td>
            <td>
                <input type="date">
            </td>
        </tr>
        <tr>
            <td>
                <p>验证码</p>
            </td>
            <td>
                <input type="text"><img src="./image/captcha.gif" alt="">
            </td>
        </tr>
        <tr>
            <td align="center" colspan="2">
                <input type="submit" value="注册">
            </td>
        </tr>
    </table>
</form>
</body>
</html>
posted @ 2020-10-21 16:55  雨下整夜~  阅读(67)  评论(0)    收藏  举报