Python3 - 补充知识点之HTML JavaScriptCSS (第五天)
Posted 韩俊强
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python3 - 补充知识点之HTML JavaScriptCSS (第五天)相关的知识，希望对你有一定的参考价值。
文章目录
一、html
1.1 文档结构
<!-- 注释 html 快捷键 command + / (ctrl + /) -->
<!--
DTD 文档类型声明 Document Type Define
将当前文档声明为HTML文档
-->
<!DOCTYPE html>
<!-- HTTML 文档开始位置 -->
<html>
<!-- 文档头部设置: 文档编码, 文档标题, 文档中引入的文件等等 -->
<head>
<meta charset="utf-8">
<title>文档结构</title>
</head>
<!-- 在文档中呈现的内容都是放在body中 -->
<body>
<p>hello</p>
</body>
<!-- HTML文档结束位置 -->
</html>
1.2 标题标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!--
hi标签
i是数字, 由1-6.
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 分割线 -->
<hr />
</body>
</html>
1.3 文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<!-- 呈现一般文本: span
由span结合css给一些文字设计样式
-->
<span>一般文本</span>
<!-- 加粗文本字体 b 或者 strong -->
<b>小明</b>
<strong>hello world</strong>
<!-- 斜体文字的文本 i 或者 em -->
<i>斜体</i>
<em>斜体2</em>
<!-- 段落标签 -->
<p>第一段</p>
<p>第二段</p>
</body>
</html>
1.4 图像标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像标签</title>
</head>
<body>
<!-- 属性
src -- 要显示图片的路径 [本地文件路径, 或者网路图片路径]
相对路径(使用)
参考物: 当前正在编辑的文件
两个路径:
. ---当前编辑这个文件所在的文件夹 HTML
.. ---文件所在文件夹的上一级目录
找文件的方式
参照正在编辑的文件, 找与目的文件相同的一级目录, 找到这级目录之后,从这个目录为起点依次去定位到目的文件
./img/000.png
绝对路径
C:\\User\\....
width --- 设置图片的宽度
height ---- 设置图片的高度
width 和 height 设置一方即可, 另外一边会根据图片比例自适应
alt ---- 图片路径错误提示
title ---- 鼠标悬浮提示语, 可以应用到所有标签
-->
<img src="./img/000.png" width="200">
<img src="https://scpic.chinaz.net/files/pic/pic9/202103/apic31350.jpg" width="300" alt="图片显示失败" title="我被鼠标盯上了">
</body>
</html>
1.5 超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接标签</title>
</head>
<body>
<!-- 属性
href --- 设置连接地址
可以使网络地址, 也可以是本地的html的文件地址
target --- 设置的是链接地址显示的位置, 默认是当前页面中显示
_blank -- 新建一个空白的界面, 在界面中显示
指定具有某个名字的窗口中显示 ---
-->
<a href="https://www.baidu.com">百度一下1</a>
<a href="https://www.baidu.com" target="_blank">百度一下2</a>
<a href="https://www.baidu.com" target="_blank" name="custom">跳转到指定窗口</a>
<!-- 内嵌窗口 -->
<iframe src="http://www.360.com" name="custom"></iframe>
<img src="img/000.png" width="400" >
<!-- 如何让一张图片具有链接性 -->
<a id="xiaoming" href="https://www.baidu.com">
<img src="./img/000.png" width="200" />
</a>
</body>
</html>
1.6 锚点跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚点跳转</title>
<!-- 引入一个style 标签 -->
<style type="text/css">
/* css代码 */
/* 标签名称进行定位 --- 选择器*/
div
/* 相对于窗口进行定位 */
position: fixed;
/* 定位位置 */
bottom: 0;
right: 0;
/* 背景颜色 */
background-color: pink;
/* 文字颜色 */
color: red;
/* 设置内边距: 变迁边缘与内容之间的边距 */
padding: 10px;
/* 宽度 px像素 */
/* width: 150px; */
/* 设置内容居中 */
text-align: center;
</style>
</head>
<body>
<!-- div 区 块 -->
<div>
<a href="#first">第一张图片</a>
<!-- 换行标签 -->
<br>
<a href="#second">第二张图片</a>
<br>
<a href="#third">第三张图片</a>
<br>
<a href="#forth">第四张图片</a>
<br>
<!-- 跳转到其他html中的标签位置 xiaoming 的位置 -->
<a href="./5.超链接标签.html#xiaoming">第五张图片</a>
<br>
</div>
<!-- id属性: 建立a和目的标签之间的关系 -->
<img src="img/000.png" width="1000" id="first">
<img src="img/007.png" width="1000" id="second">
<img src="img/023.png" width="1000" id="third">
<img src="img/11.png" width="1000" id="forth">
</body>
</html>
1.7 列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签</title>
</head>
<body>
<!--
1. 有序列表
ol -- 列表
li -- 列表的元素
2. 无序列表
ul -- 列表标签
li -- 列表元素
3. 自定义列表
dl -- 列表标签
dt -- 列表元素
dd -- 对列表元素的解释
-->
<!-- 1. 有序列表
属性 type --- 设置有序的符号
默认是1 ---- 数字符号
A ---- 大写英文字母
a ---- 小写英文字母
I ---- 大写罗马符号
i ---- 小写罗马符号
-->
<ol type="i">
<li>西瓜</li>
<li>榴莲</li>
<li>香蕉</li>
</ol>
<!-- 2. 无序列表
type :
desc -- 默认 实心黑点
circle -- 圆圈
square 实心黑框
-->
<ul type="square">
<li>热巴</li>
<li>杨紫</li>
<li>赵丽颖</li>
</ul>
<!-- 3. 自定义列表 -->
<dl>
<dt>苹果</dt>
<dd>富含果酸, 解决坏心情</dd>
<dt>香蕉</dt>
<dd>缓解便秘良方</dd>
</dl>
</body>
</html>
1.8 表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<!--
table --- 表格标签
tr --- 行
td --- 单元格
th --- 标题单元格
thead --- 表格头 默认: 表头 -- 表body -- 表尾
tbody --- 表格体
tfoot --- 表格尾
caption --- 表格的标题
-->
<!-- table 的属性
border -- 设置边框线的线宽 默认是0
width -- 设置表格宽度
height -- 设置表格高度
cellpadding -- 设置单元格之间的缝隙
-->
<table border="1" width="500" height="450" cellspacing="0">
<thead>
<tr>
<!-- 标签名*数量 tab键就能生成对应个数的标签 -->
<th width="200" height="50">姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tr height="200">
<th>小米</th>
<th>12</th>
<!-- style 只作用于这里, 不作用域全局 -->
<!-- rowspan 占几行, 合并 行-单元格 -->
<th style="background-color: #FF0000; color: aqua;" rowspan="2">男</th>
<th>98</th>
</tr>
<tr>
<!-- colspan 占几列, 合并 列-单元格-->
<th colspan="2">小花</th>
<!-- <th>29</th> -->
<!-- <th>女</th> -->
<th>78</th>
</tr>
</table>
<!-- 父标签>子标签*数量>子标签*数量 例如:table>tr>th*4 -->
<!-- table>tr*3>th*4 tab 三行四列 -->
</body>
</html>
1.9 表格标签练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简历</title>
</head>
<body>
<!-- 练习: 写个简历 -->
<table border="2" width="800" height="350" cellspacing="0">
<tr>
<th rowspan="4">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.meituan.net%2Fdpmerchantpic%2F8cbeaa3841daef52b9e7cf0dc32f248c3058279.jpg&refer=http%3A%2F%2Fp0.meituan.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645109303&t=392d0b3b0dac8d924081643cedaf6d2c"
height="220" align="center">
</th>
<th>姓名</th>
<th>小明</th>
</tr>
<tr>
<th>手机号</th>
<th>188 8888 8888</th>
</tr>
<tr>
<th>邮箱</th>
<th>xiaoming@163.com</th>
</tr>
<tr>
<th>毕业院校</th>
<th>北京大学</th>
</tr>
<tr height="120">
<th>个人评价</th>
<th colspan="2" align以上是关于Python3 - 补充知识点之HTML JavaScriptCSS (第五天)的主要内容，如果未能解决你的问题，请参考以下文章