Python学习笔记之【HTML和CSS基础】2019-08-1

章节号	内容
1图片格式(png)	宽度大于620px,保持高宽比减低为620px
1-1	应用
1-1-1	方法

第1章节  编辑器及插件

  这里首先使用VScode尝试编辑,插件为:   ↑调用浏览器查看

  ↑代码快速补全
  ↓为插件添加新的语言,可以在其他语言中使用

VS Code looks for extensions under your extensions folder .vscode/extensions. Depending on your platform it is located in the following folders:

Windows %USERPROFILE%\.vscode\extensions
Mac ~/.vscode/extensions
Linux ~/.vscode/extensions

    Go to the extensions folder matching your OS
    Find the extension abusaidm.html-snippets-x.x.x
    Find package.json inside the extension's directory and open it with any text editor, e.g. VSC
    Locate the sections with snippets and you will see:

{
     "language": "html",
     "path": "./snippets/snippets.json"
}

    Add the below snippet with another language you want.

,{
     "language": "NEW LANGUAGE",
     "path": "./snippets/snippets.json"
}

    Close VSCode and start it again, I have noticed a reload doesn't always work as intended, now the extension should work with the languages you added.

  快速插入注释:Ctrl+/
  特殊符号:
  1、空格：\ 
  2、<     ：\<
  3、>     ：\>

第2章节  简单的标签使用

• 2-1 简单的标签使用—超链接

  1、超链接（文字及图片链接）

<!--文字链接-->
<a href="http://www.baidu.com">baidu</a>
<!--图片链接-->
<a href="http://www.baidu.com"><img src="https://img.haomeiwen.com/i15359095/ad503dff30738f62.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/497"" alt=""></a>

  2、超链接的target属性

<!--target=blank表示点击链接会新建窗口-->
<a href="http://www.baidu.com" target="blank">baidu</a>
<!--没有target表示点击链接在原窗口打开-->
<a href="http://www.baidu.com">baidu</a>
<!--target=self表示点击链接在原窗口打开-->
<a href="http://www.baidu.com" target="self">baidu</a>

  ↑target这个属性好像有兼容性问题。多测试。

  3、超链接的title属性

<a href="http://www.baidu.com" target=blank title="hahahaha">baidu</a>

  ↑target鼠标移动到超级链接上将出现一个小提示。

  4、超链接的name属性，实现本页面内的跳转。

<a href="#c1">baidu</a>
<a href="http://www.baidu.com" name="c1">baidu</a>

  ↑“起点”位置的href=“#name属性的值”。
  ↑“终点”位置的name=“的值”。

• 2-2 简单的标签使用—列表及表格

  1、有序列表

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

   1.1
   2.2
   3.3

  2、无序列表

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

   ·1
   ·2
   ·3

  3、表格

<table border="3">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
    <tr>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
    <tr>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
</table>

  几个重要属性：
  cellpadding:内容与边框距离
  cellspacing:单元格间距
  align:内容水平对齐方式 left | center | right
  valign:内容垂直对齐方式 top | middle | bottom
  colspan:水平合并
  rowspan:垂直合并

  ↓演示水平合并，如果不删除被合并位置的单元格，表格将被撑开。

<table border="3">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td colspan="2">1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
    <tr>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
    <tr>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
</table>

  ↓演示水平合并，删除被合并位置的单元格，表格正常。

<table border="3">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td colspan="2">1111111</td>
        <!-- <td>2222222</td> -->
        <td>3333333</td>
    </tr>
    <tr>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
    <tr>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
</table>

• 2-3 简单的标签使用—表单（Form）及常用控件（Controls）

<form action="htttp://表单数据上传的网址在这里">
        
        姓名：<input type="text">
        <input type="button" value="提交">
        <input type="checkbox" name="" id="">
        <input type="radio" name="" id="">
        <input type="password" name="" id="">
        <!--option传的是value而不是汉字，site=0 -->
        <select name="site" id="">
        <option value="0">北京</option>
        </select>
        <!--textarea多行文本-->
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <input type="submit" value="submit">
        <input type="reset" value="">

</form>

  ↑form中的内容，只要点击了submit，就会上传到action所标注的网址。

• 2-3 简单的标签使用—iframe

<iframe src="一个网址" frameborder="0"></iframe>

  ↑页面里边嵌页面。

<frameset cols="33%,33%,33%,">
    <frame src="网址">
    <frame src="网址">
    <frame src="网址">
</frameset>

  ↑新标准可能不支持某些属性。

第3章节  CSS基础

• 3-1 CSS基础—加载或者使用的方式

  1、直接在页面中嵌入

<style>
     <!--table叫做   选择器    -->   
    table{
        background-color: blue;
        font-size: 20px;        
    }
</style>

  2、外部引入

<link rel="stylesheet" href="style.css">

<html lang="en">
<style type="text/css">
    table{
        background-color: blue;
        font-size: 20px;
        
    }


</style>
<link rel="stylesheet" href="style.css">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1111111.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>


<table border="3">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td rowspan="2">1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
    <tr>
        <!-- <td>1111111</td> -->
        <td>2222222</td>
        <td>3333333</td>
    </tr>
    <tr>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
</table>


<form action="">
        
        姓名：<input type="text">
        <input type="button" value="提交">
        <input type="checkbox" name="" id="">
        <input type="radio" name="" id="">
        <input type="password" name="" id="">
        <select name="" id=""></select>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <input type="submit" value="submit">
        <input type="reset" value="">
</form>
<iframe src="" frameborder="0"></iframe>
<frameset cols="33%,33%,33%,">
    <frame src="">
    <frame src="">
    <frame src="">
</frameset>

• 2-1 类的初步—定义一个类并创建对象实例

第2章节 

• 2-1 类的初步—定义一个类并创建对象实例

  2-1-1. 导言—用户管理—用户的分类及介绍

• 2-2 类的初步—定义一个类并创建对象实例

  2-2-1. 导言—用户管理—用户的分类及介绍

第3章节 

• 3-1 类的初步—定义一个类并创建对象实例

  3-1-1. 导言—用户管理—用户的分类及介绍

• 3-2 类的初步—定义一个类并创建对象实例

  3-2-1. 导言—用户管理—用户的分类及介绍