Spider03

最新推荐文章于 2024-06-14 23:48:57 发布

Eshel_

最新推荐文章于 2024-06-14 23:48:57 发布

阅读量194

点赞数 1

分类专栏： python语言基础 python学习爬虫文章标签： python 爬虫

本文链接：https://blog.csdn.net/Eshel_/article/details/124809823

版权

python语言基础同时被 3 个专栏收录

31 篇文章 1 订阅

订阅专栏

python学习

29 篇文章 0 订阅

订阅专栏

爬虫

8 篇文章 0 订阅

订阅专栏

1. html文字标签

1）标题标签：自带加粗、自带换行（h1~h6）

<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>

2）段落标签：p:自带换行

<p>大熊猫（学名：Ailuropoda melanoleuca）：属于食肉目、熊科、大熊猫亚科、大熊猫属唯一的哺乳动物。
仅有二个亚种。雄性个体稍大于雌性。
体型肥硕似熊、丰腴富态，头圆尾短，头躯长1.2-1.8米，尾长10-12厘米。
体重80-120千克，最重可达180千克，体色为黑白两色，脸颊圆，有很大的黑眼圈，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。
大熊猫皮肤厚，最厚处可达10毫米。黑白相间的外表，
有利于隐蔽在密林的树上和积雪的地面而不易被天敌发现。</p>

3）行内标签：span标签：多个span标签可显示在一行

<span>请登录</span>|
<span>我的快递</span>|
<span>京东快递</span>

4）文字倾斜：i、em；文字加粗：b、strong

<i>文字既加粗又倾斜</i>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>XXX的HTML页面</title>
   </head>
   <body>
      <!-- 标题标签：自带加粗、自带换行（h1~h6） -->
      <h1>我是一级标签</h1>
      <h2>我是二级标签</h2>
      <h3>我是三级标签</h3>
      <h4>我是四级标签</h4>
      <h5>我是五级标签</h5>
      <h6>我是六级标签</h6>
      <!-- 段落标签：p:自带换行 -->
      <p>大熊猫（学名：Ailuropoda melanoleuca）：属于食肉目、熊科、大熊猫亚科、大熊猫属唯一的哺乳动物。
      仅有二个亚种。雄性个体稍大于雌性。
      体型肥硕似熊、丰腴富态，头圆尾短，头躯长1.2-1.8米，尾长10-12厘米。
      体重80-120千克，最重可达180千克，体色为黑白两色，脸颊圆，有很大的黑眼圈，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。
      大熊猫皮肤厚，最厚处可达10毫米。黑白相间的外表，
      有利于隐蔽在密林的树上和积雪的地面而不易被天敌发现。</p>
      
      <p>生活在海拔2600-3500米的茂密竹林里，那里常年空气稀薄，云雾缭绕，气温低于20℃。
      有充足的竹子，地形和水源的分布利于该物种建巢藏身和哺育幼仔。大熊猫善于爬树，也爱嬉戏。
      爬树的行为一般是临近求婚期，或逃避危险，或彼此相遇时弱者借以回避强者的一种方式。
      大熊猫每天除去一半进食的时间，剩下的一半时间多数便是在睡梦中度过。
      在野外，大熊猫在每两次进食的中间睡2-4个小时。
      大熊猫99%的食物都是竹子，可供大熊猫食用的竹类植物共有12属、60多种。野外大熊猫的寿命为18-20岁，圈养状态下可以超过30岁。</p>
      
      <!-- 行内标签：span标签：多个span标签可显示在一行 -->
      <span>请登录</span>|
      <span>我的快递</span>|
      <span>京东快递</span>
      
      <!-- 
      文字倾斜：i、em
       文字加粗：b、strong
       -->
       <b>
          <i>文字既加粗又倾斜</i>
       </b>
   </body>
</html>

2. 图片音频视频和超链接

1）超链接标签

<a href="http://www.baidu.com" target="_blank">百度</a>

2）换行标签：br -->

<br>

3）iframe：内联框架

<iframe src="http://www.bilibili.com" frameborder="0" width="100%" height="500px"></iframe>

4）水平线标签：hr

<hr>

5）图片标签：img

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png1" alt="百度logo">
<img src="./img/2.jpg" alt="" width="100px" height="80px">

6）音频标签：audio

<audio controls src="./img/qinghuaci.mp3"></audio>

7）视频标签：video

<video controls src="./img/大熊猫.mp4"></video>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <!-- 超链接标签：a -->
      <!-- target="_blank":在新的标签页打开超链接指定的链接 -->
      <a href="http://www.baidu.com" target="_blank">百度</a>
      
      <!-- 换行标签：br -->
      <br>
      <br>
      
      <!-- iframe：内联框架 -->
      <!-- px:像素 -->
      <iframe src="http://www.bilibili.com" frameborder="0" width="100%" height="500px"></iframe>
      <!-- 水平线标签：hr -->
      <hr>
      
      <!-- 图片标签：img -->
      <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png1" alt="百度logo">
      <img src="./img/2.jpg" alt="" width="100px" height="80px">
      
      <!-- 音频标签：audio -->
      <audio controls src="./img/qinghuaci.mp3"></audio>
      
      <!-- 视频标签：video -->
      <video controls src="./img/大熊猫.mp4"></video>
      
   </body>
