代码收藏家 Python网页开发基础及常用标签详解
一、前端基本标签的使用
html是网页标签，是超文本语言，是构成网页的重要骨架。
1.书写html网页,应先创建文件，其后缀名为.html
网页模版介绍：
<!DOCTYPE html>
!DOCTYPE：规定你的网页文档是什么类型
html：网页格式
规定这个网页类型是html网页格式
<html lang="en">
html：网页根标签开头
lang:网页字体语言
en:英文网页
zh-cn:中文网页
<head>
head：网页头部标签
<meta charset="UTF-8">
meta:辅助网页标签
charset:规定字符串编码格式
UTF-8：通用码
规定这个网页格式为通用码
<title>Title</title>
例如：<title> b站<title>
title:网页标题
</head>
<body>
身体标签 展示用户去查看代码效果
</body>
</html>网页根标签结尾2.常用标签
单标签只有一个开头，双标签成对出现，有开头有结尾
①div 盒子标签，也可称为容器，里面可放任意内容和其他标签，可以<div>嵌套<div>
<body>
<div>
盒子标签
</div>
<div>
<div>
</div>
</div>
</body>②p标签：文本段落标签，可以嵌套在div中
<body>
<div>
<p>
</p>
</div>
</body>③span标签：结合p标签进行使用
<body>
<p>
今天的天气
<span style"colour：red">真好</span>
注释：结合p标签进行使用，可以对语句进行强调，设置不同的颜色
</p>
</body>④h系列标签：如word中的对文章设置标题一样，分为一级标题，二级标题，…等等。
<body>
<h1>一级标题<h1>
<h2>二级标题<h2>
<h3>三级标题<h3>
<h4>四级标题<h4>
...
</body>⑤列表标签：
无序列表标签（ul）：ul里面只能嵌套子标签li,不能嵌套其他类型的标签，但子级标签li里面可以嵌套任何标签，ul通过li展示文字内容
快捷生成多个li子元素的方法：ul>li*个数
<ul>
<li>今天天气真好呀</li>
<li>今天的内容很精彩</li>
<li>今天的我很开心</li>
<li>今天的我学到了很多的知识</li>
<li>
<div>
今天很充实
</div>
</li>
</ul>运行结果为：
可以通过type属性去修改前面的符号，默认为是一个小圆圈
（1）type="disc" 黑色小圆点 默认值
（2）type="circle" 空心圆
（3）type="square" 黑色方块
（4）type="none"
有序列表标签（ol）：默认是从1开始排列 ，可以是从字母开始排列 a和A或者罗马数字 i和I
可以使用css样式清除有序列表 style="list-style:none"
<ol type="a" style="list-style: none" >
<li>先坐车回家</li>
<li>先开灯</li>
<li>打开热水器</li>
<li>打开空调</li>
<li>开始洗澡躺床上睡觉</li>
</ol>运行结果为：
列表之间可以相互嵌套
<!-- 列表之间相互嵌套-->
<ul>
<li>li子元素</li>
<li>
<!--有序列表-->
<ol>
<li>我是写在无序列表里面的ol的子元素标签</li>
</ol>
</li>
</ul>
自定义列表: 一般结果为无序列表
<!--dl:自定义列表 -->
<dl>
<!--dt自定义列表项目名-->
<dt>项目名</dt>
<!--dd自定义列表项目描述-->
<dd>项目具体描述</dd>
</dl>
<dl>
<dt>手机品牌</dt>
<dd>小米</dd>
<dd>华为</dd>
<dd>苹果</dd>
<dd>oppo</dd>
<dd>vivo</dd>
</dl>⑥a标签，超链接标签
a:超链接标签/超文本标签 1.href 超链接点击之后跳转地址 2.target 指定你的链接在 打开位置 >默认值: _self 在当前的页面去打开 >target="_blank" 在新的标签页中打开 可以重复打开多个 >_new 新开 只会新开一个标签页 <a href="https://www.baidu.com/" target="_self">点我去百度一下</a> <br> <a href="./2-列表标签.html" target="_new">去学习一下列表</a>
⑦img标签，图片标签
src:图片地址
路径方式：./: 相对路径
绝对路径：从盘的位置开始，一直到你的文件结束
alt: 提示文本作用
width：设置宽度
height：设置高度
title:鼠标悬停到图片，会显示文字
<img src="./动物.jpg" alt="图片出问题了" width="300" height="500" title="小猫真可爱呀!">
⑧文字加粗标签
<b> 文字会加粗</b> 只是视觉加粗
<strong>文字也会加粗 </strong> 视觉加粗，也会被浏览器优先查找到，是突出重要标签
⑨倾斜标签
<i> 文字倾斜 </i>
<em> 丁禹兮 </em> em优先被浏览器查找到
⑩删除线标签 del标签 s标签
<div>
<del> 原价：999元 </del> 特价：99元
</div>
<s>删除线标签 </s>
⑪分隔符 : <hr> 结果会显示一条水平线 <br>文本换行符
br标签实例：
This text contains<br />a line breakbr显示效果如图：
This text contains
a line break⑫空格实体符： 
<p>
我觉得前端 还是很简单的
</p>显示效果图：
我觉得前端 还是很简单的作者：小丁学python
