Python学习笔记(二)---标签、CSS

第四部分 标签

4.1.1.a标签

<a href="跳转的位置" target="页面打开的方式"> 内容</a>

4.1.2 跳转的位置:

href 属性规定链接的目标。

A.外网, http://域名;

B.内部链接,可以使用相对路径;

C.锚点链接,页面比较长,快速定位。 

4.2.页面打开新标签页面的方式

标签的 target 属性规定在何处打开链接文档。

 target 值  target 属性

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。即新窗口打开。

_self

 <a> 标签是默认值。它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。即本窗口打开。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

4.3 <ul> 标签 、<ol> 标签 与 <li> 标签---列表标签

<ul> 标签定义无序列表。

<ol> 标签定义有序列表。

<li> 标签定义列表项目,独占一行。

<li> 标签可用在有序列表(<ol>)、无序列表(<ul>)和菜单列表(<menu>)中。

此外,还有自定义列表标签:dl

<dl> 标签定义了定义列表(definition list)。

<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。

4.4 表格标签

table标签 tr标签 td标签 th标签

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。td 标签的colspan 属性了规定单元格可横跨的列数(列合并);td 标签的rowspan规定了单元格可横跨的行数(行合并)。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

4.5 <p> 标签

<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。

4.6 表单 <form> 标签

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend \select、button 和 label 元素。

input的type属性值可以是:text、password、checkbox、radio、submit、button、reset、file、hidden。

属性:action:值 绑定按钮submit上;

         method:get/post 表单的提交方式

                 url:get请求:将表单数据拼接在url路径 key=value&key=value.....

                       post请求:表单数据放到了请求体中。以key:value形式存在。

       enctype:encodeing type 一般在文件上传是指定。

radio:单选按钮

            name必须保持一致,如果不一致则不能是一组单选按钮。

            设置默认选中,添加一个属性,checked.

hidden:隐藏表单域 无法在页面看到。

select...optin:下拉列表。

表单用于向服务器传输数据。

4.7 标题标签

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。

4.8 iframe 标签

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

第五部分 样式--CSS

 种类:

5.1.行内样式

    定义在某个标签中的样式,通过style属性定义样式。

   场景:单独或者具体设置某个标签样式的时候可以使用行内样式。

   <div style=''></div>

   样式的属性:

          样式的属性:值

          多个值是通过";"进行分割

     块级

     行内

     行内块

5.2.内部样式

    选择器:标签选择器 类选择器 id选择器

    标签选择器:

        标签名{

          样式属性:值;

          ......

           }

          标签选择器是作用在所有的标签上的。

    类选择器:

           步骤:

           1.设置一类标签;

               <ul class='名字'></ul>

               <ul class='名字'></ul>

               <ul class='名字'></ul>

            2.在style标签中定义选择器;

               .ul {

                    list-style:none;

                     color:red;

                      padding:0;

                   }

               注意:类选择器名字前面一定要加‘.’

               补充:一个标签上可以引用多个类名,空格分隔。

    id 选择器

         步骤:

         1.设置一类标签

             <ul id='id名字'></ul> ---->唯一的标识

           2.在style标签中定义选择器:

              #id名字{

                  样式

                }

              注意:id 选择器名字前面一定要加‘#’。

5.3.外部样式

   CSS文件夹中,独立抽象出的文件,通过<link>被调用。

   步骤:

   1.定义样式表文件:

      xxx.css -------扩展名是CSS

    2.html 引用样式

       <link rel="stylesheet" href="css/style.css"/>

5.4.CSS 背景

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。

CSS 在这方面的能力远远在 HTML 之上。

5.5.CSS 文本

 CSS 文本属性可定义文本的外观。

通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

5.6.CSS 字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。

5.7.CSS 列表

CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。

从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单,甚至你的所有朋友都可以表示为一个列表或者是列表的列表。

由于列表如此多样,这使得列表相当重要,所以说,CSS 中列表样式不太丰富确实是一大憾事。

5.8.CSS 表格

CSS 表格属性可以帮助您极大地改善表格的外观。表格边框、折叠边框、表格宽度和高度、表格文本对齐、表格内边距、表格颜色。

5.9.浮动

5.9.1 标准流

行内元素:与其它行内元素并排;不能设置宽、高;默认的宽度就是文字的宽度。

块级元素:霸占一行,不能与其它任何元素并列;能接受宽、高;如果不设置宽度,那么宽度将默认变为父亲的100%。

块级元素和行内元素的分类:

行内:pan、a、b、i、u、em。

块级:div、h系列、li、dt、dd、p

display属性将块级元素和行内元素进行转换。display即“显示模式”。

块级元素可以转换为行内元素:inline inline-block block

 5.9.2 CSS 浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

 5.9.3 盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

 

posted @   东山絮柳仔  阅读(197)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示