</html>

3. 列表

1）无序列表ul

<p>小说</p>
<ul>
   <li>
      <a href="https://book.qidian.com/info/1023912499/">霸道总裁</a>
      </li>
   <li>斗破苍穹</li>
   <li>斗罗大陆</li>
</ul>

2）有序列表ol

<p>游戏：王者荣耀</p>
<ol>
   <li>张三</li>
   <li>李四</li>
   <li>王五</li>
</ol>

3）列表中的内容li

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <!-- 无序列表ul、有序列表ol -->
      <!-- 列表中的内容li -->
      
      <!-- 无序列表：ul -->
      <p>小说</p>
      <ul>
         <li>
            <a href="https://book.qidian.com/info/1023912499/">霸道总裁</a>
            </li>
         <li>斗破苍穹</li>
         <li>斗罗大陆</li>
      </ul>
      
      <!-- 有序列表 -->
      <p>游戏：王者荣耀</p>
      <ol>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
      </ol>
      
   </body>
</html>

4. input标签

1）form表单标签

<form method="POST">
    
</form>

2）input标签：

可以实现输入框、可以实现按钮。
修改type属性值可以实现不同的功能。
placeholder：提示文字

a. input type=“tel”：表示这个输入框要输入的是手机号。

b. value：在input标签中设置默认值

<span>手机号：</span>
   <input type="tel" placeholder="请输入手机号：" value="1234567">
   <br>
   <span>密码：</span>
   <input type="password" placeholder="请输入密码：">
   <br>
   <!-- value：在input标签中设置默认值 -->
   <input type="submit" value="登录">
   <input type="reset" value="重置">
</form>

c. 上传文件：type=“file”

<input type="file">

d. 选择颜色：color

<input type="color">

e. 选择日期和时间

<input type="date">
<input type="time">

3）input标签的单选和多选中，input标签是提供选择按钮，label标签提供选择的内容，id属性和for属性相关联，提供的是input和label一一对应。

a. 单选：

调用id属性使用#

单选框中name和id属性值要一致

<input type="radio" name="性别" id="gender1"><label for="gender1">男</label>
<input type="radio" name="性别" id="gender2"><label for="gender2">女</label>

b. 多选

<input type="checkbox" name="兴趣" id="interest1"><label for="interest1">篮球</label>
<input type="checkbox" name="兴趣" id="interest2"><label for="interest2">足球</label>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <!-- form表单标签 -->
      <form method="POST">
         <!-- input标签：
          可以实现输入框、可以实现按钮。
          修改type属性值可以实现不同的功能。
          placeholder：提示文字
          -->
          <!-- <input type="tel"：表示这个输入框要输入的是手机号 -->
          <span>手机号：</span>
         <input type="tel" placeholder="请输入手机号：" value="1234567">
         <br>
         <span>密码：</span>
         <input type="password" placeholder="请输入密码：">
         <br>
         <!-- value：在input标签中设置默认值 -->
         <input type="submit" value="登录">
         <input type="reset" value="重置">
      </form>
      <!-- 上传文件：type="file" -->
      <input type="file">
      <!-- 选择颜色：color -->
      <input type="color">
      <!-- 选择日期和时间 -->
      <input type="date">
      <input type="time">
      <br>
      <!-- input标签的单选和多选中，input标签是提供选择按钮，label标签提供选择的内容
       id属性和for属性相关联，提供的是input和label一一对应-->
      <!-- 单选 -->
      <!-- 调用id属性使用# -->
      <!-- 单选框中name和id属性值要一致 -->
      <input type="radio" name="性别" id="gender1"><label for="gender1">男</label>
      <input type="radio" name="性别" id="gender2"><label for="gender2">女</label>
      
      <!-- 多选 -->
      <input type="checkbox" name="兴趣" id="interest1"><label for="interest1">篮球</label>
      <input type="checkbox" name="兴趣" id="interest2"><label for="interest2">足球</label>
      
   </body>
</html>

5. CSS

CSS：层叠样式表。CSS层叠样式表修改页面中的元素可以精确到像素点。

5.1 CSS的使用

1）行内式。

2）内嵌式。

3）外链式。

5.2 CSS常用属性

