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









posted @ 2016-08-13 17:19  滚动的沙砾  阅读(210)  评论(0)  编辑  收藏  举报