开发者社区> JoanKing> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
19800 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29133 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
13571 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22537 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
16428 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20693 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14898 0
+关注
433
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载