【PHP微职位】第3天学习笔记

服务端 2018-09-05 00:01:12 阅读次数: 0 
学习课程：《Html5第一季》6~11节
学习时间：2018-09-04

**表格元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>表格元素</title>
</head>
<body>
<!-- 基本表格 -->
<table border="1">  
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
</table>

<br>
<!-- 横向和纵向单元格 -->
<table border="1" style="width: 300px">  
    <tr>
        <th rowspan="4">基本情况</th>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
    <tr>
        <td colspan="3">统计：合计2人</td>
    </tr>
</table>

<br>
<!-- thead tbody和tfoot -->
<table border="1" style="width: 300px"> 
    <caption>这是一个表格</caption>  <!-- 添加标题 -->
    <thead> 
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚否</th>
        </tr>
    </thead>
    <tbody>
        <tr style="background: red">
            <td>张三</td>
            <td>男</td>
            <td>未婚</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>已婚</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">统计：合计2人</td>
        </tr>
    </tfoot>
</table>

<br>
<!-- 设置列颜色方法案例1 -->
<table border="1" style="width: 300PX"> 
    <colgroup style="background: red" span="2"></colgroup>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
</table>

<br>
<!-- 设置列颜色方法案例2 -->
<table border="1" style="width: 300PX"> 
    <colgroup style="background: white" span="1"></colgroup>
    <colgroup style="background: red" span="1"></colgroup>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
</table>
<br>
<!-- 设置列颜色方法案例3 -->
<table border="1" style="width: 300PX"> 
    <colgroup>
        <col>
        <col style="background: red">
    </colgroup>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
</table>
</body>
</html>

**文档元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>文档元素</title>
</head>
<body>

<!-- 页面标头部分,属于区块，下面内容会换行 -->
<header>
    <hgroup>
        <h1>这是一个h1大标题</h1>
        <h4>这是一个h4副标题</h4>
    </hgroup>
    <nav>这里是一个导航</nav>
    这里存放页面标头部分：LOGO 标题 导航
</header>

<section>
    这里是文档主题部分
</section>

<article>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
</article>

<aside>...</aside>

<footer>
    这里存放的页面的尾部：版权声明 友情链接
    <h4>这是一个尾部h4副标题</h4>
    <address>这是联系方式</address>
</footer>
</body>
</html>

**嵌入元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>嵌入元素</title>
</head>
<body>

<!-- <a href="index.html">
    <img ismap src="1.jpg" alt="风景图" width="200" height="200">
</a> -->

<!-- 创建分区响应，热点区域 -->
<!-- <a href="index.html">
    <img src="1.jpg" alt="风景图" width="200" height="200" border="0" usemap="#Map">
    <map name="Map">
      <area shape="rect" coords="10,24,95,97" href="http://www.baidu.com" target="_blank" alt="百度">
      <area shape="circle" coords="145,64,42" href="http://www.so.com" target="_blank" alt="SOSO">
      <area shape="poly" coords="18,123" href="#">
      <area shape="poly" coords="50,114,50,163" href="#">
      <area shape="poly" coords="17,117,16,173,169,177,167,131,167,121" href="http://www.sougou.com" target="_blank" alt="搜狗">
    </map>
</a> -->
<!-- <img src="11.jpg">
<img src="11.jpg" alt="风景图"> -->

<!-- 一个区域引入固定区域 -->
<!-- <a href="http://www.baidu.com" target="in">百度</a>丨<a href="http://www.soso.com" target="in">好搜</a>
<br>
<iframe src="http://www.soso.com" width="800" height="400" name="in"></iframe> -->

<!-- 插入flash文件 -->
<!-- <embed src="flash.swf" type="application/x-shockwave-flash" width="400" height="200">
</embed> -->

<!-- 进度条 -->
<progress value="30" max="100"></progress>

<meter value="66" min="10" max="100" low="30" high="80" optimum="66"></meter>

</body>
</html>

**音频和视频**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>音频和视频</title>
</head>
<body>

<!-- webm mpeg-4 ogg -->

<!-- <video src="1.mp4" width="600" height="200" controls="" autoplay="" loop="" muted=""></video> -->

<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg"></video> -->

<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg" preload=""></video> -->

<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg" preload="metadata"></video> -->

<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg" preload="autoplay"></video> -->

<!-- <video width="600" height="200" controls="">
    <source src="1.mp4" type="">
    <source src="1.webm" type="">
    <source src="1.ogg" type="">
    <object>实现Flash插件的播放，如果屏蔽IE9以下则不需要</object>
</video> -->
<!-- 
<audio src="1.mp3"></audio> -->

