WEEK14：Html基础

  • HTML
    • 本质：一套规则，浏览器认识的规则
    • 开发者：
      • 学习html规则
      • 开发后台程序
        • 写html文件（充当模板的文件）
        • 数据库获取数据，然后替换到HTML文件的指定位置（web框架）
    • 本地测试
      • 方法一：找到文件路径，直接浏览器方式打开
      • 方法二：使用pycharm打开测试
    • 编写html文件
      • doctype：对应关系。<!DOCTYPE html>
      • html：标签，标签内部可以写属性。一个文件只能有一个
      • head标签：
        头部信息，除了title之外，其他标签在浏览器中不可见
        • title：标题
        • <link />:
          • <link rel="shortcut icon" href="image/favicon.ico">:添加图标
        • <style />:
        • <script />:
        • <meat />:
          • <meta charset="UTF-8">：定义编码
          • <meta http-equiv="Refresh" Content="30">：默认30秒刷新一次
          • <meta http-equiv="Refresh" Content="30";Url=http://baidu.com">：30秒之后跳转到网站http://baidu.com 
          • <meta name="keywords" content="星际2,袭击老男孩,专访">：添加关键字
          • <meta name="description" content="互联网教育大拿">：添加描述
      • body标签：
        • <a />:点击跳转,例如<a href="http://www.baidu.com">李&nbsp;&nbsp;&nbsp;姐</a>
          • 空格：&nbsp;
          • 大于号：&gt;
          • 小于号：&lt;
        • <p />:段落
          • 换行<br>
        • <hn />:n标题的数字大小，数字越小，字越大，取值1-6
        • <span />:行内标签，多行此标签输出的内容只占一行
          • 所有的标签分为：
            • 块级标签：h标签（加大加粗），p标签（段落与段落之间有间距），div标签（白板）等等
            • 行内标签（内联标签）：span标签（白板）等
           1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <form  action="http://localhost:8888/index" method="GET">
 9 <!--         如果使用 method="GET"会将数据拼接到url上然后发给后端(默认)-->
10 <!--         如果使用 method="POST"会将数据放到内容里传到后端-->
11         <input type="text" name="user">
12         <input type="text" name="email">
13         <input type="password" name="pwd">
14 <!--         {"user":"用户输入的用户名"，"email"："用户输入的邮箱","pwd":"用户输入的密码"}-->
15         <input type="button" value="登录1">
16         <input type="submit" value="登录2">
17     </form>
18     <br/>
19     <form action="https://www.sogou.com/web">
20         <input type="text" name="query" value="赵凡">
21         <input type="submit" value="搜索">
22     </form>
23 </body>
24 </html>
        • <input />：
          • <input type="text" />：普通文本输入
            name属性，value属性
          • <input type="password" />：密码输入
            name属性，value属性
          • <input type="button"  value="登录1"/>：按钮
          • <input type="submit"  value="登录2"/>：提交表单按钮
          • <input type="radio"  >：单选框
            name属性，value属性，checked属性，name相同的互斥
          • <input type="checkbox"  >：单选框
            name属性，value属性，checked属性，批量获取数据
          • <input type="file"  >：上传文件按钮
            依赖form表单的属性，必须加属性enctype="multipart/form-data"
          • <input type="reset"  >：重置按钮
          • <select \ >：下拉选择菜单
            name属性，内部option value ，提交后台，size,multiple
        • <textarea name="maeo">默认值</textarea>：多行文本输入
          name属性
           1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <form enctype="multipart/form-data">
 9         <div>
