HTML5

HTML

Hyper Text Markup Language——超文本标记语言

超文本包括:文字、图片、音频、视频、动画

网页基本标签

  • 标题标签:<h1></h1>
  • 段落标签:<p></p>
  • 换行:<br><br/>
  • 水平线:<hr><hr/>
  • 粗体:<strong></strong>
  • 斜体:<em></em>
  • 特殊符号:
    • 空格:&nbsp;
    • 大于,大于等于: &gt;&ge;
    • 小于,小于等于:&lt;&le;
    • 版权:&copy;

图像标签

<!--
src:图像地址 (必填)
alt:图片名字 (必填)
-->
<img src="../resources/image/1.jpg" alt="个人头像" title="悬停提示" width="100" height="100">

超链接标签

<!--
href:表示要跳转到哪个页面
target:表示在哪个页面打开
    _blank 在一个空页面打开
    _self 在当前页面打开(默认)
-->
<a href="http://www.baidu.com" target="_blank">跳转到百度</a>
<br/>
<a href="http://www.baidu.com" target="_self">
    <img src="../resources/image/1.jpg" alt="个人头像">
</a>

锚链接:跳转到指定的锚

<a name="top">顶部</a>
<a href="#top">回到顶部</a>

功能性链接:跳转到邮箱、QQ等

块元素和行内元素:

  • 块元素:无论内容多少,高元素独占一行,如p标签,标题标签

  • 行内元素:行内元素可共存在一行中,如a标签,strong标签,em标签等

列表

  • 无序列表:<ul></ul>
  • 有序列表: <ol></ol>
  • 自定义列表:<dl></dl>
<!--有序列表-->
<ol>
    <li>Python</li>
    <li>Java</li>
    <li>C</li>
    <li>PHP</li>
    <li>C++</li>
</ol>

<!--无序列表-->
<ul>
    <li>Python</li>
    <li>Java</li>
    <li>C</li>
    <li>PHP</li>
    <li>C++</li>
</ul>

<!--自定义列表-->
<dl>
    <dt>标题:编程语言</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>PHP</dd>
    <dd>C</dd>
</dl>

表格

<table></table>:表格标签

  • <tr></tr>: 一行
  • <td></td>:一列
<table border="1">
    <tr>
        <!--colspan:跨列-->
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <!--rowspan:跨行-->
        <td rowspan="2">sen</td>
        <td>语文</td>
        <td>99</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">chen</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>98</td>
    </tr>
</table>

在这里插入图片描述

媒体元素

<video src=""></video>:视频标签

  • src:视频路径
  • controls:控制条
  • autoplay:打开网页自动播放
<video src="../resources/video/1.mp4" controls autoplay></video>

<audio src=""></audio>:音频标签

  • src:音频路径
  • controls:控制条
  • autoplay:打开网页自动播放

页面结构

在这里插入图片描述

表单

<form action="" method=""></form>:表单标签

  • action表示向何处发送表单数据
  • method只有两种方法,getpost
    • get提交的信息会显示在url上,不安全,但高效
    • post提交的信息不显示在url上,可提交大文件

<input type="" name="">:表单中的输入标签

  • type:指定元素的类型。text password checkbox radio submit reset file image button hidden。除此之外,还有email url number range search
  • name:指定表单元素的名称
  • value:元素的初始值。typeradio必须指定一个值
  • size:指定表单元素的初始宽度。typetext``password时,以字符为单位,其他类型以像素为单位
  • maxlengthtypetext``password时输入的最大字符数
  • checkedtyperadio``checkbox,指定按钮是否被选中

<select name=""></select>:表单中的下拉框标签

  • <option value="" selected></option>:添加选项,value选项的值,selected默认被选中。

<textarea name="" cols="" rows="" value=""></textarea>:表单中的文本域标签

  • cols:文本域占多少列
  • rows:文本域占多少行

表单应用

readonly只读

disable禁用

hidden隐藏

idlabel标签配合使用

表单初级验证

placeholder=""输入框提示信息

required要求非空

pattern正则表达式

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页