HTML超文本标记语言

基本结构：html head body

<!DOCTYPE html>
<html>
  
  <head>
    <title>Page Title</title>
  </head>

  <body>
    <p>Page Contxt</p>
  </body>

</html>

标签

  • 标题标签

        <h1>一级标题标签</h1>
    <h2>二级标题标签</h2>
    <h3>三级标题标签</h3>
    <h4>四级标题标签</h4>
    <h5>五级标题标签</h5>

  • 段落标签，<p>段落</p>

  • 换行标签，<br/>

  • 水平线标签，<hr/>

  • 粗体，<strong>粗体</strong>

  • 斜体，<em>斜体</em>

  • 空格，&nbsp;

  • 大于，&gt;。小于&lt;

  • 版权符号：&copy;

图像标签<img/>

<img src="img/timg (2).jpg" alt="阿精" title="看屁呢！" width="200" height="200" />
  • src：图片地址
  • alt：替换文本，图片无法加载时显示
  • title：鼠标悬停在图片上显示的文字

超链接

文字超链接，<a href="http://www.runoob.com">这是一个链接</a>

图片超链接

    <a href="1.我的第一个网页">
        <img src="img/timg (2).jpg" alt="阿精" title="看屁呢！" width="200" height="200" />
    </a>

锚链接

<a name="#top">顶</a>
    ....
    <a href="#top">回到顶</a>
	<a href="#last">直达底</a>
<a name="#last">底</a>

功能性链接

邮箱链接：mailto
<a href="mailto:3737@qq.com">邮箱链接：mailto</a>
qq推广链接：
<!--百度搜索qq推广-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=446783737&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:446783737:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

块元素和行内元素

块元素：独占一行。h1，h2，h3，p

行内元素：不会自动换行 strong，em

列表

资源的一种展示形式，以列表的方式展示，使信息资源结构化和条理化

有序列表<ol><li></li></ol>

  1. 000
  2. 000

无序列表<ui><li></li></ui>

  • 000
  • 000

定义列表<dl><dt><dd> </dd></dt></dl>

dl：标签 dt：列表名称 dd：列表类容

表格标签

tr：表示一行 td：表示一列 rowspan：向下跨行 colspan：向后跨列

<table border="1">
    <tr>
        <td rowspan="2">00</td>
        <td colspan="5">1</td>
    </tr>
    <tr>
        <td>00</td>
        <td>00</td>
        <td>00</td>
        <td>00</td>
        <td>00</td>
        <td>2</td>
    </tr>
</table>

媒体元素

视频：<video src="" controls autoplay/> controls--->控制条

音频：<audio src="" controls autoplay/>

iframe 内联框架

<iframe 
src="https://www.cnblogs.com/qqkkOvO/" 
frameborder="0" 
name=""
width="1000px" height="800px"></iframe>
name--->框架标识名

表单

<!-- action：表单提交的位置，可以是网站，也可以是一个请求处理地址 -->
<form action="" method="GET">
    <p>
       名字： <input type="text" name="name">
    </p>
    <p>
        密码： <input type="password" name="passord" value="123" maxlength="6">
     </p>
     <p>性别：
         <!-- name,表示单选框的分组，一个组只能选一个 -->
                <input type="radio" value="男孩" name="sex">男
                <input type="radio" value="女孩" name="sex">女
     </p>
     <p>爱好：
         <input type="checkbox" value="sleep" name="hobby">睡觉
         <input type="checkbox" value="code" name="hobby">敲代码
         <input type="checkbox" value="chat" name="hobby">聊天
         <input type="checkbox" value="game" name="hobby">游戏
     </p>
     <p>上传文件：
         <input type="file" name="files">
     </p>
     <p>
         <input type="submit">
         <input type="reset">
     </p>
</form>

表单元素

input

  • type：
    • text文本框
    • search搜索框
    • password密码框
    • radio单选框
    • checkbox多选框
    • file文件域
    • email邮箱
    • number数量，step=2表示每次 +/- 2
    • range滑块
    • button按钮
    • image图片按钮
    • submit提交
    • reset重置
  • value，初始值
  • required，非空判断。当前字段必须有值，没有值无法提交
  • hidden，隐藏域
  • palaceholder，提示信息
  • readonly，只读
  • disabled，禁用
  • maxlength，最大长度

select, option下拉框

     <p>
         <select name="country">
             <option value="Chana">中国</option>
             <option value="mm">没国</option>
             <option value="ee">额国</option>
             <option value="rr">日国</option>
         </select>
     </p>

textarea文本域

     <p>意见：
         <textarea name="textarea" cols="60" rows="10">内容</textarea>
     </p>

表单验证

pattern 正则表达式

常用正则表达式地址：https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html

版权声明：本文为qqkkOvO原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/qqkkOvO/p/13963669.html