<audio controls="">
    <source src="1.mp3" type="">
    <source src="1.m4a" type="">
    <source src="1.wav" type="">
</audio>
</body>
</html>

**表格元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>表单元素[上]</title>
</head>
<body>

<form id="register" method="get" name="reg" action="http://www.baidu.com" target="_blank" autocomplete="on">
<!--    用户名： <input type="" name="user" autofocus disabled="">   -->
<fieldset>
     <legend>注册分组</legend>
    <label for="user">
        用户名： 
    </label>
    <input id="user" name="user" autocomplete="off" value="请输入账号"><br>
<!--    <button>提交</button> -->
    <label>
        电子邮件： <input type="" name="bbs" form="register">
    </label>
</fieldset>
</form>
    <button type="submit" form="register">提交</button>
    <button type="reset" form="register">重置</button>
    <button type="button" form="register">其他</button>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>表单元素[中]</title>
</head>
<body>

<form action="http://www.so.com">
    <!-- <input type="text" name="user" maxlength="5" size="30" value="11111" disabled> -->

    <!-- <input type="text" list="abc" required=""> -->

    <!-- <input type="password" name="" placeholder="请输入密码"> -->

    <!-- <input type="search" name=""> -->

    <!-- <input type="number" name="" min="10" max="100" step="5"> -->

    <!-- <input type="date" name="">
    <input type="month" name="">
    <input type="time" name="">
    <input type="week" name="">
    <input type="datetime" name="">
    <input type="datetime-local" name=""> -->

    <!-- <input type="color" name="color"> -->

<!--    音乐 <input type="checkbox" name="music" value="1">
    音乐 <input type="checkbox" name="sport" value="2"> -->

<!--    <input type="radio" name="sex" value="1">男
    <input type="radio" name="sex" value="2" checked>女 -->

<!--    <input type="submit" name="">提交
    <input type="reset" name="">重置
    <input type="button" name="">一般按钮 -->

    <!-- <input type="image" src="1.jpg"> -->

<!--    <input type="email" name="">
    <input type="tel" name="">
    <input type="url" name=""> -->

    <!-- <input type="hidden" name="id" value="1"> -->

    <input type="file" name="" accept="image/gif">

    <button>提交</button>

</form>

<datalist id="abc">
    <option value="1">苹果</option>
    <option value="2">橘子</option>
    <option value="3" label="香蕉">
    <option value="菠萝">
</datalist>

</body>
</html>

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="utf-8">
    <title> 表单元素[下]</title>
</head>
<body>
<form action="http://www.baidu.com" oninput="res.value = num1.valueAsNumber*num2.valueAsNumber" novalidate="">
<!--    <select name="fruit" size="10" multiple="">
        <optgroup label="水果">
            <option value="1">苹果</option>
            <option value="2" selected="">橘子</option>
            <option value="3">香蕉</option>
        </optgroup>
        <optgroup label="粗粮">
            <option value="4">小米</option>
            <option value="5">大米</option>
            <option value="6">玉米</option>
        </optgroup>
    </select> -->

<!-- <textarea name="content" rows="10" cols="10" wrap="">请留下您的建议！</textarea> -->

<!--    <input type="number" id="num1">X<input type="number" id="num2">=
    <output for="num1 num2" name="res"></output> -->
<!--    <input type="text" required="">
    <input type="number" min="10" max="100"> -->
    <input type="text" placeholder="请输入区号+座机" pattern="^[\d]{2,4}\-[\d]{6,8}$" name="" required="">

    <button>提交</button>
</form>
</body>
</html>

**全局属性和其他**
<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <!-- <meta charset="utf-8"> -->
    <meta name="autor" content="bbs">
    <meta name="description" content="这是一个描述">
    <meta name="keywords" content="php;开发">
    <meta http-equiv="content-type" content="text/html charset=utf-8">
    <!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
    <title>全局属性和其他</title>
    <style type="text/css">
        #abc{
            color: red
        }
        .abc{
            color: blue
        }
    </style>
</head>
<body>

<div>1</div>

<div>

我     你

©

这是一段中文

<!--    <p id="abc">这是id</p>
 -->
<!--    <p class="abc">1</p>
    <p class="abc">2</p>
    <p class="abc">3</p> -->
    <!-- <input type="text" name="" accesskey="L"> -->

<p contenteditable="">我可以修改吗</p>

    <P dir="rtl" hidden>文字方向</P>

    <p lang="en" title="这是一个html5教程" style="color: red">Html5</p>

    <input type="text" name="user" tabindex="2">

    <input type="text" name="user" tabindex="1">  <!-- -1不会被选中 -->

</body>
</html>

猜你喜欢

转载自blog.51cto.com/pm365/2170401
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022