1）color：修改文字颜色。
2）text-align：修改文字的位置（左对齐、右对齐、居中对齐）。
3）text-size：字体尺寸。
4）border：边框。
5）margin：外边距。
6）padding：内边距。
7）font-family：修改字体样式（宋体、楷体、隶书等）。
8）background：背景。
9）width：宽度。
10）height：高度。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <!-- CSS内嵌式 -->
      <style>
         /* 所有的标签自带边距 */
         /* 通配符选择器："*" */
         *{
            margin: 0;
            padding: 0;
         }
         
         /* CSS选择器： */
         /* 标签选择器 */
         /* 页面中存在几个X标签，如果使用标签选择器，所有的X标签都会变成一种样式。 */
         div {
            width: 250px;
            height: 250px;
            background-color: green;
         }
         
         /* 类选择器：class，类选择器使用"."调用 */
         /* 在body标签中查找类名是one的标签 */
         .one{
            border: 5px solid red;
         }
         
         /* id选择器：使用 # 调用 */
         /* id选择器在body标签中查找id是one的标签 */
         #one{border-bottom: 10px solid black;
            
         }
      </style>
   </head>
   <body>
      <!-- div标签：盒子模型。 -->
      <div class="one">
         
      </div>
      <hr />
      <div id="one">
         
      </div>
   </body>
</html>

6. CSS选择器

6.1 父子选择器

父子选择器：父子选择器使用 > 连接，左边是父标签，右边是子标签。

6.2 后代选择器

后代选择器：使用空格连接，左边是祖先，右边是后代。

6.3 兄弟选择器

兄弟选择器：：使用 ~连接。

6.4 属性选择器

6.5 nth-child选择器

nth-child选择器：pythn3.7以上版本才有这个选择器。

nth-child选择器不看标签名，只找某个标签是所有（同层次）标签下的第几个。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <style>
         /* 父子选择器：父子选择器使用 > 连接，左边是父标签，右边是子标签 */
         /* 找类名是one的标签下的所有子标签h1 */
         .one > h1{
            color: red;
         }
         
         .two > ul > li{
            color: blue;
            text-align: center;
         }
         
         /* 后代选择器：使用空格 连接，左边是祖先，右边是后代 */
         .one h2{
            color: green;
            font-family: "仿宋";
            text-align: right;
         }
         
         /* 兄弟选择器：：使用 ~连接 */
         /* 将类名是one的标签下的子代h1标签的所有比h1标签小的h2标签兄弟改成黄色 */
         .one > h1 ~ h2{
            color: yellow;
         }
         /* 相邻兄弟选择器 + */
         /* 将类名是one的标签下的子代h1标签的所有比h1标签小的相邻的h2标签兄弟改成粉色 */
         .one > h1 + h2{
            color: pink;
            text-align: left;
         }
         
         /* 属性选择器： */
         input[type=submit]{
            background-color: blue;
            color: white;
            border: none;
         }
         
         /* nth-child选择器：pythn3.7以上版本才有这个选择器 */
         /* nth-child选择器不看标签名，只找某个标签是所有（同层次）标签下的第几个 */
         body > div:nth-child(4){
            border: 5px solid blue;
         }
         
      </style>
      
   </head>
   <body>
      <h1>我是h1标签</h1>
      <div class="one">
         <h1>我是一级标签</h1>
         <h2>我是二级标签</h2>
         <h2>我是二级标签</h2>
      </div>
      
      <div class="two">
         <p>游戏</p>
         <ul>
            <li>王者荣耀</li>
            <li>英雄联盟</li>
            <li>pubg</li>
            <li>CS：GO</li>
         </ul>
      </div>
      
      <div id="one">
         <input type="submit" value="登录">
         <br>
         <input type="reset" value="重置">
      </div>
      
   </body>
</html>

7. 前端基本了解

7.1 前端三大技术：

HTML：提供（文字、图片、音频、视频、按钮、输入框等内容）的展示。
CSS：将HTML显示的内容进行布局和样式渲染。
JavaScript：提供了页面内容的变化。

7.2 HTML

1）HTML：超文本标记语言（HyperText Markup language）

2）后缀名：.html、.htm、.shtml、.shtm 。

.shtml、.shtm：内置了ssi命令，可以和服务器通信，更新页面内容。

DOS操作系统：兼容的文件只能是后缀名长度<=3的。
所以html和htm是一类文件，shtml和shtm是一类文件。

3）HTML是通过标签将文字、图片等内容显示到页面中的。

a. 双标签（一般标签）

<标签名属性名1=属性值1 属性名2=属性值2 . …>内容</标签名>

b. 单标签（自闭合标签）

<标签名属性名1=属性值1 属性名2=属性值2 …>或者
<标签名属性名1=属性值1 属性名2=属性值2 … />

Eshel_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spider03

1. html文字标签1）标题标签：自带加粗、自带换行（h1~h6）<h1>我是一级标签</h1><h2>我是二级标签</h2><h3>我是三级标签</h3><h4>我是四级标签</h4><h5>我是五级标签</h5><h6>我是六级标签</h6>2）段落标签：p:自带换行<p>大熊猫（学名：Ailuropoda melanoleuc
复制链接

扫一扫