Python之路_Day14 | 易学教程

Python之路_Day14_课堂笔记

前期回顾：

本节内容：

一、HTML

- 标签

二、CSS

- 效果

color: red;

三、JavaScript

- 语言基础
- 效果

查找

操作

jQuery

一、HTML

1、头部标签

meta、title、link、引入css、引入js

<!DOCTYPE html><html lang="en"><head>    <!--自闭和标签-->    <meta charset="UTF-8" />    <!--自动刷新-->    <meta http-equiv="Refresh" Content="30"/>    <!--自动跳转-->    <!--<meta http-equiv="Refresh" Content="5; Url=http://www.autohome.com.cn" />-->    <!--关键词-->    <meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >    <!--标签属性 name="alex"-->    <title name="alex">老男人</title>    <!--链接图片-->    <link rel="shortcut icon" href="favicon.ico"></head><body>测试</body></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

<!DOCTYPE html><html lang="en"><head>    <!--自闭和标签-->    <meta charset="UTF-8" />    <!--自动刷新-->    <meta http-equiv="Refresh" Content="30"/>    <!--自动跳转-->    <!--<meta http-equiv="Refresh" Content="5; Url=http://www.autohome.com.cn" />-->    <!--关键词-->    <meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >    <!--标签属性 name="alex"-->    <title name="alex">老男人</title>    <!--链接图片-->    <link rel="shortcut icon" href="favicon.ico"></head><body><!--内联和块级--><div style="background-color: red">测试</div><div style="background-color: green">测试</div><!--符号-->&lt;a&nbsp;b&gt;<!--段落和换行--><p>123456789</p><p>123<br />456<br />789</p><!--标题--><h1>标题</h1><h2>标题</h2><h3>标题</h3><h4>标题</h4><h5>标题</h5><h6>标题</h6><!--a标签--><a href="http://www.baidu.com">跳转1</a><a href="http://www.baidu.com" target="_blank">跳转1</a><!--寻找页面中id=i1的标签，将其标签放置在页面顶部--><a href="#i1">第一章</a><a href="#i2">第二章</a><a href="#i3">第三章</a><!--id没有一个标签的id属性值不允许重复，id属性可以不写--><div id="i1" style="height: 200px";>第一张内容</div><div id="i2" style="height: 200px";>第二张内容</div><div id="i3" style="height: 200px";>第三张内容</div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试S2</title></head><body><form>    <div style="border: 1px solid red;">        <p>用户名：<input type="text" /></p>        <p>密  码：<input type="password" /></p>        <!--<p>邮  箱：<input type="email" /></p>-->        <p>            性别（单选框）：            <br /> 男 <input type="radio" name="ee" />            <br /> 女 <input type="radio" name="ee" />            <br /> 保密 <input type="radio" name="ee" />        </p>        <p>            爱好（复选框）：            <br /> 爱好1 <input type="checkbox" />            <br /> 爱好2 <input type="checkbox" />            <br /> 爱好3 <input type="checkbox" />            <br /> 爱好4 <input type="checkbox" />            <br /> 爱好5 <input type="checkbox" />            <br /> 爱好6 <input type="checkbox" />        </p>        <p>            城市：            <select>                <option>北京</option>                <option>上海</option>                <option>广州</option>            </select>            <select multiple size="2">                <option>北京</option>                <option>上海</option>                <option>广州</option>            </select>            <select>                <optgroup label="AAA">                    <option>北京</option>                </optgroup>                <optgroup label="BBB">                    <option>上海</option>                </optgroup>                <optgroup label="CCC">                    <option>广州</option>                </optgroup>            </select>        </p>        <p>文件：<input type="file" /></p>        <p>备注：<textarea></textarea></p>        <input type="submit" value="submit">        <input type="button" value="button">        <input type="reset" value="reset">    </div></form></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>表格Table</title></head><body>    <table border="1">        <tr>            <th bgcolor="red">一</th>            <th bgcolor="green">二</th>            <th bgcolor="aqua">三</th>        </tr>        <tr>           <td>1</td>           <td>2</td>           <td>3</td>        </tr>        <tr>           <td>1</td>           <td>2</td>           <td>3</td>        </tr>        <tr>           <td>1</td>           <td>2</td>           <td>3</td>        </tr>    </table>    <hr />    <table border="1" >        <tr>            <th colspan="3">一</th>            <th>二</th>            <th>三</th>            <!--<th>四</th>-->            <!--<th>五</th>-->        </tr>        <tr>           <td>1</td>           <td rowspan="3">2</td>           <td>3</td>           <td>4</td>           <td>5</td>        </tr>        <tr>           <td>1</td>           <!--<td>2</td>-->           <td>3</td>           <td>4</td>           <td>5</td>        </tr>        <tr>           <td>1</td>           <!--<td>2</td>-->           <td>3</td>           <td>4</td>           <td>5</td>        </tr>        <tr>           <td>1</td>           <td>2</td>           <td>3</td>           <td>4</td>           <td>5</td>        </tr>        <tr>           <td>1</td>           <td>2</td>           <td>3</td>           <td>4</td>           <td>5</td>        </tr>    </table></body></html>

二、CSS

来自为知笔记(Wiz)

来源：https://www.cnblogs.com/sandler613/p/5768410.html

标签