数据库运维
记录DBA学习成长历程
当前位置：MySQL学习笔记 > 开发 > PHP > 正文

第1课 HTML入门代码

2022-09-12 分类：PHP 阅读(831)
文章目录
标题
<html>
<head>
    <title>first.html</title>
</head>
<body>

 	<h1>标题1</h1>
 	<h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>
字体
<html>
<head>
    <title>first.html</title>
</head>
<body>
 <font size=7 face="隶书" color="blue">这是第一个页面。哈哈哈</font>
 <!--这里是一个注释，只有程序员和队友才能看到-->
 <p>
 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
 </p>
  <p>
 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
 </p>
 	<h1>标题1</h1>
 	<h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>
段落和注释
<html>
<head>
    <title>first.html</title>
</head>
<body>
 <!--这里是一个注释，只有程序员和队友才能看到-->
 <p>
 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
 </p>
  <p>
 	慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。
 </p>
 	
</body>
</html>
img标签
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    logo:<img src="image/welcome.png" alt="not find" width="600px" height="100px" />
</body>
</html>
超链接
<html>
  <head>
    <title>first.html</title>
  </head>
  <body>
    <p><a href="welcome.html">打开新页面</a></p>
    <a href="http://www.imooc.com">慕课网</a>
    <a href="image/logo.png">打开一个图片</a>
    <a href="http://www.imooc.com" target="_blank">
    	 <img src="image/logo.png">
    </a>
  </body>
</html>
描点链接
<html>
  <head>
    <title>first.html</title>
  </head>
  <body>
    <p><a href="#num-1">锚点1</a></p>
    <p><a href="#num-2">锚点2</a></p>

    <a name="num-1">
    <p>num-1慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。</p>
    <a name="num-2">
    <p>num-2慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。</p>
  </body>
</html>
列表
<html>
  <head>
    <title>first.html</title>
  </head>
  <body>
    <ul>
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
      <li>ddd</li>
      <li>000</li>
    </ul>
     <ol>
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
      <li>ddd</li>
      <li>000</li>
    </ol>
  </body>
</html>
表格1
<html>
  <head>
    <title>first.html</title>
  </head>
  <body>
   <table border="1" width="600px">
   	 <tr>
   	 	<td>生日</td>
   	 	<td>性别</td>
   	 	<td>生日</td>
   	 	<td>工资</td>
   	 </tr>
   	 <tr>
   	 	<td>zhangsan</td>
   	 	<td>nan</td>
   	 	<td>1234</td>
   	 	<td>4321</td>
   	 </tr>
   	 <tr>
   	 	<td>lisi</td>
   	 	<td>nan</td>
   	 	<td>1111</td>
   	 	<td>2222</td>
   	 </tr>
   </table>
   <p>
   	<table border="1" width="700px">
         <tr>
            <td>星期</td>
            <td>星期1</td>
            <td>星期2</td>
            <td>星期3</td>
            <td>星期4</td>
            <td>星期5</td>
        </tr>
        <tr>
            <td>第1节</td>
            <td>数</td>
            <td>数</td>
            <td>数</td>
            <td>数</td>
            <td>数</td>
        </tr>
        <tr>
            <td>第2节</td>
            <td>英</td>
            <td>英</td>
            <td>数</td>
            <td>数</td>
            <td>音</td>
        </tr>
        <tr>
            <td>第3节</td>
            <td>语</td>
            <td>音</td>
            <td>美</td>
            <td>语</td>
            <td>语</td>
        </tr>
        <tr>
            <td>第4节</td>
            <td>语</td>
            <td>语</td>
            <td>外</td>
            <td>语</td>
            <td>体</td>
        </tr>
        <tr>
            <td>午休</td>
            <td>午休</td>
            <td>午休</td>
            <td>午休</td>
            <td>午休</td>
            <td>午休</td>
        </tr>
        <tr>
            <td>第5节</td>
            <td>语</td>
            <td>数</td>
            <td>体</td>
            <td>美</td>
            <td>劳</td>
        </tr>
        <tr>
            <td>第6节</td>
            <td>自</td>
            <td>自</td>
            <td>自</td>
            <td>自</td>
            <td>自</td>
        </tr>
    </table>
  </body>
