整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Python小案例71- HTML基础及语法

TML(HyperText Markup Language)是一种用于创建网页的标记语言。它由一系列的标签组成,这些标签用于描述网页的结构和内容。HTML标签通常由尖括号包围,例如<tag>

HTML标签可以分为两类:块级元素和内联元素。块级元素用于组织网页的结构,例如段落、标题、列表等。内联元素用于标记文本中的特定部分,例如链接、强调文本等。

HTML标签可以包含属性,属性提供了有关标签的额外信息。例如,<a>标签用于创建链接,可以使用href属性指定链接的目标URL。

除了标签和属性,HTML还支持一些特殊字符实体,用于表示特殊字符,例如小于号(<)、大于号(>)等。

HTML可以与CSS(层叠样式表)和JavaScript一起使用,以增强网页的外观和功能。CSS用于控制网页的样式,例如颜色、字体、布局等。JavaScript用于实现交互性和动态效果,例如表单验证、动画等。

通过使用HTML,开发人员可以创建具有结构良好、易于理解和导航的网页。它是构建互联网的基础之一,被广泛应用于网站开发和内容管理系统。

HTML的语法由标签、属性和内容组成。下面是HTML的基本语法规则:

  1. 标签:HTML标签用于定义网页的结构和内容。标签通常由尖括号包围,例如<tag>。标签可以是成对出现的,其中包含一个开标签和一个闭标签,例如<tag>content</tag>。也可以是自闭合标签,即只有一个标签,没有内容,例如<tag />
  2. 属性:HTML标签可以包含属性,属性提供了有关标签的额外信息。属性通常以键值对的形式出现,例如<tag attribute="value">。属性的值可以是字符串或布尔值。常见的属性包括classidsrchref等。
  3. 内容:HTML标签可以包含文本内容或其他标签。文本内容直接放置在标签的开闭标签之间,例如<p>这是一个段落。</p>。标签可以嵌套在其他标签中,形成标签的层次结构。
  4. 注释:HTML注释用于在代码中添加注释,不会在网页中显示。注释以<!--开头,以-->结尾,例如<!-- 这是一个注释 -->

下面是一个简单的HTML示例:

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
  <a href="https://www.example.com">点击这里</a>访问示例网站。
</body>
</html>

在这个示例中,<!DOCTYPE html>声明了文档类型为HTML5。<html>标签是HTML文档的根元素。<head>标签用于定义文档的头部信息,例如标题和样式表。<title>标签定义了网页的标题,将显示在浏览器的标题栏中。<body>标签用于定义文档的主体内容。<h1>标签定义了一个一级标题,<p>标签定义了一个段落,<a>标签定义了一个链接。

源:设计达人(shejidaren888)

最近在更新设计导航 HTML 代码时,发现有个样式总是加载不出来,经过细看发现竟然是因为用了中文的双引号导致,但因为网页代码编辑器西文和中文的双引号太相似所以忽略查找这个问题,如此初级的问题却浪费了不少时间……

所以最终解决方案就是为网页代码编辑器使用代码专用字体:FiraCode + 中文字体组合(也适用于网页端),使用此方法,可以美化代码效果,减少因字符视觉差造成的小问题,对眼睛疲劳也有一定缓解作用哦。

一、FiraCode字体

FiraCode估计很多资深编码人员都了解过,在 Github 已经有30000 的 Star,它主要有2个特色:

1、字符等宽

每个字符宽度占用距离是一样的,所以无论大小写,你都能看到它是对齐的,但是若遇到有中文字体,这就不太好使了。

2、连字符号设计

当用户如输入 这两个符号,就会自动连在一起。如下图:

二、中文字体选择

为了解决引号的视觉问题,我们还必须选择中文字体,经小编测试一翻后,最后使用了思源黑体,这样引号就比较好分别了。WIN 系统下显示可能会更加明显。当然最后还是个人喜好设置中文字体啦。

mac 系统 Atom 编辑器截图

三、Atom 编辑器修改字体方法

小编使用的免费的 Atom 网页代码编辑器,所以只能用它来举例,其它编辑器修改方法也大同小异,可自行百度哦。

1、选择菜单 Atom ,然后在下拉菜单中选择用户样式设置

