[Python知识库] HTML笔记

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Python知识库 -> HTML笔记 -> 正文阅读

[Python知识库]HTML笔记

1.定义

1.1什么是HTML？

HTML：Hyper Text Markup Language (超文本标记语言)
超文本：可以放视频、图片等。

1.2HTML的基本结构

基本结构：
<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        我的第一个网页
    </body>
</html>
?
通常：
<head></head> 称为网页头部
<body></body> 称为主体部分
<body></body> 等成对的标签，分别叫开始标签和结束标签，单独呈现的标签（空元素），如<hr/>;意为用/来关闭空元素。

2.基本标签

2.1标题标签

<h1>...</h1>    一级标题
<h2>...</h2>    二级标题
<h3>...</h3>    三级标题
<h4>...</h4>    四级标题
<h5>...</h5>    五级标题
<h6>...</h6>    六级标题
?
注：不同等级的标题标签对比，级别越高标题的字体越大。

2.2段落标签

<p>...</p>

2.3换行标签

<br/>

2.4水平线标签

<hr/>

2.5字体样式标签

加粗：<strong></strong>
斜体：<em>...</em>

2.6注释和特殊符号

特殊符号	字符实体
空格特殊符号	&nbsp ;(牛逼三炮不让用)
大于号(>)	&gt ;
小于号(<)	&lt ;
引号(")	&quot ;
版权符号?	&copy ;

3.图像标签

3.1常见的图像格式

JPG     GIF     PNG     BMP
?
<img src="img.jpg"/>
<img src="img.gif"/>
<img src="img.png"/>
<img src="img.bmp"/>

3.2语法

<img src="图像地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度"/>

3.3示例

<img src="img.jpg" alt="图片加载中..." title="图片" width="200px" height="200px"/>

4.链接标签

4.1页面间链接

4.1.1语法

<a href="跳转链接路径" target="目标窗口位置">链接文本或图像</a>
注意：target指的是链接在哪个路径打开，默认值有_self(新网页替换本网页)和_blank（在增加一个新的标签网页，原有的网页被保存下来）
例如：
<a href="new.html" target="_self">跳转到new.html</a>  （新网页替换本网页）
<a href="new.html" target="_blank">跳转到new.html</a>  （在增加一个新的标签网页，原有的网页被保存下来）

4.1.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a href="Demo02.html" target="_blank">跳转到Demo2页面</a>
    </body>
</html>

4.2锚链接

从A页面的甲位置跳转到本页中的乙位置

从A页面的甲位置跳转到B页面中的乙位置

4.2.1语法

创建跳转标记：
<a name="跳转名称">乙位置</a>
?
创建跳转链接：
<a href="#跳转名称">甲位置</a>

4.2.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a name="top"></a>
        9月16日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例84例。其中境外输入病例22例（云南16例，河南2例，广东2例，上海1例，浙江1例），含2例由无症状感染者转为确诊病例（浙江1例，河南1例）；本土病例62例（福建61例，其中厦门市31例、莆田市28例、泉州市1例、漳州市1例；云南1例，在德宏傣族景颇族自治州），含1例由无症状感染者转为确诊病例（在福建）。无新增死亡病例。新增疑似病例2例，均为境外输入病例（均在上海）。
        <a href="#top">跳转到顶部</a>
    </body>
</html>

4.3功能性链接

4.3.1语法

<a href="mailto:bdqnWebmaster@bdqn.cn">链接文本或图像</a>

5.列表

5.1无序列表

<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ul>
快捷键：li*个数+Tab键

5.2有序列表

<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ol>
?
注：ol标签里只允许包含li标签

5.3定义列表

<dl>
 ?  <dt>水果</dt>
 ?  <dd>苹果</dd>
 ?  <dd>桃子</dd>
 ?  <dd>李子</dd>
</dl>
?
<dt>:类目名
<dd>:类目列表

6.表格

6.1基本表格

<table border="表格外框的宽度">
 ?  <tr>
 ? ? ?  <th>1行1列的标题</th>
 ? ? ?  <th>1行2列的标题</th>
 ? ? ?  <th>1行3列的标题</th>
 ?  </tr>
 ?  <tr>
 ? ? ?  <td>1行1列的单元格</td>
 ? ? ?  <td>1行2列的单元格</td>
 ? ? ?  <td>1行3列的单元格</td>
 ?  </tr>
 ?  <tr>
 ? ? ?  <td>2行1列的单元格</td>
 ? ? ?  <td>2行2列的单元格</td>
 ? ? ?  <td>2行3列的单元格</td>
 ?  </tr>
</table>
?
<th>:单元格的标题
<td>:数据本身

6.2跨列（只能加在td里面）

td中属性colspan
?
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="2">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>分数</th>
        </tr>
        <tr>
            <td colspan="2">张三</td>
            <td>1001</td>
            <td>80</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>1002</td>
            <td>56</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>1003</td>
            <td>75</td>
        </tr>
        </table>
    </body>
</html>
解析：
<td colspan="列数">数据内容</td>
（跨列指的是列数<左右>单元格的合并 去掉一个td）

6.3跨行（只能加在td里面）

td中属性rowspan
?
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="2">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>分数</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>1001</td>
            <td>80</td>
        </tr>
        <tr>
            <td rowspan="2">李四</td>
            <td>1002</td>
            <td>56</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>1003</td>
            <td>75</td>
        </tr>
        </table>
    </body>
</html>
解析：
<td rowspan="行数">数据内容</td>
（跨行指的是行数单元格<上下单元格>的合并  去掉一个td）

7.媒体元素

7.1video播放视频

7.1.1语法

<video src="指定要播放的视频文件的路径" controls="controls">
?
注：controls是提供播放、暂停和音量的控件，""内不写的话默认是controls

7.1.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <video src="video/video.webm" controls="controls"></video>
    </body>
</html>
?

7.2video播放多种格式视频

7.2.1示例

防止各类浏览器无法播放视频
?
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <video controls="controls">
        <source src="video/video.webm"></source>
        <source src="video/video.mp4"></source>
        </video>
    </body>
</html>

7.3audio播放音乐

7.3.1语法

<audio src="指定要播放的音乐文件的路径" controls="controls">

7.3.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <audio src="music/music.mp3" controls="controls">
    </body>
</html>

7.4audio播放多种格式音乐

7.4.1语法

<audio controls="controls" >
    <source src="指定要播放的音乐文件的路径" type="audio/音乐文件类型"></source>
    <source src="指定要播放的音乐文件的路径" type="audio/音乐文件类型"></source>
</audio>

7.4.2示例

防止各类浏览器无法播放视频
?
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <audio controls="controls" >
            <source src="music/music.mp3" type="audio/mp3"></source>
            <source src="music/music.ogg" type="audio/ogg"></source>
        </audio>
    </body>
</html>

8.常用表单

表单语法：

<form method="get" action="Demo02.html">
    ...
</form>
?
method：规定如何发送表单数据，常用值是get/post
action：表示向何处发送表单数据

表单格式：

<input type="" name="" value=""/>
?
type：input元素类型
name：input元素名称（前端传入到后端，前端触发之后后端获取value值，前端里面基本看不到）
value：input元素的值

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

8.1文本框——text

8.1.1语法

<input type="text" name="" value="">

8.1.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form method="get" action="Demo02.html">
            <input type="text" name="keyword" value="请在此输入账号">
        </form>
    </body>
</html>
?

8.2密码框——password

8.2.1语法

<input type="password" name="" />

8.2.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="text" name="a" value="请在此输入账号"><br/>
            <input type="password" name="" />
        </form>
    </body>
</html>

8.3单选按钮——radio

8.3.1语法

<input type="radio" name="" value="" /><br/>

8.3.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="radio" name="sex" value="1" />男<br/>
            <input type="radio" name="sex" value="2" />女<br/>
        </form>
    </body>
</html>
?

8.4复选框(多选按钮)——checkbox

8.4.1语法

<input type="checkbox" name="" value="" /><br/>

8.4.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="checkbox" name="likes" value="1" />足球<br/>
            <input type="checkbox" name="likes" value="2" />篮球<br/>
            <input type="checkbox" name="likes" value="3" />排球<br/>
        </form>
    </body>
</html>
?

8.5列表框——select、option

8.5.1语法

<select name="">
    <option value=""></option>
</select>

8.5.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <select name="city">
                <option value="1">南京</option>
                <option value="2">北京</option>
                <option value="3">上海</option>
                <option value="4">深圳</option>
            </select>
        </form>
    </body>
</html>

8.6按钮——reset（重置）、submit（提交）、button

8.6.1语法

<input type="reset" value="重置" />   
<input type="submit" value="提交" />  后端可以获取
<input type="button" value="提交2" οnclick="事件"/> 后端无法获取
?
onclick：给某个元素添加事件

8.6.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="text" name="keyword" value="请在此输入账号"><br/>
            <input type="password" name="" /><br/>
            <input type="radio" name="sex" value="1" />男<br/>
            <input type="radio" name="sex" value="2" />女<br/>
            <input type="checkbox" name="likes" value="1" />足球<br/>
            <input type="checkbox" name="likes" value="2" />篮球<br/>
            <input type="checkbox" name="likes" value="3" />排球<br/>
            <select name="city">
                <option value="1">南京</option>
                <option value="2">北京</option>
                <option value="3">上海</option>
                <option value="4">深圳</option>
            </select><br/>
            <input type="reset" value="重置" />
            <input type="submit" value="提交" />
            <input type="button" value="提交2" οnclick=""/>
        </form>
    </body>

8.7默认元素——checked / selected

8.7.1示例

一般情况下：
<select></select>类型中使用selected
其它类型中使用checked
?
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="text" name="keyword" value="请在此输入账号"><br/>
            <input type="password" name="" /><br/>
            <input type="radio" name="sex" value="1" />男<br/>
            <input type="radio" name="sex" value="2" checked=""/>女<br/>
            <select name="city">
                <option value="1">南京</option>
                <option value="2" selected="" >北京</option>
                <option value="3">上海</option>
                <option value="4">深圳</option>
            </select><br/>
            <input type="reset" value="重置" />
        </form>
    </body>
</html>

8.8多行文本框—— textarea

8.1.1语法

<textarea rows="行像素值" cols="列像素值"></textarea>

8.1.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <textarea rows="10" cols="30"></textarea><br/>
    </body>
</html>

8.9文件域——file

8.9.1语法

<input type="file" name="" accept="限制文件类型"/>
?
accept：不写默认所有文件都可以

8.9.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="file" name="photo" accept="image/jpeg"/>
    </body>
</html>

9.表单高级应用

9.1隐藏域——hidden

9.1.1语法

<input type="hidden" name="" value="">

9.1.2示例

<input type="hidden" name="id" value="3">

9.2只读——readonly

9.2.1语法

<input type="text" name="" value="" readonly="readonly">

9.2.2示例

<input type="text" name="keyword" value="123" readonly="readonly">

9.3禁用——disabled

9.3.1语法

<input type="text" name="" value="" disabled=""><br/>

9.3.2示例

<input type="text" name="keyword" value="123" disabled=""><br/>

10.表单初级验证

10.1 placeholder

10.1.1语法

<input type="text" name="" placeholder="">

10.1.2示例

<input type="text" name="keyword" placeholder="请输入账号">

10.2 required

10.2.1语法

<input type="text" name="" required="">

10.2.2示例

<input type="text" name="keyword" required=""><br/>

10.3 pattern

10.3.1语法

<input type="text" name="" pattern="[输入范围]{字符长度}">

10.3.2示例

<input type="text" name="keyword" required="" pattern="[A-z]{8}">

Python知识库最新文章

Python中String模块

【Python】 14-CVS文件操作

python的panda库读写文件

使用Nordic的nrf52840实现蓝牙DFU过程

【Python学习记录】numpy数组用法整理

Python学习笔记

python字符串和列表

python如何从txt文件中解析出有效的数据

Python编程从入门到实践自学/3.1-3.2

python变量

加:2021-10-06 12:11:29 更:2021-10-06 12:12:41

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/15 17:49:34-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码