博客

HTML

  • Post author:
  • Post category:其他


<!DOCTYPE html>
<html lang="zh-CN">


<head>
    <meta charset="UTF-8">   ##<!--指定文档的编码类型    <meta http-equiv="content-Type" charset=UTF8">-->

    <title>京东</title>  <!--页面的标题 -->

    <!--<meta http-equiv="refresh" content="5;URL=http://www.baidu.com/">-->
    <!--refresh:刷新，5秒后跳转到 百度  -->

   <link rel="icon" href="https://www.jd.com/favicon.ico">
    <!--页面标题的图标   -->
   
    <meta http-equiv="x-ua-compatible" content="IE=edge">    可以在 file - settings - Editor - file and Code Templates 中直接添加,以后创建html时自动添加
    <!-- 告诉IE以最高级模式渲染文档-->
    

    <meta name="kevwords关键词法" content="meta总结.html meta总结,meta属性,meta跳转">
    <meta name="description描述" content="老男孩s8">
    <!--这两条暂时验证不了 -->
    <!--①是在浏览器上搜索那些词，我的网址就会出现 ②是出现的内容-->
</head>

<body>
<a href="#i9">去i9</a>   <!--id 点击 '去i9' 就可以跳转到 id是9的那个div  注意：# -->
<h1 id = "i1" class = 'c1 c2 c3' style= 'color:red'>hello,world!</h1>

<h2 id="i2">标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>

<div>
    <a href="#i1"> 去标题1</a>
    <a target="_blank" href="https://www.jd.com">点击去京东</a>
    <!-- target的_blank 是 新页面打开链接，默认本页面跳转-->
</div>

<div>
    <img src="http://www.cnblogs.com/skins/MountainInk/top.jpg" alt="查看图片失败
    " title="山水" width = '600px' heigh = '600px'>
    <!--src ：图片链接
    alt: 加载失败的提示信息
    title:鼠标指向时显示的文字
    width、heigh: 宽和高-->
</div>
<div>
    <img id="i9" src="shagou.jpg" alt="图片加载失败" title="傻狗">
</div>

</body>
</html>


————————————————————————————————-



<!– 老师说注释很重要！–>


基本标签（块级标签和内联标签）
 

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

<p>段落标签</p>

<h1>标题1</h1> # 标题1 - 6

<!--换行--> <br>
<!--水平线--> <hr>



几个特殊字符：

注册：&reg
版权：&copy
空格：&nbsp
&：&amp
<：&it
>：&gt
￥：&yen



两个标签：


head标签里面的

-meta

-title

-link icon

-link 引用CSS文件

-style 引用JS文件

body标签(我们在浏览器里面看到的)

-块级标签(独占一行)          h1~h6 hr p div

-内联标签(长度根据内容决定)  a b img u s i span



小快捷方式：

div{第$章} * 3 — Tab :
 

<div>第1章</div>
<div>第2章</div>
<div>第3章</div>

—————————————————————————————–


最开始的服务端：py文件里
 

from socket import *
server = socket()
server.bind(('127.0.0.1',8084))
server.listen(5)

while True:
    conn,addr = server.accept()
    data = conn.recv(1024)
    conn.send(b'Hello,world!')
    conn.close()
server.close()

在浏览器里输入  127.0.0.1：8080   会输出  Hello，world！

但在chrome中不识别，必须改为HTTP协议的：

b’http/1.1 200 ok \r\n\r\n hello,world!

==========================================================

列表：

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

<!--无序列表-->
<ul type="none">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>

type属性：

  
  
  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）        ！！！！这个就是无样式。

 <!--有序列表-->
<ol type="I" start="5">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
</ol>

<!--标题列表-->
<dl>
  <dt>河北省</dt>
  <dd>邯郸</dd>
  <dd>石家庄</dd>
  <dd>保定</dd>
  <dt>四川</dt>
  <dd>成都</dd>
  <dd>绵阳</dd>
  <dd>攀枝花</dd>
</dl>
<!--快捷方式：
table>thead>tr>th*3  则会生成：
<table>
    <thead>
    <tr>
        <th></th>
    </tr>
    </thead>
</table>*3
-->

</body>
</html>

表单1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>嘿嘿嘿</title>
</head>
<body>
<form action="https://www.sogou.com/web?" method="get">
  <p><input type="text" name="query"></p>
  <p><input type="submit" value="搜狗"></p>
    <!--输入什么点搜狗，就会在相应网址搜 输入的内容-->
</form>
</body>
</html>

表格与表单2：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>表格_表单</title>
</head>
<body>
<h3>注册页面</h3>
<table border="10" cellpadding="2" cellspacing="3">
    <!--边框厚度   单元格内字与框的距离  单元格与边框的距离-->
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
        <th>住址</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>sunv</td>
        <td>17</td>
        <td>sugar</td>
        <td>京城</td>
    </tr>
    <tr>
        <td>小小酥</td>
        <td colspan="2">59</td>  <!--占两列-->
        <td rowspan="2">深圳</td> <!--占两行-->
    </tr>
    <tr>
        <td>巴拉巴拉</td>
        <td>66</td>
        <td>money</td>
    </tr>

    </tbody>
</table>

<form action="http://127.0.0.1:8080/reg/" method="post">
    <!--< enctype="multipart/form-data"> 如果上传文件的话，一定要设置该属性！！！-->
    <p>用户名<input placeholder="请在这里输入用户名" type="text" name="username"></p>
     <p>用户名2<input id="name" type="text" name="username" readonly value="alex">
    <!--readonly 只读  +  value 值  =  设置默认值  且改不了   -->

    <p>密码<input type="password" name="password"></p>

    <p>性别<input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="famamle">女
        <input type="radio" name="gender" value="secret">保密
    </p>

    <p>上传头像<input type="file" name="heading"></p>

    <p>用户名<label for="b1">篮球</label> <!-- 点击'篮球'会将前面的复选框选中-->
        <input id="b1" type="checkbox" name="hobby" value="basketball">
        <input checked type="checkbox" name="hobby" value="football">足球  <!--checket默认-->
        <input type="checkbox" name="hobby" value="doublecolorball">双色球
    </p>

    <p>数字<input type="number" name="num"></p>
    <p>个人邮箱<input type="email" name="mail"></p>

    <p>个人简介<textarea name="jianjei"></textarea></p>
    <p>手机号<input hidden type="phone" name="mobile"></p>   <!--隐藏-->

    <p>
        <select name="school" multiple size="3"> <!--5项全列出来，3的话就会有滚动条-->
            <option selected value="009">幼儿园</option>
            <option value="009">私塾</option>
            <option value="009">中学</option>
            <option value="009">大学</option>
            <option value="009">研究生</option>
            <!--selected 默认选上-->
        </select>
    </p>


<!---->
    <!--同意用户注册条款-->
    <p><input type="checkbox"><a target="_blank" href="https://in.m.jd.com/help/app/register_info.html">同意用户注册条款</a></p>
    <!--验证码-->
    <p><input type="text"> <img src="yzm.png" alt="验证码"></p>

    <p>分组的下拉框
        <select name="" id="" size="6">
            <optgroup label="第一组">
                <option value="000">000</option>
                <option value="001">001</option>
                <option value="002">002</option>

            </optgroup>
            <optgroup label="第二组">
                <option value="010">010</option>
                <option value="011">011</option>
                <option value="012">012</option>
            </optgroup>

        </select>
    </p>
<!---->


    <p><input type="reset" value="重置">
        <input type="button" value="按钮">
        <input type="submit" value="提交ok"></p>

</form>

</body>
</html>


光 — 刘惜君


版权声明：本文为sunv_lx原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。