10 <!--        多行文本输入，默认值放中间-->
11             <textarea name="meno" >asdfasdf</textarea>
12 <!--            下拉框，通过selected="selected"设置默认值，size="10"同时显示前10个，multiple="multiple"设置多选（按住ctrl多选）-->
13             <select name="city" size="10" multiple="multiple">
14 <!--                可以使用<optgroup></optgroup>对选项进行分组-->
15                 <option value="1">北京</option>
16                 <option value="2">上海</option>
17                 <option value="3" selected="selected">南京</option>
18                 <option value="4">成都</option>
19             </select>
20 
21             <input type="text" name="user" />
22 <!--            单选框，name值必须一样，value的值为提交给后台的值，设置默认值checked="checked"-->
23             <p>请选择性别：</p>
24             男：<input type="radio" name="gender" value="1"  />
25             女：<input type="radio" name="gender" value="2" checked="checked"/>
26             Alex：<input type="radio" name="gender" value="3"/>
27 <!--            复选框-->
28             <p>爱好</p>
29             篮球：<input type="checkbox" name="favor"  value="1" />
30             足球：<input type="checkbox" name="favor"  value="2" checked="checked" />
31             皮球：<input type="checkbox" name="favor"  value="3" />
32             台球：<input type="checkbox" name="favor"  value="4" checked="checked"/>
33             网球：<input type="checkbox" name="favor"  value="5" />
34             <p>技能</p>
35             撩妹：<input type="checkbox" name="skill" checked="checked" />
36             写代码：<input type="checkbox" name="skill"/>
37 <!--            上传文件按钮-->
38             <p>上传文件</p>
39             <input type="file" name="fname"/>
40         </div>
41 
42         <input type="submit" value="提交" />
43         <input type="reset" value="重置" />
44     </form>
45 </body>
46 </html>
        • <a />
          • 跳转
          • 锚
        • <div />：给其中的内容加属性等，方便定位，方便js或者css操作
           1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--href=某个标签的ID，标签不允许重复-->
 9     <a href="#i1">第一章</a>
10     <a href="#i2">第二章</a>
11     <a href="#i3">第三章</a>
12     <a href="#i4">第四章</a>
13 
14     <div id="i1" style="height:600px;">第一章的内容</div>
15     <div id="i2" style="height:600px;">第二章的内容</div>
16     <div id="i3" style="height:600px;">第三章的内容</div>
17     <div id="i4" style="height:600px;">第四章的内容</div>
18 </body>
19 </html>
        • <img />：添加图片
        • ol,ul,dl：列表标签
           1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--添加图片，点击图片跳转，altb表示早图片上显示的字，title表示将鼠标移动到图片上之后显示的字-->
 9     <a href="http://www.oldboyedu.com">
10         <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女">
11     </a>
12 <!--列表标签，前面是点，ul和li是配合使用的，不能拆开-->
13     <ul>
14         <li>asdf</li>
15         <li>asdf</li>
16         <li>asdf</li>
17         <li>asdf</li>
18     </ul>
19 <!--列表标签，前面是数字，ol和li是配合使用的，不能拆开-->
20     <ol>
21         <li>asdf</li>
22         <li>asdf</li>
23         <li>asdf</li>
24         <li>asdf</li>
25     </ol>
26 <!--列表标签，前面是数字，dl和dt\dd是配合使用的,dt是一级标签，dd是二级标签，不能拆开-->
27     <dl>
28         <dt>ttt</dt>
29         <dd>ddd</dd>
30         <dd>ddd</dd>
31         <dd>ddd</dd>
32         <dt>ttt</dt>
33         <dd>ddd</dd>
34         <dd>ddd</dd>
35         <dd>ddd</dd>
36     </dl>
37 </body>
38 </html>
        • 表格：tr是行，td是列，table,thead,tbody
           
           1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <table border="1">
 9     tr是行，td是列
10     <tr>
11         <td>主机名</td>
12         <td>端口</td>
13         <td>操作</td>
14     </tr>
15     <tr>
16         <td>1.1.1.1</td>
17         <td>80</td>
18         <td>
19             <a href="s2.html">查看详细</a>
20             <a href="#">修改</a>
21         </td>
22     </tr>
23     <tr>
24         <td>1.1.1.1</td>
25         <td>80</td>
26         <td>第二行，第3列</td>
27     </tr>
28 </table>
29 
30 <table border="1">
31 <!--    表头，表头里面的列是th-->
32     <thead>
33         <tr>
34             <th>表头1</th>
35             <th>表头1</th>
36             <th>表头1</th>
37             <th>表头1</th>
38         </tr>
39     </thead>
40 <!--    内容-->
41     <tbody>
42         <tr>
43             <td>1</td>
44             <td colspan="2">1</td>
45 <!--            colspan="2",行向合并两个单元格，即合并两个单元格-->
46             <td>1</td>
47         </tr>
48         <tr>
49             <td rowspan="2">1</td>
50 <!--            列向合并单元格-->
51             <td>1</td>
52             <td>1</td>
53             <td>1</td>
54         </tr>
55         <tr>
56             <td>1</td>
57             <td>1</td>
58             <td>1</td>
59         </tr>
60         <tr>
61             <td>1</td>
62             <td>1</td>
63             <td>1</td>
64             <td>1</td>
65         </tr>
66     </tbody>
67 </table>
68 </body>
69 </html>
        • lable：获取光标，点击文字是的关联的文本框可以输入
           
           1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <fieldset>
 9         <legend>登录</legend>