2、在「atom-text-editor」加入 font-family 和 font-size 的 CSS 属性:


font-family: "firacode-retina","Source Han Sans CN";
font-size:16px;

需要注意的是,小编使用了 Retina 屏的电脑,所以字体名称就用「firacode-retina」,在非高清屏的下直接使用「firacode」就行,具体大家可以自己试试,区别不是很大。

具体如下图:

四、下载地址

下载的字体非常全面,包含 ttf 及网页端的eot, woff 等字体格式,无需转换就能直接使用。

Firacode 官方下载地址:

https://github.com/tonsky/FiraCode

思源黑体下载地址:

http://www.shejidaren.com/app-she-ji-bi-bei-zi-ti.html

总结

使用FiraCode 中文的字体组合,不仅能让一串串代码变得工整美观,还能减少因字符显示引起的出错率,推荐大家收藏使用。

设计前端页面是,我们有一个原则:效果能用css实现的,绝对不用js来实现,因为这样可以加快页面渲染速度,js的解析速度要慢于css的解析速度!

css简单二级导航

小提示:完整源码和注释在最下方

使用纯css来实现二级导航的大致思路是:

规划一级导航

使用最简单的元素<div id=”navBar”>,ul li a来实现,

规划二级导航,直接在一级导航的Li元素中使用ul li a

一级导航设计第一个要点:

li要设置为float:left,因为li元素默认的display属性是list-item,这个属性有点类似于block,默认是换行的,所以我们要指定float:left,让li元素水平顺序排列

#navBar ul li{
 float: left;/**浮动向左就会自动排列**/
 background-color: #ddd3d3;
 position: relative;/**用作2级导航的定位元素**/
 }

一级导航的第二个要点:

a属性的display属性要设置为block,因为A元素的默认属性是inline,inline不会填充整个宽度,display:block可以做到

 #navBar ul li a{
 display: block;
 margin: 0 10px;
 line-height: 50px;/**文字水平居中**/
 }

一级导航的第三个要点:

a元素的line-height要和导航条的高度一致,这样可以做到文字垂直居中,同样,我们在加上text-algin:center属性,文字就变得水平居中了

一级导航的第四个要点:

一级导航的Li元素postion属性我们设置为relative,一会我们要用到

二级导航要点:

把li继承一级导航中的float:left属性去掉

 #navBar ul li ul li{
 float: none;
 border-bottom: 1px solid #000;
 }

因为二级导航列表项我们要的排列效果是垂直排列

设置二级导航ul display:none;先把二级导航隐藏

 #navBar ul li ul{
 display: none; /**没有发生hover事件的时候,先隐藏二级导航**/
 }

设置二级导航postion属性为Postion:absolute,top:一级导航条的高度,left:0;

 position: absolute;/**位置是绝对定位,定位的父元素是一级导航的li**/
 top:50px;/**一级导航条的高度,不设定会覆盖1级导航**/
 left: 0;

核心:

我们使用li的伪类来实现二级导航菜单的显示

#navBar ul li:hover ul{
Display:block;
}

对,css的弱项在哪里?就是没有驱动事件,伪类有时候可以实现事件驱动效果

最后,为了二级导航的列表清晰一些,我们在二级导航中li元素添加一个1像素的黑色实体下边框

要点:

二级导航的代码要放在一级导航ul li的后面,具体就是:

<li>
<!--二级导航-->
<ul >
<li><a>导航11</a></li>
<li><a>导航12</a></li>
</ul>
 	<a>导航1</a>
</li>

为什么不把二级导航放在一级导航Li的下方?这样代码结构不是更加清晰明了吗

因为position:absolute要寻找一个postion:relative的父元素,如果找不到最近的relative父元素,那么就以body为父元素定位,如果二级导航代码在一级导航的li下方,那么一级导航li和二级导航这时间属于同级元素,不是父子关系,所有二级导航的绝对定位会定位到body

总结:我们使用了:hover伪类实现了css代替js事件,触发并实现了二级导航的样式改变,使用了相对定位和绝对定位来显现了二级导航正确显示在一级导航列表项的下方,能用css实现的事情,就不要使用js来做!

完整代码带注释: