• Python之路_Day14

    Python之路_Day14_课堂笔记
    前期回顾：



    本节内容：
    一、HTML
    - 标签

    二、CSS
    - 效果
    color: red;

    三、JavaScript
    - 语言基础
    - 效果
    查找
    操作

    jQuery




    一、HTML
    1、头部标签
    meta、title、link、引入css、引入js
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <!--自闭和标签-->
    5.     <meta charset="UTF-8" />
    6.     <!--自动刷新-->
    7.     <meta http-equiv="Refresh" Content="30"/>
    8.     <!--自动跳转-->
    9.     <!--<meta http-equiv="Refresh" Content="5; Url=http://www.autohome.com.cn" />-->
    10.     <!--关键词-->
    11.     <meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
    12.     <!--标签属性 name="alex"-->
    13.     <title name="alex">老男人</title>
    14.     <!--链接图片-->
    15.     <link rel="shortcut icon" href="favicon.ico">
    16. </head>
    17. <body>
    18. 测试
    19. </body>
    20. </html>

    2、常用标签
    标签一般分为两种：块级标签 和 行内标签
    • a、span、select 等
    • div、h1、p 等
    各种符号
    HTML特殊字符编码大全：往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。
     HTML常用特殊字符：只要你认识了 HTML 标记，你便会知道特殊字符的用处。
     p 和 br
    p表示段落，默认段落之间是有间隔的！
    br 是换行
    a标签
    < a href="http://www.autohome.com.cn"> </a>
    1、target属性，_black表示在新的页面打开
    2、锚

    H 标签
    H1
    H2
    H3
    H4
    H5
    H6
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <!--自闭和标签-->
    5.     <meta charset="UTF-8" />
    6.     <!--自动刷新-->
    7.     <meta http-equiv="Refresh" Content="30"/>
    8.     <!--自动跳转-->
    9.     <!--<meta http-equiv="Refresh" Content="5; Url=http://www.autohome.com.cn" />-->
    10.     <!--关键词-->
    11.     <meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
    12.     <!--标签属性 name="alex"-->
    13.     <title name="alex">老男人</title>
    14.     <!--链接图片-->
    15.     <link rel="shortcut icon" href="favicon.ico">
    16. </head>
    17. <body>
    18. <!--内联和块级-->
    19. <div style="background-color: red">测试</div>
    20. <div style="background-color: green">测试</div>
    21. <!--符号-->
    22. &lt;a&nbsp;b&gt;
    23. <!--段落和换行-->
    24. <p>123456789</p>
    25. <p>123<br />456<br />789</p>
    26. <!--标题-->
    27. <h1>标题</h1>
    28. <h2>标题</h2>
    29. <h3>标题</h3>
    30. <h4>标题</h4>
    31. <h5>标题</h5>
    32. <h6>标题</h6>
    33. <!--a标签-->
    34. <a href="http://www.baidu.com">跳转1</a>
    35. <a href="http://www.baidu.com" target="_blank">跳转1</a>
    36. <!--寻找页面中id=i1的标签，将其标签放置在页面顶部-->
    37. <a href="#i1">第一章</a>
    38. <a href="#i2">第二章</a>
    39. <a href="#i3">第三章</a>
    40. <!--id没有一个标签的id属性值不允许重复，id属性可以不写-->
    41. <div id="i1" style="height: 200px";>第一张内容</div>
    42. <div id="i2" style="height: 200px";>第二张内容</div>
    43. <div id="i3" style="height: 200px";>第三张内容</div>
    46. </body>
    47. </html>

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>测试S2</title>
    6. </head>
    7. <body>
    8. <form>
    9.     <div style="border: 1px solid red;">
    10.         <p>用户名：<input type="text" /></p>
    11.         <p>密  码：<input type="password" /></p>
    12.         <!--<p>邮  箱：<input type="email" /></p>-->
    13.         <p>
    14.             性别（单选框）：
    15.             <br /> 男 <input type="radio" name="ee" />
    16.             <br /> 女 <input type="radio" name="ee" />
    17.             <br /> 保密 <input type="radio" name="ee" />
    18.         </p>
    19.         <p>
    20.             爱好（复选框）：
    21.             <br /> 爱好1 <input type="checkbox" />
    22.             <br /> 爱好2 <input type="checkbox" />
    23.             <br /> 爱好3 <input type="checkbox" />
    24.             <br /> 爱好4 <input type="checkbox" />
    25.             <br /> 爱好5 <input type="checkbox" />
    26.             <br /> 爱好6 <input type="checkbox" />
    27.         </p>
    28.         <p>
    29.             城市：
    30.             <select>
    31.                 <option>北京</option>
    32.                 <option>上海</option>
    33.                 <option>广州</option>
    34.             </select>
    35.             <select multiple size="2">
    36.                 <option>北京</option>
    37.                 <option>上海</option>
    38.                 <option>广州</option>
    39.             </select>
    40.             <select>
    41.                 <optgroup label="AAA">
    42.                     <option>北京</option>
    43.                 </optgroup>
    44.                 <optgroup label="BBB">
    45.                     <option>上海</option>
    46.                 </optgroup>
    47.                 <optgroup label="CCC">
    48.                     <option>广州</option>
    49.                 </optgroup>
    50.             </select>
    51.         </p>
    52.         <p>文件：<input type="file" /></p>
    53.         <p>备注：<textarea></textarea></p>
    54.         <input type="submit" value="submit">
    55.         <input type="button" value="button">
    56.         <input type="reset" value="reset">
    57.     </div>
    58. </form>
    59. </body>
    60. </html>

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>表格Table</title>
    6. </head>
    7. <body>
    8.     <table border="1">
    9.         <tr>
    10.             <th bgcolor="red">一</th>
    11.             <th bgcolor="green">二</th>
    12.             <th bgcolor="aqua">三</th>
    13.         </tr>
    14.         <tr>
    15.            <td>1</td>
    16.            <td>2</td>
    17.            <td>3</td>
    18.         </tr>
    19.         <tr>
    20.            <td>1</td>
    21.            <td>2</td>
    22.            <td>3</td>
    23.         </tr>
    24.         <tr>
    25.            <td>1</td>
    26.            <td>2</td>
    27.            <td>3</td>
    28.         </tr>
    29.     </table>
    30.     <hr />
    31.     <table border="1" >
    32.         <tr>
    33.             <th colspan="3">一</th>
    34.             <th>二</th>
    35.             <th>三</th>
    36.             <!--<th>四</th>-->
    37.             <!--<th>五</th>-->
    38.         </tr>
    39.         <tr>
    40.            <td>1</td>
    41.            <td rowspan="3">2</td>
    42.            <td>3</td>
    43.            <td>4</td>
    44.            <td>5</td>
    45.         </tr>
    46.         <tr>
    47.            <td>1</td>
    48.            <!--<td>2</td>-->
    49.            <td>3</td>
    50.            <td>4</td>
    51.            <td>5</td>
    52.         </tr>
    53.         <tr>
    54.            <td>1</td>
    55.            <!--<td>2</td>-->
    56.            <td>3</td>
    57.            <td>4</td>
    58.            <td>5</td>
    59.         </tr>
    60.         <tr>
    61.            <td>1</td>
    62.            <td>2</td>
    63.            <td>3</td>
    64.            <td>4</td>
    65.            <td>5</td>
    66.         </tr>
    67.         <tr>
    68.            <td>1</td>
    69.            <td>2</td>
    70.            <td>3</td>
    71.            <td>4</td>
    72.            <td>5</td>
    73.         </tr>
    74.     </table>
    75. </body>
    76. </html>


    二、CSS











    `23R914B~B$5A1(6(R~6(ZP.png
    KKHL~9JGC78DBO7%8}S[CPO.png
    @9WZE6U4(0AS)M__CD5D]8G.png
  • 相关阅读:
    ant-design-vue——子组件通过$parent修改父组件的值时无效问题及解决方法
    vue——quill-editor自定义图片上传
    ES6——var、let、const三者的区别
    js——数组/对象常用方法总结
    28.最长回文子序列
    27.马拉车
    26.扫雷一次点击
    JS添加内容之方法里传AJAX参数
    JQ 实现加载其他页面的H5代码 JQ加载H5独立导航栏代码
    CentOS 7不能上网 解决方法
  • 原文地址：https://www.cnblogs.com/sandler613/p/5768410.html
Copyright © 2020-2023  润新知