10 <!--        点击用户名三个字也可以输入-->
11         <label for="username">用户名：</label>
12         <input id="username" type="text" name="user" />
13         <br />
14         <label for="pwd">密码：</label>
15         <input id="pwd" type="text" name="user" />
16     </fieldset>
17 </body>
18 </html>
      • 注释：<!--注释的内容-->

    • 标签分类
      • 自闭和标签：非常少，例如<meta charset="UTF-8">
      • 主动闭合标签：<title>老男孩</title>
  • CSS
    在每个标签上设置style属性，每个属性均已分号结尾
    • 注释掉代码使用   /*要注释的内容*/
    • 选择器
      优先级，如果同一个标签使用多个选择器的样式，如果样式不冲突则全部样式都应用，如果有冲突的样式则使用最后定义的样式
      选择器可以写在head里面的style标签中  或者 写在单独的文件中（使用<link rel="stylesheet" href="css/commons.css"(文件位置) />引用文件定义的样式）
      • id选择器
      • class选择器（使用最多）
      • 标签选择器
      • 层级选择器
      • 组合选择器　　
      • 属性选择器
         1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*
 8 <!--        标签的样式可写在head里面，style标签中写样式-->
 9 <!--ID选择器-->
10 <!--        id的值为i1的样式-->
11         #i1{
12 <!--        background-color是背景颜色，后面跟RGB颜色对应值-->
13             background-color: #2459a2;
14             height: 48px;
15         }
16         #i2{
17             background-color: #2459a2;
18             height: 48px;
19         }
20         #i3{
21             background-color: #2459a2;
22             height: 48px;
23         }
24 <!--class选择器-->
25 <!--        class的值为i1的样式,由于ID一般不能重复，所以大多数情况下用此种方法-->
26         .c1{
27             background-color: #2459a2;
28             height: 10px;
29         }
30         */
31         /*#c2{*/
32             /*background-color: black;*/
33             /*color: white;*/
34         /*}*/
35 <!--标签选择器-->
36 <!--所有的div标签的属性-->
37         /*div{*/
38             /*background-color: black;*/
39             /*color: white;*/
40         /*}*/
41 <!--层级选择器-->
42 <!--        span标签下面的div标签中的内容使用此样式-->
43         span div{
44             background-color: black;
45             color: white;
46         }
47 <!--        class=c1中的div标签中的内容使用此样式-->
48         .c1 div{
49             background-color: black;
50             color: white;
51         }
52 <!--组合选择器-->
53 <!--        class的值为i1和i2以及标签div下面的内容使用此样式-->
54         .i1,.i2,div{
55              background-color: black;
56             color: white;
57         }
58 <!--属性选择器-->
59 <!--        input标签中type='text'的标签下面使用此样式-->
60         input[type='text']{ width:100px; height:200px; }
61 <!--        class=c1的标签中，n='alex'的标签使用此样式-->
62         .c1[n='alex']{ width:100px; height:200px; }
63     </style>
64 </head>
65 <body>
66     <div class="i1">ff</div>
67     <div class="i2">ff</div>
68     <div class="i3">2</div>
69     <input class="c1" type="text" n="alex">
70     <input class="c1" type="password">
71 </body>
72 </html>
         1 #commons.css文件
 2 .c2{
 3     font-size: 58px;
 4     color: black;
 5 }
 6 
 7 .c1{
 8     background-color: red;
 9     color: white;
10 }
         1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 <!--    引用commons.css文件，将其中的样式应用到多个html文件-->
 7     <link rel="stylesheet" href="css/commons.css" />
 8 </head>
 9 <body>
