Python HTML和CSS 1:html文档结构和常用标签

简介: Python HTML和CSS 1:html文档结构和常用标签

总体内容


1、前端概述

2、html 文档结构

3、html 标题标签、段落标签、换行标签 与 字符实体

4、html 块标签、含样式的标签、语义化的标签

5、html图像标签、绝对路径和相对路径

6、html链接标签

7、html列表


一、前端概述



  • 1.1、什么是前端开发?
    答:前端开发也叫做web前端开发,它指的是基于web的互联网产品的页面(也可叫界面)开发及功能开发。
  • 1.2、什么互联网产品?
    答:互联网产品就是指网站为满足用户需求而创建的用于运营的功能及服务,百度搜索、淘宝、微博、网易邮箱等都是互联网产品。
  • 1.3、前端开发需要哪些技术?
    答:前端工程师参照产品的效果图来开发页面(也可叫界面),效果图是由UI设计师用Photoshop(少量设计师用firework)来设计的,为了方便与UI设计师对接工作,前端需要掌握一些Photoshop的技能,Photoshop还可以辅助页面开发。把效果图布局成页面,需要用到HTML语言和CSS语言,页面功能的开发需要用到javascript,为了快速开发和系统开发,还需要学习一些前端的javascript库和框架。


二、html 概述和基本结构



  • 2.1、html 概述HTMLHyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。


  • 2.2、html基本结构
  • 一个html的基本结构如下:


<!DOCTYPE html>
<!-- 定义网页的语言 -->
<html lang="en">
<head>    
     <!-- 编码格式 -->        
     <meta charset="UTF-8">
     <!-- 标题 -->
     <title>网页的标题</title>
</head>
<body>
       这是网页显示内容
</body>
</html>

第一行是文档声明,第二行“<html>”标签和最后一行“</html>”定义html文档的整体,“<html>”标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是'lang="zh-CN"',不定义也没什么影响,它一般作为分析统计用。“<head>”标签和“<body>”标签是它的第一层子元素,“<head>”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“<body>”内编写网页上显示的内容。


  • 2.3、HTML文档类型目前常用的两种文档类型是xhtml 1.0html5
  • xhtml 1.0:是html5之前的一个常用的版本,目前许多网站仍然使用此版本。此版本文档用sublime text创建方法: html:xt + tab,文档示例:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title> xhtml 1.0 文档类型 </title>
</head>
<body>
</body>
</html>
  • html5:pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的,此版本文档用sublime text创建方法: html:5 + tab 或者 ! + tab,文档示例:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> html5文档类型 </title>
</head>
<body>
</body>
</html>
  • 两种文档的区别:1、文档声明和编码声明;2、html5新增了标签元素以及元素属性


  • 2.4、html注释:
    html文档代码中可以插入注释,注释是对代码的说明和解释,注释的内容不会显示在页面上,html代码中插入注释的方法是:


<!-- 这是一段注释  -->


三、html 标题标签、段落标签、换行标签 与 字符实体



  • 3.1、html标题标签
    通过 <h1><h2><h3><h4><h5><h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系,比如说: <h1>用作主标题,其后是 <h2>,再其次是 <h3>,以此类推。搜索引擎会使用标题将网页的结构和内容编制索引,所以网页上使用标题是很重要的。如下:


<h1>这是一级标题</h1>    
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
  • 3.2、html 段落标签:<p>段落内容</p>
    <p>标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开,不纯净,带样式,多个<p>标签之间有空行,代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html段落标签</title>
</head>
<body>
<p>夜,结束了一天的喧嚣后安静下来,伴随着远处路灯那微弱的光。风,毫无预兆地席卷整片旷野,撩动人的思绪万千。
  星,遥遥地挂在天空之中,闪烁着它那微微星光,不如阳光般灿烂却如花儿般如痴如醉。
</p>
<p>欲将沉醉换悲凉,清歌莫断肠。这混乱的尘世,究竟充斥了多少绝望和悲伤。你想去做一个勇敢的男子,为爱,为信仰,轰轰烈烈的奋斗一场。
  你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声,你是那样高傲孤洁的男子。你的一寸狂心未说,已经几度黄昏雨。
</p>
</body>
</html>
  • 3.3、html换行标签: <br/>
    代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认这种换行,如果真想换行,可以在代码的段落中插入 <br /> 来强制换行,代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html段落标签</title>
</head>
<body>
<p>夜,结束了一天的喧嚣后安静下来,伴随着远处路灯那微弱的光。<br/>风,毫无预兆地席卷整片旷野,撩动人的思绪万千。<br/>
  星,遥遥地挂在天空之中,闪烁着它那微微星光,不如阳光般灿烂却如花儿般如痴如醉。
</p>
<p>欲将沉醉换悲凉,清歌莫断肠。这混乱的尘世,究竟充斥了多少绝望和悲伤。<br/>你想去做一个勇敢的男子,为爱,为信仰,轰轰烈烈的奋斗一场。<br/>
  你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声,你是那样高傲孤洁的男子。你的一寸狂心未说,已经几度黄昏雨。
</p>
</body>
</html>
  • 3.4、html字符实体:&nbsp;
    代码中成段的文字,如果文字间想空多个空格,在代码中空多个空格,在渲染成网页时只会显示一个空格,如果想显示多个空格,可以使用空格的字符实体,代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html段落标签</title>
</head>
<body>
<p>夜,结束了一天的喧嚣后安静下来,伴随着远处路灯那微弱的光。<br/>风,毫无预兆地席卷整片旷野,撩动人的思绪万千。<br/>&nbsp;&nbsp;
 星,遥遥地挂在天空之中,闪烁着它那微微星光,不如阳光般灿烂却如花儿般如痴如醉。