</html>
表格2
<html>
  <head>
    <title>first.html</title>
  </head>
  <body>
   <table border="1" width="700px">
        <tr>
            <td>星期</td>
            <td>星期1</td>
            <td>星期2</td>
            <td>星期3</td>
            <td>星期4</td>
            <td>星期5</td>
        </tr>
        <tr>
            <td>第1节</td>
            <td>数</td>
            <td>数</td>
            <td colspan="2" rowspan="2" align="center" valign="middle">数</td>
            
            <td>数</td>
        </tr>
        <tr>
            <td>第2节</td>
            <td>英</td>
            <td>英</td>
            
            <td>音</td>
        </tr>
        
            <td>第3节</td>
            <td rowspan="2">语</td>
            <td>音</td>
            <td>美</td>
            <td rowspan="2">语</td>
            <td>语</td>
        </tr>
        <tr>
            <td>第4节</td>
            
            <td>语</td>
            <td>外</td>
            
            <td>体</td>
        </tr>
        <tr>
            <td colspan="6">午休</td>
            
        </tr>
        <tr>
            <td>第5节</td>
            <td>语</td>
            <td>数</td>
            <td>体</td>
            <td>美</td>
            <td>劳</td>
        </tr>
        <tr>
            <td>第6节</td>
            <td>自</td>
            <td>自</td>
            <td>自</td>
            <td>自</td>
            <td>自</td>
        </tr>
    </table>
  </body>
</html>
表格3
<html>
  <head>
    <title>first.html</title>
  </head>
  <body>
   <!-- <table border="1" width="700px" bgcolor="red"> -->
 <!--   <table border="1" width="700px" bgcolor="#12ff34"> -->
   <table border="1" width="700px" style="background-color: rgb(255,0,0);">
        <tr>
            <td>星期</td>
            <td>星期1</td>
            <td>星期2</td>
            <td>星期3</td>
            <td>星期4</td>
            <td>星期5</td>
        </tr>
        <tr>
            <td>第1节</td>
            <td>数</td>
            <td>数</td>
            <td>数</td>
            <td>数</td>
            <td>数</td>
        </tr>
        <tr>
            <td>第2节</td>
            <td>英</td>
            <td>英</td>
            <td>数</td>
            <td>数</td>
            <td>音</td>
        </tr>
        
            <td>第3节</td>
            <!-- 关于水平对齐方式align和垂直对齐方式valign的使用 -->
            <td rowspan="2"  align="center" valign="bottom">语</td>
            <td>音</td>
            <td>美</td>
            <td rowspan="2">语</td>
            <td>语</td>
        </tr>
        <tr>
            <td>第4节</td>
            
            <td>语</td>
            <td>外</td>
            
            <td>体</td>
        </tr>
        <tr>
            <td colspan="6">午休</td>
            
        </tr>
        <tr>
            <td>第5节</td>
            <td>语</td>
            <td>数</td>
            <td>体</td>
            <td>美</td>
            <td>劳</td>
        </tr>
        <tr>
            <td>第6节</td>
            <td>自</td>
            <td>自</td>
            <td>自</td>
            <td>自</td>
            <td>自</td>
        </tr>
    </table>
  </body>
</html>
表单1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="" method="">
        <label>请输入姓名：</label>
           <input type="text" name="" id=""><br>
        <label>请输入密码：</label>
            <input type="password" name="" id=""><br>
        <label>再次输入密码：</label>
            <input type="password" name="" id=""><br>
        <lebel>性别：</lebel>
            <input type="radio" name="xb" id="" value="1">男
            <input type="radio" name="xb" id="" value="0">女<br>
