html基础内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<!-- 测试注释-->
<!-- 浏览器使用 CTRL + u 查看源码 -->
    <h1>这是注释</h1>
</body>
</html>


<!--        空格     -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<!-- 测试注释-->
<!-- 浏览器使用 CTRL + u 查看源码 -->
    <h1>这是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注释</h1>
</body>
</html>


<!-- 颜色  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body bgcolor="#ff7f50">
<!-- 测试注释-->
<!-- 浏览器使用 CTRL + u 查看源码 -->
    <h1>这是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;颜色</h1>
</body>
</html>


<!-- h1- 6 font标签 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试h标签</title>

    <style>
        span{
            color: blue;
            font-size: 30px;
            font-weight: bold;
        }

    </style>

</head>
< bgcolor="#ff7f50">
    <h1>ccccccccc</h1>
    <h2>ccccccccc</h2>
    <h3>ccccccccc</h3>
    <h4>ccccccccc</h4>
    <h5>ccccccccc</h5>
    <h6>ccccccccc</h6>

<!-- font 大小 1-6 淘汰标签-->
    <font size="6" color="#7fff00">font标签</font>

<!--   以上的标签慢慢被淘汰
    将使用 span 和stype样式控制
-->
<br/>
    <span>这是span标签</span>
<!-- 不换行 -->
    <nobr/>
    <span>这是span标签</span>

<!-- span是无意义标签 -->


</body>
</html>



<!-- 列表 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试列表 </title>
</head>
<body>
<!--  有序列表 ol-->
    请选择:
    <br/>
    <ol>
        <li>a.男性</li>
        <li>b.女性</li>
        <li>c.保密</li>
    </ol>
<!--  无序列表 ul-->
    <ul>
        <li>a.男性</li>
        <li>b.女性</li>
        <li>c.保密</li>
    </ul>
<!-- 自定义列表 dl-->
    <dl>
        <dt>请选择</dt>
        <dd>a.男性</dd>
        <dd>b.女性</dd>
        <dd>c.保密</dd>
    </dl>
<!--   可以做自定义菜单-->
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <b>b标签</b>>
    <u>u标签</u>
    <i>i标签</i>
    数字5<sup>3</sup>
</body>
</html>
<!-- 总结:
    能放文字的标签:
        h
        p
        b 加粗
        i 斜体
        u 下划线
        sub 上标
        sup 下标
        span   无意义行标签
        font
        -----
        div 无意义块标签


-->




<!--   图片 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <img src="https://raw.githubusercontent.com/cucyzrd/file/master/avatar.png" width="200px" height="200px">
 <img src="https://raw.githubusercontent.com/cucyzrd/file/master/avatar.png" width="20px" height="20px">
<img src="https://raw.githubusercontent.com/cucyzrd/file/master/avatar.png" />

<!-- title 鼠标放上去后会显示图片的名称 -->
<img src="https://raw.githubusercontent.com/cucyzrd/file/master/avatar.png" title="千与千寻"/>

<!-- alt 当图片没有找到时 所显示的信息-->
<img src="https://raw.githubusercontent.com/cucyzrd/file/master/avatar.fdspng" title="千与千寻" alt="图片没有找到"/>
</body>
</html>


<!-- 图片属性
    src  高度 宽度 title  alt
    map
-->

<!--
   所有标签上都有的属性
   1.title
   2.style
   3.id
   4.class

-->

<!--  加载静态资源的标签
 1.img
 2.link
 3.script
 4.a
-->



<!-- 锚点 a标签-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试a标签</title>
</head>
<body>
<!--  有herf 为超链接-->

    <a  herf="http://ww.baidu.com">百度</a>
<!-- 有name为锚点-->
    <a name="top"></a>

<h1>0</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>0</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<p align="right"><a herf="#top"><img src="https://raw.githubusercontent.com/cucyzrd/file/master/avatar.png" title="top"></a></p>
</body>
</html>



<!--  表格 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表格</title>
</head>
<body>
    <!-- cellspacing 边界大小-->
    <table border="2px" width="400px" align="center" cellspacing="10" >
        <caption>用户信息表</caption>
        <tr>
            <!--表头信息-->
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr align="center">
            <td>小马</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>lucy</td>
            <td align="center">女</td>
            <td>21</td>
        </tr>
        <!-- 两行3列-->
    </table>
</body>
</html>



<!--  表单 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表单</title>
</head>
<body>
    <form  action="/">
        <span>用户名:</span><input type="text" name="username" />
        <span>密码:</span> <input type="password" name="password"/>
         <br>
        <input type="submit" value="确定"/>
        <input type="reset" value="取消"/>
    </form>

</body>
</html>


<!--   单选 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试单选表单</title>
</head>
<body>
    <form  action="/">
       <span>请选择年级:</span>
        <br>
        <input type="radio" name="g1" value="一年级">一年级
        <br>
        <input type="radio" name="g1" checked value="二年级">二年级
        <br>
        <input type="radio" name="g1" value="三年级">三年级
        <br>
        <input type="submit" value="提交">
    </form>

</body>
</html>

<!--
    单选组name有且必须相同， 否则被认为是不同的组
    默认选择  checked
    value
-->

<!-- 多选 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试多选表单</title>
</head>
<body>
    <form  action="/">
       <span>爱好:</span>
        <br>
        <input type="radio" name="g1" value="book">book
        <br>
        <input type="radio" name="g2" checked value="run">run
        <br>
        <input type="radio" name="g3" value="sleep">sleep
        <br>
        <input type="submit" value="提交">
    </form>

</body>
</html>

<!--
    多选组name有且值必须不相同， 否则被认为是不同的组
    默认选择  checked
    value
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>readonly and   diabled</title>
</head>
<body>
    <form  action="/">
       修改用户信息:<br>
        姓名:<input type="text" name="name" value="小明" readonly/><br>
        姓名:<input type="text" name="name" value="tomcat" disabled/>
        <input type="submit" value="提交">
    </form>

</body>
</html>


<!-- 区域框 文本框-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域框</title>
</head>
<body>
    <form  action="/">
       <h1>用户留言板</h1>
        用户:<input type="text" name="name" value="匿名用户" /><br>
        留言:<textarea name="user_content" cols="150" rows="2">请填写留言</textarea><br>
        <input type="submit" value="提交">
    </form>

</body>
</html>


<!--   下拉 选择菜单 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域框</title>
</head>
<body>
    <form  action="/">
       <h1>用户留言板</h1>
        <select name="cityname" size="5">
            <option value="">请选择城市</option>
            <option value="北京">北京</option>
            <option value="上海" selected>上海</option>
        </select>
        <br>
        <input type="submit" value="提交">
    </form>

</body>
</html>

<!--
   value 值不能相同
   默认 selected   选择
-->


<!-- 多选   设置成列表形式 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域框</title>
</head>
<body>
    <form  action="/">
       <h1>用户留言板</h1>
        <select name="cityname[]" size="5" multiple>
            <option value="">请选择城市</option>
            <option value="北京">北京</option>
            <option value="上海" selected>上海</option>
        </select>
        <br>
        <input type="submit" value="提交">
    </form>

</body>
</html>