</p>
</body>
</html>

在网页上显示 “<”“>” 会误认为是标签,想在网页上显示“<”“>”可以使用它们的字符实体,比如:“<” 和 “>” 的字符实体为 &lt; 和 &gt;

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
   9 &lt; 8 <br>
   2 &gt; 7
</p>


四、html 块标签、含样式的标签、语义化的标签


  • 4.1、html 块标签
  • <div></div> 标签 块元素,表示一块内容,没有具体的语义。纯净的,不带样式,可以嵌套自己,也可以嵌套其他的标签,如:<p> 标签


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签、含样式的标签</title>
</head>
<body>
<div>
<div>我是div</div>
<p>欲将沉醉换悲凉,清歌莫断肠。这混乱的尘世,究竟充斥了多少绝望和悲伤。</p>
</div>
</body>
</html>
  • <span></span> 标签 行内元素,表示一行中的一小段内容,没有具体的语义。


  • 4.2、含样式和语义的标签


  • <em> 标签 行内元素,表示语气中的强调词


<p>欲将沉醉换悲凉,<em>清歌莫断肠</em>。</p>
  • <i> 标签 行内元素,表示专业词汇


<p>欲将沉醉换悲凉,<i>清歌莫断肠</i>。</p>

<em> 标签与<i> 标签的区别是一个是强调词,一个是专业词汇,都会使字体倾斜


  • <b> 标签 行内元素,表示文档中的关键字或者产品名,字体加粗


<p>欲将沉醉换悲凉,<b>清歌莫断肠</b>。</p>
  • <strong> 标签 行内元素,表示非常重要的内容


<strong>欲将沉醉换悲凉,清歌莫断肠。</strong>
  • 4.3、语义化的标签



  • 语义化的标签,就是在布局的时候多使用有语义的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1 标签是表示标题,p 标签是表示段落,ulli 标签是表示列表,a标签表示链接,dldtdd 表示定义列表等,语义化的标签不多。


五、html 图像标签、绝对路径和相对路径



  • 5.1、html 图像标签<img> 标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:
  • src 属性 定义图片的引用地址
  • alt 属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片,所以此属性非常重要。


<img src="图片的名字.jpg" alt="图片">


image.png

  • 5.2、绝对路径 和 相对路径像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址。
  • 绝对地址:相对于磁盘的位置去定位文件的地址
  • 相对地址:相对于引用文件本身去定位被引用的文件地址


提示:绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题。相对路径的定义技巧:

  • “ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。
  • “ ../ ” 表示当前文件所在目录下的上一级目录,比如:“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的 pic.jpg 的图片。


六、html 链接标签



  • <a> 标签可以在网页上定义一个链接地址,它的常用属性有:
  • href 属性 定义跳转的地址


<a href="https://www.baidu.com">百度</a>

表示链接到百度页面,把当前的页面替换掉

  • title 属性 定义鼠标悬停时弹出的提示文字框


<a href="https://www.baidu.com" title="跳转到百度">百度</a>


image.png

  • target 属性 定义链接窗口打开的位置
  • target="_self" 缺省值,新页面替换原来的页面,在原来位置打开


<a href="https://www.baidu.com" title="跳转到百度" target="_self">百度</a>
  • target="_blank" 新页面会在新开的一个浏览器窗口打开


<a href="https://www.baidu.com" title="跳转到百度" target="_blank">百度</a>

提示:<a href="#"></a>:   # 表示链接到页面顶部,当一个页面内容很多的时候,你可以使用 # 回到顶部


七、html 列表



  • 7.1、有序列表
    在网页上定义一个有编号的内容列表可以用<ol><li> 配合使用来实现,代码如下:在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开发中较少使用。


<ol>
    <li>列表内容一</li>
    <li>列表内容二</li>
    <li>列表内容三</li>
</ol>


image.png

7.2、无序列表

在网页上定义一个无编号的内容列表可以用<ul><li>配合使用来实现,代码如下:

<ul>
    <li><a href="#">娱乐标题一</a></li>
    <li><a href="#">娱乐标题二</a></li>
    <li><a href="#">娱乐标题三</a></li>
</ul>


image.png

在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。可以把娱乐标题换成 <img src="图片的名字.jpg" alt="图片">,从而点击图片进行跳转


  • 7.3、定义列表
    定义列表通常用于术语的定义。<dl> 标签表示列表的整体。<dt> 标签定义术语的题目。<dd> 标签是术语的解释。一个 <dl> 中可以有多个题目和解释,代码如下:


<h3>前端三大块</h3>
<dl>
   <dt>html</dt>
   <dd>负责页面的结构</dd>
   <dt>css</dt>
   <dd>负责页面的表现</dd>
   <dt>javascript</dt>
   <dd>负责页面的行为</dd>
</dl>


image.png


提示:<dt>标签 与 <dd>标签 一个等级

目录
相关文章
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
2天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
7 1
|
2天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
9 2
|
3天前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
|
3天前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
|
4天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
13 0
|
4天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
11 0
|
5天前
|
Python
Python编程实战:如何将列表组装成一棵树结构
本文介绍了如何在Python中将列表转换为树结构。首先定义`TreeNode`类表示节点,包含值和子节点列表。然后,通过`list_to_tree`函数递归地将列表转为树。此外,还提供了添加和删除节点的方法。文章旨在帮助读者理解和操作树结构,以解决实际编程问题。
Python编程实战:如何将列表组装成一棵树结构
|
5天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
11 2
|
5天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
19 3