Xing>Xing

博客园 首页 新随笔 联系 订阅 管理
ptthon课程day41-HTML-常用标签

 

 3. 前端的内容
  HTML       CSS                JS
  裸体的人   穿上好看的衣服    动起来
  
 4. HTML  
  1. HTMl定义
   FTP    UPLOAD|ooxx.avi|1024  --> HTTP协议
   HTML: 超文本标记语言
  2. HTML标签的结构
   HTML的结构
    head  --> 给浏览器看的内容
     title  --> 标题
     style  --> CSS样式
     link   --> CSS文件
     script --> JS
     meta
      <meta charset="UTF-8">
      <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
      
    body  --> 给用户看的内容
   HTML标签的语法：
    <head 属性1=值1 属性2=值2></head>
    <body></body>
    
    <meta>
  3. Body标签中的常用标签
   1. 常用标签的分类
    1. 独占一行的    块儿级标签
     1. h1~h6
     2. p
     3. div
     4. hr
     5. li
     6. tr
     
    2. 在一行显示的  行内标签/内联标签
     1. a
     2. span
     3. img
     4. b/i/u/s
   2. 标签的嵌套
    标签可以嵌套标签
    注意事项：
     1. 尽量不要用内联标签包块儿级标签
     2. p标签不能嵌套p标签
     3. p标签不能嵌套div标签
   3. 获取用户输入的标签
    1. form标签
     一个容器，包住所有获取用户输入的标签
     - action属性
     - method属性
     - enctype属性
    2. input标签
     type
      text
      password
      email
      date
      
      checkbox
      radio
      
      
      button   --> 普通按钮 --> 通常用JS给它绑定事件
      submit   --> 提交按钮 --> 默认将form表单的数据提交
      reset    --> 重置按钮 --> 将当前form中的输入框都清空
    3. select标签
    4. textarea标签
    
    5. form表单提交数据的注意事项
     {“k1”: "v1"}
     1. form标签必须把获取用户输入的标签包起来
     2. form不是from， form标签必须有action属性和method
     3. form中的获取用户输入的标签必须要有name属性

 

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<ul type="none">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

<ol type="A" start="30">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

<hr>


<table border="1" cellpadding="10" cellspacing="20">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>sylar</td>
            <td>男</td>
            <td rowspan="2">old woman</td>
        </tr>
        <tr>
            <td>Gold</td>
            <td>男</td>
        </tr>

        <tr>
            <td>Eva_J</td>
            <td>女</td>
            <td>喝茶</td>
        </tr>
        <tr>
            <td style="text-align: center" colspan="2">刘洋</td>
            <td>耙耳朵</td>
        </tr>
    </tbody>
</table>

<span>span</span>
<table border="1">
    <tr>
            <td>sylar</td>
            <td>男</td>
            <td>old woman</td>
        </tr>
        <tr>
            <td>Gold</td>
            <td>男</td>
            <td>假发</td>
        </tr>

        <tr>
            <td>Eva_J</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 http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<form action="http://127.0.0.1:8080" method="post">
    <label for="i1">用户名：</label>
    <input type="text" id="i1" placeholder="请输入用户名" value="alexdsb">

    <label>密码
        <input type="password">
    </label>


    <input type="date">
    <input type="email">
    <hr>
    <input type="checkbox" name="hobby" value="basketball">篮球
    <input type="checkbox" name="hobby" value="football" checked="checked">足球
    <label>
        <input type="checkbox" name="hobby" value="doublecolorball">
        双色球
    </label>

    <p><input type="checkbox">篮球</p>
    <p><input type="checkbox" checked>足球</p>
    <p><input type="checkbox">双色球</p>

    <hr>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <input type="radio" checked name="gender">保密
    <hr>
    <select name="city">
        <option value="010">北京市</option>
        <option value="020">上海市</option>
        <option value="000" selected>深圳市</option>
    </select>

    <select name="city" multiple>
        <option value="010" selected>北京市</option>
        <option value="020" selected>上海市</option>
        <option value="000" selected>深圳市</option>
    </select>

    <hr>
    <textarea name="info" cols="60" rows="20"></textarea>
    <hr>
    <input type="file" name="avatar">
    <hr>
    <input type="button" value="我是一个按钮">
    <input type="reset" value="重置">
    <input type="submit">
</form>

<hr>


<form action="http://127.0.0.1:8080" method="post">
    <input type="text" name="alex">
    <input type="submit">
</form>


</body>
</html>
获取用户输入标签

 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-Type" charset=UTF8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <title>S14</title>
  <style>
    h1 {
      color: red;
    }
  </style>
  <script>alert(123)</script>
  <meta name="keywords" content="S14,老男孩脱产班,">
  <meta name="description" content="老男孩教育Python学院">
</head>

<body>
  <h1 id="i1" class="c1 c2 c3" style="font-size: 48px" s14="hao">Hello world!</h1>
  <a href='http://www.sogo.com'>sogo</a>

  <!-- head start -->

  <!-- head end-->

  <!--首页 广告区 开始-->

  <!--首页 广告区 结束-->
</body>
</html>
HTML文件
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>


    <a href="#b1">屠龙宝刀，点击就送</a>

    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六<br>级标题</h6>


    <hr>
    <a href="https://www.luffycity.com" target="_blank">路飞学城</a>
    <a href="https://www.luffycity.com" target="_blank">路飞学城</a>
    <p>p1</p>
    <p>p2</p>

    <p>海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔！海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔</p>

<b id="b1">加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3803137380,2419499331&fm=26&gp=0.jpg" alt="新垣结衣">

    <img src="lp.jpg" alt="新垣结衣" title="鼠标移上去">

    <p>在苍茫的大海上，狂风卷积着乌云，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔</p>

    <p>a>b</p>
    <p>b&lt;a</p>
    <p>b&gt;a</p>

    <p>&copy;</p>
    <p>&reg;</p>
    <p>&yen;</p>

    <hr>
    <div>我是div标签</div>
    <span>我是span标签</span>
    我不是个标签

    <hr>
    <div>
        <div>div中的div</div>
        <p>div中的p标签</p>
        <a href="">div中的a标签</a>
    </div>

    <a href="">
        <div>a中的div标签</div>
    </a>

    <p>
        <p>p中p</p>
    </p>
    <hr>
    <p>
        <div>p中的div</div>
    </p>

</body>
</html>
body内常用标签
posted on 2018-10-24 17:04  Xing>Xing  阅读(92)  评论(0)    收藏  举报