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>标签 一个等级

目录
相关文章
|
21天前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
21天前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
21天前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
20天前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
21天前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
21天前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
21天前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
21天前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
21天前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示

热门文章

最新文章

推荐镜像

更多