6.28

5 days ago · d767c554b5
2 changed files with 143 additions and 0 deletions
--- a/STUDY1/1.jfif
+++ b/STUDY1/1.jfif
--- a/STUDY1/webtudy1.html
+++ b/STUDY1/webtudy1.html
@ -0,0 +1,143 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
    <p>你好</p>
    <br>
    zzz
    <hr width="1000px" size="5px" align="center">
    <img src="1.jfif" alt="这是一个风景图" title="fenhgjing" width="300px">
    <!-- 路径分为相对和绝对路径
     绝对路径从盘符开始访问
     相对路径分为
     子级关系   /
     同级关系   ./
     父级关系   ../
      -->
    <h3>超链接</h3>
    <a href="https://www.baidu.com"><img src="./1.jfif" width="300px"></a>
    <h3>文本标签</h3>
    <em>斜体且着重文字</em>
    <i>斜体</i>
    <b>粗体</b>
    <strong>加重加粗</strong>
    <del>删除字</del>
    <span>空标签</span>
    <h3>有序列表</h3>
    <ol>
        <li>水果
            <ol type="A"
                <li>苹果</li>
                <li>桃子</li>
                <li>栗子</li>
            </ol>
        </li>
        <li>
            蔬菜
            <ol type="a"> 
                <li>白菜</li>
                <li>青菜</li>
                <li>油菜</li>
            </ol>
        </li>
        <li>
            肉类
            <ol type="I">
                <li>zhurou</li>
                <li>NIUROU</li>
                <li>yangrou</li>
            </ol>
        </li>
    </ol>
    <h3>无序列表</h3>
    <!-- 快捷键  ul>li*n   -->
     <ul type="disc">
        <li>shucai
            <ul type="circle">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
        <li>shuiguo
            <ul type="square">
                <li>45</li>
                <li>5</li>
                <li>66</li>
            </ul>
        </li>
        <li>roulei
            <ul>
                <li>22</li>
                <li>33</li>
                <li>44</li>
            </ul>
        </li>
     </ul>
 <h3>表格</h3>
 <!-- 快捷键  table>tr*3>td{单元格} -->
 <table border="1" wigth="600" height="300">
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
 </table>
 <h3>表格合并</h3>
 <table border="1" wigth="900" height="300">
    <tr>
        <td colspan="2">单元格1</td>
        <td rowspan="2">单元格3</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">单元格4</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格9</td>
        <td>单元格</td>
    </tr>
       <tr>
        <td>单元格9</td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
 </table>
 <h3>表单</h3>
 <form action="">
    <input type="text" value="请输入文本">
    <input type="submit"><br>
    <input type="password" value="请输入密码">
    <input type="submit" value="登录">
 </form>
 </body>
 <!-- 块级元素和行内元素 -->
 <!-- 常见块级元素： div,form,h1,hr,p,table, ul,ol等    独占一行，可以设置宽高，可以包含行内元素和其他块级元素 -->
  <!-- 常见行内元素：a,b,em,strong,span等   不能独占一行，只能设置宽，一般不包含块级元素 -->
 </html>