Python学习笔记之【HTML和CSS基础】2019-08-1
2019-08-16 本文已影响0人
平知
| 章节号 | 内容 |
|---|---|
| 1图片格式(png) | 宽度大于620px,保持高宽比减低为620px |
| 1-1 | 应用 |
| 1-1-1 | 方法 |
这里首先使用VScode尝试编辑,插件为:第1章节 编辑器及插件
↑调用浏览器查看
↑代码快速补全
↓为插件添加新的语言,可以在其他语言中使用
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 类的初步—定义一个类并创建对象实例