</body>
</html>
表单2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="" method="">
        <label>请输入姓名：</label>
           <input type="text" name="" id=""><br>
        <label>请输入密码：</label>
            <input type="password" name="" id=""><br>
        <label>再次输入密码：</label>
            <input type="password" name="" id=""><br>
        <lebel>性别：</lebel>
            <input type="radio" name="xb" id="" value="1">男
            <input type="radio" name="xb" id="" value="0">女<br>
        <label>兴趣爱好</label>
            <input type="checkbox" name="" id="" value="1">游泳
            <input type="checkbox" name="" id="" value="2">看书
            <input type="checkbox" name="" id="" value="3">爬山
            <input type="checkbox" name="" id="" value="4">思考<br>
        <label>生日：</label>
            <select>
                <option value="1995">1995</option>
                <option value="1996">1996</option>
                <option value="1997" selected="selected">1997</option>
                <option value="1998">1998</option>
                <option value="1999">1999</option>
                <option value="2000">2000</option>
            </select>年
            <select>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>月
            <select>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>日<br>
            头像<img src="image/headLogo/13.gif">
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select><br>
            <input type="button" value="普通按钮">
            <input type="submit" value="提交按钮">
    </form>
</body>
</html>
表单3
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="" method="">
        <label>请输入姓名：</label>
           <input type="text" name="" id=""><br>
        <label>请输入密码：</label>
            <input type="password" name="" id=""><br>
        <label>再次输入密码：</label>
            <input type="password" name="" id=""><br>
        <lebel>性别：</lebel>
            <input type="radio" name="xb" id="" value="1">男
            <input type="radio" name="xb" id="" value="0">女<br>
        <label>兴趣爱好</label>
            <input type="checkbox" name="" id="" value="1">游泳
            <input type="checkbox" name="" id="" value="2">看书
            <input type="checkbox" name="" id="" value="3">爬山
            <input type="checkbox" name="" id="" value="4">思考<br>
        <label>生日：</label>
            <select>
                <option value="1995">1995</option>
                <option value="1996">1996</option>
                <option value="1997" selected="selected">1997</option>
                <option value="1998">1998</option>
                <option value="1999">1999</option>
                <option value="2000">2000</option>
            </select>年
            <select>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>月
            <select>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>日<br>
            头像<img src="image/headLogo/13.gif">
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select><br>
            <input type="button" value="普通按钮">
            <input type="submit" value="提交按钮">
    </form>
    <textarea rows="10" cols="100" name="" id="">
      请输入
    </textarea>
    <input type="file"><input type="button" value="上传"><br>
    000<input type="hidden" name="" id="">000
           <select size="4" multiple="true">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="4">41</option>
                <option value="42">42</option>
                <option value="43">43</option>
                <option value="44">44</option>
                <option value="45">45</option>
            </select>

             <select size="4" multiple="true">
             </select>
</body>
</html>
练习1-表格
<html>
<head>
    <title>first.html</title>
    <meta charset="UTF-8">
</head>
<body>
<table border="1" width="600px">
    <tr>
        <td>生日</td>
        <td>性别</td>
        <td>生日</td>
        <td>工资</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>zhangsan</td>
        <td>nan</td>
        <td>1234</td>
        <td>4321</td>
        <td rowspan="2"> 32</td>

    </tr>
    <tr>
        <td>lisi</td>
        <td>nan</td>
        <td>1111</td>
        <td>2222</td>
    </tr>
</table>

</body>
</html>
练习2-表单
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>

</head>
<body>
    <!--此处填写代码-->
    <h1 align="center">注册信息</h1>
    <form action="" method="">
    <table  bgcolor="#f2f2f2" align="center" width="400px">
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="" id="" placeholder="请输入用户名"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="" id="" placeholder="请输入密码"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="" id="" placeholder="请重新输入密码"/></td>
        </tr>
        <tr>
            <td>上传照片：</td>
            <td><input type="file" name="" id="" /></td>
        </tr>
    </table>
    </form>
</body>
</html>
赞(1)
MySQL学习笔记 » 第1课 HTML入门代码

近期文章

友情链接