HTML练习+笔记

<!DOCTYPE html>
<html lang="en">
<head>
    <!--    HTML标签中分为2中标签-->
    <!--    1、自闭和标签  <meta charset="UTF-8">-->
    <!--    2、主动闭合标签 <title>射手座</title>-->
    <!--    当前页面设置字符集UTF-8-->
    <meta charset="UTF-8">
    <!--    修改浏览器tab名字-->
    <title>射手座</title>

    <!--    link标签中的rel和href 都是标签的属性。-->
    <!--    rel 标明link引入的是什么 href 引入文件的链接-->
    <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg">
    <!--    stylesheet 样式表  引入一个以.css后缀结尾的文件-->
    <!--    <link rel="stylesheet" href="xxx.css">-->

    <!--    通过 1对style标签,在标签内可以写css样式-->
    <style></style>
    <!--    可以在1对script标签内写js代码-->
    <script></script>
    <!--    src属性,允许导入以.js结尾的文件-->
    <scrip src=""></scrip>

</head>
<body>
<h1><font color="#FF0000">大师兄,师傅被妖怪抓走啦啦啦</font></h1>
<h2>单身是第一生产力</h2>
<h3>单身是第一生产力</h3>
<h4>单身是第一生产力</h4>
<h5>单身是第一生产力</h5>
<h6>单身是第一生产力</h6>
<!--html标签当中 存在两类标签。-->
<!--块级标签: -->
<!--行内标签-->
<div>骚年,出招吧!姐让你三行代码~</div>
<span>一起去爬山吧!</span>
<!--span 和 div 都叫做白板标签 没有任何css修饰  -->

<!--输入框标签-->
<!--默认type=text 默认是一个输入框 value 是input输入的值-->
<input type="text" name="" value="呜呜呜" placeholder="请输入用户名">
<!--password 密码框-->
<input type="password" value="123456" placeholder="请输入密码">

<!--form就是一个承载器,或者比喻成白纸。-->
<!--name属性就是给后台传递参数的key value 就是给后台传递的值-->
<!--button 只是一个单纯的按钮,submit如果和form表单连用,会有提交的效果。-->
<!--button 需要和js结合,才能产生效果-->
<!--form表单默认是get 通过method配置成post请求-->
<form action="http://www.baidu.com" method="post">
    <input type="text" value="常常" name="username">
    <!--checkbox 多选框 checked 默认选中--><input type="checkbox" value="1" name="sex" checked="checked"><input type="checkbox" value="2" name="sex">
    <!--radio 如果name属性相同,则会产生互斥效果 checked 默认选中--><input type="radio" value="1" name="sex" checked="checked"><input type="radio" value="2" name="sex">

    <input type="button" value="登录-button">
    <input type="submit" value="注册-submit">
    <!--reset 必须和form表单连用才有效果-->
    <input type="reset">
    <!--file 文件上传-->
    <input type="file">
</form>
<!--for 属性 和id属性连用,增大input的可点击范围。-->
<label for="i1">用户名</label>
<!--id选择器-->
<input type="text" id="i1">
<!--多行文本-->
<textarea >这是textarea的默认value</textarea>

<select name="city">
    <optgroup label="陕西">
        <option value="3">西安</option>
        <option value="4">延安</option>
    </optgroup>
    <option value="1">北京</option>
    <option value="2">上海</option>
</select>
<!--city=1-->
<!--target="_blank" 新开一个tab-->
<a href="http://www.baidu.com" target="_blank">跳转百度</a>
<!--src 是图片的地址-->
<img src="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg" alt="图片加再失败显示" title="悬浮">
<!--列表-->
<ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ul>
<ol>
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ol>
<dl>
    <dt>大肘子</dt>
    <dd>大腰子</dd>
    <dd>大烤串</dd>
</dl>

<!--表格标签 rowspan 占多少行,,colspan 占多少列 ß-->
<table border="1">
    <thead>
         <th>ID</th>
         <th>请求方式</th>
         <th>状态</th>
         <th colspan="2">操作</th>
    </thead>
    <tbody>
         <tr>
             <td>1</td>
             <td rowspan="3">post</td>
             <td>succeed</td>
             <td>编辑</td>
             <td>删除</td>
         </tr>
    </tbody>
</table>

</body>
</html>
原文地址:https://www.cnblogs.com/ccxm/p/13301976.html