10     <div class="c1 c2" style="color: pink">asdf</div>
11     <div class="c1 c2" style="color: pink">asdf</div>
12     <div class="c1 c2" style="color: pink">asdf</div>
13     <div class="c1 c2" style="color: pink">asdf</div>
14     <div class="c1 c2" style="color: pink">asdf</div>
15     <div class="c1 c2" style="color: pink">asdf</div>
16     <div class="c1 c2" style="color: pink">asdf</div>
17     <div class="c1 c2" style="color: pink">asdf</div>
18 </body>
19 </html>
    • 边框
    • height,width,line-height,color,font-size,font-weight
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--边框：border，宽度等于1像素、实体的（虚线dotted）、红色-->
 9     <div style="border: 1px solid red;">
10         asdfasdf
11     </div>
12 <!--高度48像素，
13 字体为黑色，
14 高度为20%，
15 宽度80%（可以用像素，也可以用百分比），
16 边框1像素红色实线，
17 字体大小为16像素，
18 文本位置水平居中，
19 文本位置垂直居中（需要使height和line-height的值相等），
20 字体加粗-->
21     <div style="height: 48px;
22     color:black;
23 <!--    height:20%;-->
24     width:80%;
25     border: 1px solid red;
26     font-size: 16px;
27     text-align: center;
28     line-height: 48px;
29     font-weight: bold;
30     ">asdf</div>
31 </body>
32 </html>
    • float：块级标签也可以堆叠
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--float使得两个块级标签div组合在一起，占一行。如果比例超过100则换行-->
 9     <div style="width: 20%;background-color: red;float: left">1</div>
10     <div style="width: 60%;background-color: black;float: right">2</div>
11 </body>
12 </html>
    • display
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--display可以更改标签块级和内联标签，inline为行内标签，block为块级标签，inline-block使得标签同时具有行内和块级标签的属性，none让标签消失；
 9 行内标签无法设置高度、宽度、边距（padding margin），而块级标签可以设置；
10 display可以使得行内标签具有块级标签可以自定义属性的能力。-->
11     <!--<div style="background-color: red;display: inline;">asdf</div>-->
12     <!--<span style="background-color: red;display: block;">asdf</span>-->
13     <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span>
14     <a style="background-color: red;">Eric</a>
15 </body>
16 </html>
    • padding内边距 margin外边距(0,auto)
    • text-align
    • 背景
       1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             height: 38px;
 9 /*            头部定义为灰色*/
10             background-color: #dddddd;
11 /*           文本位置上下居中*/
12             line-height: 38px;
13         }
14     </style>
15 </head>
16 <!--style="margin: 0"设置外边距为0-->
17 <body style="margin: 0">
18     <div class="pg-header">
19 <!--        margin: 0 auto; 0代表上下边距为0，auto表示左右两边间距自动，代表居中-->
20         <div style="width: 980px;margin: 0 auto;">
21             <div style="float: left;">收藏本站</div>
22             <div style="float: right;">
23                 <a>登录</a>
24                 <a>注册</a>
25             </div>
26             <div style="clear: both"></div>
27         </div>
28     </div>
29     <div>
30         <div style="width: 980px;margin: 0 auto;">
31             <div style="float: left">
32                 Logo
33             </div>
34             <div style="float: right">
35                 <div style="height: 50px;width: 100px;background-color: #ddfddd">购物车</div>
36             </div>
37             <div style="clear: both"></div>
38         </div>
39     </div>
40     <div style="background-color: red;">
41          <div style="width: 980px;margin: 0 auto;">
42              导航栏
43          </div>
44     </div>
45     <div style="width: 300px;border: 1px solid red;">
46         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
47         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
48         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
49         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
50         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
51         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
52         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
53         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
54         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
55         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
56         <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
57 <!--       style="clear: both;" 消除上面标签的float效果-->
58         <div style="clear: both;"></div>
59     </div>
60 </body>
61 </html>

       

posted @ 2019-09-23 22:15  飞琼君  阅读(285)  评论(0)    收藏  举报