Python-day14

来源:互联网 发布:法文翻译软件 编辑:程序博客网 时间:2024/06/07 05:03

html基础知识点:

1.web服务端其实只是运行socket服务端,而客户的浏览器充当socket客户端,服务端返回的数据永远只是字符串,如果字符串中的格式恰好是浏览器认识的,就会转化成各种颜色以及样式

2.DOCTYPE 标准的对应关系

3.html标签(只能有一个,相当于人的身体,是主体)

4.head标签(相当于脑袋,是内在的东西,支配所有动作,外在是看不到的)

5.自闭合标签meta

6.搜索引擎:

<meta name="keywords" content="汽车之家!"><meta name="description" content="汽车之家为你服务!!!">
7.指定IEX版本运行网站
<meta http-equiv="X-UA-Compatible" content="IE=IE9">

8.body标签(构造内容的标签)

    <a href="http://soccer.hupu.com">李杰</a>    跳转网页的链接

9.p标签(段落,不会默认换行)

    <p>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>

注:标签存在的意思是更好定位,操作容易

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <!--<meta http-equiv="Refresh" content="3 Url=http://soccer.hupu.com">-->    <meta http-equiv="X-UA-Compatible" content="IE=IE9">    <meta http-equiv="Refresh" content="3">    <meta name="keywords" content="汽车之家!">    <meta name="description" content="汽车之家为你服务!!!">    <title>老男孩</title></head><body>    <a href="http://www.oldboyedu.com">老男孩</a></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><!--    &nbsp表示空格的意思    &gt是大于号的意思    --><!--    <br>标签是换行的意思,但是此时的换行后的内容依然是同一个段落(块级标签)  --><!--    <p>标签段落和段落之间有间距 (块级标签)  --><!--    <hx>标签是标题标签,依次从小到大(块级标签),加大加粗    -->    <a href="http://soccer.hupu.com">李&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&gt;杰</a>    <p>sssssssssssssssssssss<br>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>    <h6>alex</h6>    <h5>alex</h5>    <h4>alex</h4>    <h3>alex</h3>    <h2>alex</h2>    <h1>alex</h1><!--    span(白板,什么特性都没有)标签不会占用一行,只是内容区域占用,区别于以上的标签(行内标签)  -->    <span>asfasf</span>    <span>asfasf</span>    <span>asfasf</span>    <span>asfasf</span>    <span>asfasf</span>    <span>asfasf</span><!--    <div>标签也是白板,没有任何特性,但是是块级标签--><!--    chrome审查元素的使用   -->    <div>1</div>    <div>2</div>    <div>3</div><!--    input标签,text明文,password密文--><!--    如果想达到提交数据的效果必须用<form>表单标签抱着,类似于去银行办手续必须填表单才能提交系统-->    <form>        <input type="text"/>        <input type="password"/>        <input type="button" value="登录1"/>        <input type="submit" value="登录2"/>    </form>    <br />    <!--<form action="www.baixxx.com      action是提交数据的意思,而且是通过字典的方式提交  ">--><!--    同样是按钮,默认button什么用处都没有,以后会有用,此时submit才有按的作用--><!--    如果标签没有name值,那么server端后台是抓不到对应的数据的-->    <form action="" method="post">        <input type="text" name="username"/>        <input type="password" name="password"/>        <input type="button" value="登录1"/>        <input type="submit" value="登录2"/>    </form></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <form action="https://www.sogou.com/web">        <!--  https://www.baidu.com/s?wd=C%E7%BD%97  get 请求,以后也可以提交wd=xxx 提交数据 -->        <!--    input text 中设置value属性代表输入框内有默认值-->        <input type="text" name="query" value="123">        <input type="submit" value="搜索">    </form></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <form enctype="multipart/form-data">        <div>            <!--<select name="city">-->                <!--<option value="1">上海</option>-->                <!--<option value="2">深圳</option>-->                <!--<option value="3">香港</option>-->            <!--</select>-->            <!--    多选  -->            <!--<a href="http://www.baidu.com" target="_blank">跳转吧,少年!</a>-->            <a href="#id1">皇马</a>            <a href="#id2">巴萨</a>            <a href="#id3">拜仁</a>            <a href="http://www.baidu.com">                <!--alt的意思是如果图片路径不存在那么显示内容-->                <img src="../image/search1.jpg" title="克里斯蒂亚诺" style="height: 500px;width: 200px;" alt="金球先生">            </a>            <p></p>            <!--    加上ID,使得超链接跳转到页面对应的标签位置-->            <div id="id1" style="height: 500px;">皇马</div>            <div id="id2" style="height: 500px;">巴萨</div>            <div id="id3" style="height: 500px;">拜仁</div>            <!--ul ol dl 列表-->            <ul>                <li>123</li>                <li>123</li>                <li>123</li>                <li>123</li>            </ul>            <ol>                <li>312</li>                <li>312</li>                <li>312</li>                <li>312</li>            </ol>            <dl>                <dt>123</dt>                <dd>222</dd>                <dt>123</dt>                <dd>333</dd>            </dl>            <!--    表格  -->            <!--    a标签不能提交到后台,a标签拿来做超链接,且拿来做锚点-->            <!--<select name="city" multiple="multiple" size="10">-->                <!--<option value="1">上海</option>-->                <!--<option value="2">深圳</option>-->                <!--<option value="3">香港</option>-->            <!--</select>-->            <input type="text" name="user">            <p>请选择性别:</p>            <!--    如果标签相同都是gender,那么就是互斥的状态    -->            男:<input type="radio" name="gender" value="1">            女:<input type="radio" name="gender" value="2">            <p>请选择爱好:</p>            <!--   checked 默认勾选 -->            足球:<input type="checkbox" name="favor" value="1" checked="checked">            篮球:<input type="checkbox" name="favor" value="2" checked="checked">            排球:<input type="checkbox" name="favor" value="3" checked="checked">            <p>请选择科目:</p>            语文:<input type="checkbox" name="skill" value="1">            数学:<input type="checkbox" name="skill" value="2">            英语:<input type="checkbox" name="skill" value="3">            <p>上传文件</p>            <!--下面这样默认发不了文件,因为它依赖form表单的一个属性multipart/form-data-->            <input type="file" name="fname">        </div>        <p></p>        <!--多行输入,且默认值要放中间,不是value-->        <textarea name="memo">12312312312</textarea>        <input type="submit" value="提交">        <input type="reset" value="重置">    </form></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><!--    表格  (简单写法)  --><!--<table border="1">--><!--&lt;!&ndash;    表示一行    &ndash;&gt;--><!--<tr>--><!--&lt;!&ndash;    表示一列    &ndash;&gt;--><!--<td>第一行第一列</td>--><!--<td>第一行第二列</td>--><!--<td>第一行第三列</td>--><!--</tr>--><!--<tr>--><!--<td>--><!--<a href="s1.homework">第二行第一列</a>--><!--</td>--><!--<td>第二行第二列</td>--><!--<td>第二行第三列</td>--><!--</tr>--><!--<tr>--><!--<td>第三行第一列</td>--><!--<td>第三行第二列</td>--><!--<td>第三行第三列</td>--><!--</tr>--><!--</table>--><!--    表格详细版写法(推荐用这种)  --><table border="1">    <thead>    <tr>        <th>第1行第1列</th>        <th>第1行第2列</th>        <th>第1行第3列</th>    </tr>    </thead>    <tbody>    <tr>        <!--    合并单元格 (上下)  -->        <td rowspan="2">11</td>        <!--    合并单元格 (左右)  -->        <td colspan="2">21</td>    </tr>    <tr>        <td>22</td>        <td>23</td>    </tr>    <tr>        <td>31</td>        <td>32</td>        <td>33</td>    </tr>    </tbody></table></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><label for="user">用户名:</label><input id="user" type="text" name="username"></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="../homework/form.css"/>    <!--<style>-->    <!--/*.c1{*/-->    <!--/*height:100px;background-color:#a99e3a;*/-->    <!--/*}*/-->    <!--/*div{*/-->    <!--/*height:50px;background-color:#99216b;*/-->    <!--/*}*/-->    <!--/*  层级标签    */-->    <!--/*  .cl,.c2 组合选择器   */-->    <!--/*span div{*/-->    <!--/*height: 30px;background-color: rebeccapurple;*/-->    <!--/*}*/-->    <!--/*!*&lt;!&ndash;    属性选择器   .c1&ndash;&gt;*!*/-->    <!--/*input[type='text']{width: 340px;height: 120px;}*/-->    <!--/*.c2 {*/-->    <!--/*background-color: aqua;height: 129px;*/-->    <!--/*}*/-->    <!--/*.c1 {*/-->    <!--/*background-color: rebeccapurple;color: red;font-size: 30px;*/-->    <!--/*}*/-->    <!--</style>--></head><body><!--    给标签加入了属性,这就是CSS --><!--    由于id不能重复,如果想实现样式重用一般都用class的方式--><!--    优先级写在当前标签的style优先级最高,其次是写在头部style中最底部的优先级高--><div class="c1" style="background-color: red">1</div><div class="c1">2</div><div class="c1">3</div><span>        <div>            <input type="text">            <input type="password">        </div>    </span></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><!--    边框  像素大小    实线虚线    颜色  --><!--    float   浮动效果(有坑,还不知道是什么)    --><div style="border: 4px solid red; float: left; width: 20%;height: 40px;text-align: center;line-height: 40px">    asfasfafa</div><div style="float: left; width: 40%; background-color: red">    sss</div></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .pg-header {            height: 15px;            background-color: rebeccapurple;        }    </style></head><body style="margin: 0 auto;"><div class="pg-header"></div></body></html>
原创粉丝点击